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