mvvm - Kendo DataSource: Cómo definir las propiedades "computadas" para la lectura de datos desde una fuente remota de odata

kendo-ui computed-observable

Question

Situación:

• Kendo DataSource

  var ordersDataSource = new kendo.data.DataSource({
  type: "odata",
  transport: {
  read: {
  url: "http://localhost/odata.svc/Orders?$expand=OrderDetails"
  }
  },
  schema: {
  type: "json",
  data: function(response){
  return response.value;
  }
  total: function(response){
  return response[''odata.count''];
  }
  },
  serverPaging: true,
  serverFiltering: true,
  serverSorting: true
  })

• Los datos json leídos de la fuente de odata son como:

  {
  odata.metadata: "xxxx",
  odata.count: "5",
  value: [
  {
  OrderId: 1,
  OrderedDate: "2013-02-20",
  OrderInfoA: "Info A",
  OrderInfoB: "Info B"
  OrderDetails: [
  {
  OrderDetailId: 6,
  OrderDetailInfoC: "Info C",
  OrderDetailInfoD: "Info D"
  },
  {
  //Another OrderDetail''s data
  }
  ]
  },
  {
  // Another Order''s data
  }
  ]
  }

Pregunta 1 :

1.Si quiero definir una propiedad "computada": OrderedDateRelative , que debe ser el número de días entre Today (2013-02-25) y el día en que se creó el pedido (2013-02-20), Me gusta: "5 days Hace " , ¿CÓMO puedo lograr esto en el lado del cliente?

Respuesta a la pregunta 1: http://jsbin.com/ojomul/7/edit

Pregunta 2 - ACTUALIZACIÓN -

2. Cada pedido tiene sus detalles de pedido de propiedad anidados, entonces ¿es posible definir un campo calculado para la propiedad anidada Detalles de pedido? Como: OrderDetailInfoCAndD para cada OrderDetail, y el valor debería ser algo así como: OrderDetailInfoC + OrderDetailInfoD , que es "Info C Info D"?

Gracias,

decano

Answer 1

Aquí hay una forma de usar el campo calculado en Kendo Grid.

var crudServiceBaseUrl = "http://demos.telerik.com/kendo-ui/service",
dataSource = new kendo.data.DataSource({
transport: {
read: {
url: crudServiceBaseUrl + "/Products",
dataType: "jsonp"
}
},
pageSize: 20,
schema: {
model: {
total: function (item) {
return this.UnitPrice * this.UnitsInStock;
}
}
}
});
$("#grid").kendoGrid({
dataSource: dataSource,
pageable: true,
height: 550,
sortable: true,
filterable: true,
toolbar: ["create"],
columns: [
{ field: "UnitPrice", title: "Unit Price"},
{ field: "UnitsInStock", title: "Units In Stock", width: "120px" },
{ field: "total()", title: "Total" }]
});

Answer 2

Debajo de un ejemplo para usarlo en una grilla. Luego puede ordenar la columna.

$("#grid").kendoGrid({
dataSource: {
data: [
{ first: "John", last: "Doe" },
{ first: "Jane", last: "Doe" }
],
schema: {
model: {
// Calculated field
fullName: function() {
return this.first + " " + this.last;
},
fields: {
first: { type: "string" },
last: { type: "string" }
}
}
}
},
columns: [
{
// Trigger function of the Calculated field
field: "fullName()",
title: "Fullname"
},
{
field: "first",
title: "firstname"
}
]
});

Answer 3

Puede crear un campo calculado especificando el modelo de la fuente de datos:

 dataSource = new kendo.data.DataSource({
data: [
{ first: "John", last: "Doe" },
{ first: "Jane", last: "Doe" }
],
schema: {
model: {
// Calculated field
fullName: function() {
return this.get("first") + " " + this.get("last");
}
}
}
});

Aquí hay una demostración en vivo: http://jsbin.com/ojomul/1/edit