Kendo UI grid number column with template won't filter

Question

I created a Kendo UI grid with two columns. One is just a number called num0. the other is is called num1 and it's data is created from num0 through a template.

The filter on num0 works find. The filter on num1 shows up and you can use it but no matches are found. ie: filter on num1 and select "Is equal" and enter "2", then click "Filter" and grid is emptied when it should have shown the 1st record.

Also, I made the num0 column editable and the num1 column not editable. I would like num1 column to change if num0 is edited.

I think it has something to do with the "template" that I am using to fill num1 column.

What do I need to do to fix this so the filter works?

Thanks

http://jsfiddle.net/elbarto99/acyxekgx/

$(document).ready(function()
{
    // Define the datasource for the grid.
    var dsNums = new kendo.data.DataSource({
        // NOTE: I don't want a num1: data field set to static values.
        //       I would like one that is set from "num0 + 1" and when num0 data is edited
        //       num1 would be updated to "num0 + 1"
        data: [
            { num0: 1 },
            { num0: 2 },
            { num0: 3 },
            { num0: 4 },
        ],
        schema:
        {
            model:
            {
                id: "myGridID",
                fields:
                {
                    num0: { type: "number"  },
                    num1: { type: "number", editable: false  },
                }
            }
        }

    });

    // Create the grid.
    var _grid = $("#grid").kendoGrid({
        dataSource: dsNums,
        filterable: { extra: false },
        editable: true,
        columns: [
            { field: "num0" , title: "Num 0" , width: "90px", },
            // Add 1 to num0 and display in num1 column
            // Note: A filter shows up and is for numbers but doesn't work
            //       I think it doesn't work because I am using a template.
            //       
            //       What do I need to do to make the filter for column num1 work like it does for num0?
            { field: "num1" , title: "Num 1 - Filter shows up but doesn't find matchs. :-(" , width: "90px", template: "#= num0 + 1 #", },
        ],
    }).data("kendoGrid");

});

Answer 1

num1 value is not part of the data so filter will not filter by it. Filters work at datasource level and not presentation.

What you might do is computing that same value on schema.parse function. Something like:

    parse: function(d) {
        $.each(d, function(idx, elem) {
            elem.num1 = elem.num0 + 1;
        });
        return d;
    }  

Your JSFiddle modified here: http://jsfiddle.net/OnaBai/acyxekgx/2/

Answer 2

Thanks OnaBai: I modified your jfiddle and add some editable settings so num0 column is editable and num1 column is not editable.

Is there a way to make num1's data and presentation get updated to num0 + 1 if num0 is edited? ie: num0 changed to 11, num1's data gets changed to num0+1 or 12, and filter on num1 to find 12 will list row 1.

Also, make the presentation of num1 set to 12 so the user can see the change.

http://jsfiddle.net/elbarto99/acyxekgx/

// Define the datasource for the grid.
var dsNums = new kendo.data.DataSource({
    // NOTE: I don't want a num1: data field set to static values.
    //       I would like one that is set from "num0 + 1" and when num0 data is edited
    //       num1 would be updated to "num0 + 1"
    data: [
        { num0: 1 },
        { num0: 2 },
        { num0: 3 },
        { num0: 4 }
    ],
    schema:
    {
        model:
        {
            id: "myGridID",
            fields:
            {
                num0: { type: "number"  },
                num1: { type: "number", editable: false  }
            }
        },
        // This changes the data for num1 at load time but
        // if the data in num0 is edited this doesn't change data for num1
        // at edit time.
        parse: function(d) {
            $.each(d, function(idx, elem) {
                elem.num1 = elem.num0 + 1;
            });
            return d;
        }        
    } 
});

// Create the grid.
var _grid = $("#grid").kendoGrid({
    dataSource: dsNums,
    filterable: { extra: false },
    editable: true,
    columns: [
        { field: "num0", title: "Num 0", width: "90px" },
        { field: "num1", title: "Num 1", width: "90px" }
    ]
}).data("kendoGrid");