How to filter kendo grid data using filter specified for computed column

Question

Have a look at this jsfiddle

I have a computed column (NewCol as mentioned in the below code) in the kendo grid - which has filter option enabled. The columns shows True/False based on the data of the other column.

        schema: {
            model: {
                fields: {
                    OrderID: { type: "number" },
                    Freight: { type: "number" },
                    OrderDate: { type: "date" },
                    ShipCity: { type: "string" },
                    NewCol: {type: "string"}
                }
            }
        }

The column definition in grid is,

        {
            field: "NewCol",
            title: "Computed",
            template: '#= (OrderDate > new Date(1996,6,10) ) ? "False" : "True" #'
        }

Now, my issue is, the data are not getting filtered using that column filter i.e. True/False. If I filter with True/False, the grid goes empty.

I have tried defining function in datasource for the column as below, but then its not showing any data for the column.

NewCol: function () {
    console.log(this.get('OrderDate'));
    if (this.get('OrderDate') > new Date()) return 'False';
    else return 'True';
},

Ans shows the js error Uncaught TypeError: undefined is not a function

In your JSFiddle the problem is that you have server side filtering and it is not accepting the new column. Is this just in your JSFiddle or is this part of the final scenario? — OnaBai
thanks for pointing that out. It's just in jsfiddle.. In the actual scenario, the filtering is happening only at client side, as the column also gets defined at client side. I have updated the fiddle. jsfiddle.net/paritosh/3TsGB — Paritosh

OnaBai OnaBai · Accepted Answer · 2014-03-20T16:45:45

There are two options. The first is compatible with your version of KendoUI, the second you will have to move to current one.

1st solution, define a schema.parse function that computes the new column on read time:

parse: function (data) {
var tgtDate = new Date(1996,6,10);
$.each(data.d.results, function(idx, elem) {
    var d = parseInt(elem.OrderDate.substr(6));
    elem.NewCol = (d > tgtDate ) ? "False" : "True";
});
return data;
}

From there, the column is like any other column received from the server so you can use it.

You can see you JSFiddle modified here http://jsfiddle.net/OnaBai/3TsGB/3/

2nd solution is use a new feature that allows to define a options.fields.fieldName.parse function for a field definition in the model and do something similar to what I did in the previous solution.

How to filter kendo grid data using filter specified for computed column

1 Answers