Kendo DataSource: How to define "Computed" Properties for data read from remote odata source

Question

Situation:

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
})

the json data read from the odata source is like:

{
    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
        }
    ]
}

Question 1:

1.If I wanna define a "computed" property: OrderedDateRelative, which should be the number of days between Today(2013-02-25) and the Day the Order was Created(2013-02-20), Like: "5 days ago", HOW can i achieve this in the client side?

Answer to Question1: http://jsbin.com/ojomul/7/edit

Question 2 --UPDATE--

2.Every Order has its Nested Property OrderDetails, so is it possible to define a Calculated Field for the Nested OrderDetails Property? Like: OrderDetailInfoCAndD for each OrderDetail, and the value should be something like: OrderDetailInfoC + OrderDetailInfoD, which is "Info C Info D"?

Thanks,

dean

+1 for question 2, which is still unanswered. – zacharydl Jan 07 '14 at 23:50 — zacharydl, Jan 07 '14 at 23:50

score 7 · Answer 1 · answered Feb 25 '13 at 15:20

7

You can create a calculated field by specifying the model of the data source:

  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");
        }
      }
    }
  });

Here is a live demo: http://jsbin.com/ojomul/1/edit

answered Feb 25 '13 at 15:20

Atanas Korchev

30,562
8
59
93

1

HI, I edited your demo, http://jsbin.com/ojomul/4/edit, the CalculatedField is not showing correctly. – Dean Feb 25 '13 at 18:35
2

It is a function - you need to invoke it CalculatedField() – Atanas Korchev Feb 25 '13 at 19:03
1

Yes, invoke it as a function works, Thanks. Another question is: can we do something similar to the **Nested Property** OrderDetails? See my updated Question 2 plz. – Dean Feb 26 '13 at 01:51
Can you specify the type so that the filters work correctly? Like give the type as boolean, date, etc. By default it is treated as string. – Xavier John Aug 27 '14 at 19:17

score 2 · Answer 2 · answered Aug 27 '14 at 19:23

Here is a way to use calculated field in 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" }]
});

score 1 · Answer 3 · answered Jan 19 '16 at 12:43

Below an example to use it in a grid. It can then also sort the column.

$("#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"
        }
    ]
});

Kendo DataSource: How to define "Computed" Properties for data read from remote odata source

3 Answers3

Linked

Related