带有模板的 Kendo UI 网格编号列不会过滤

Question

我创建了一个包含两列的 Kendo UI 网格。 一个只是一个名为 num0 的数字。 另一个称为 num1，它的数据是从 num0 到 a 模板。

num0 上的过滤器可以找到。 num1 上的过滤器出现，您可以使用它，但是 找不到匹配项。即：过滤num1并选择“等于”并输入“2”， 然后点击“过滤器” 并且当它应该显示第一条记录时，网格被清空。

另外，我使 num0 列可编辑，而 num1 列不可编辑。 如果 num0 被编辑，我想改变 num1 列。

我认为这与我使用的“模板”有关 填充 num1 列。

我需要做些什么来解决这个问题，以便过滤器正常工作？

谢谢

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 值不是数据的一部分，因此过滤器不会对其进行过滤。过滤器在数据源级别工作，而不是展示。

您可能会在 schema.parse 函数上计算相同的值。类似的东西：

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

您的 JSFiddle 在此处修改：http://jsfiddle.net/OnaBai/acyxekgx/2/

Answer 2

感谢 OnaBai： 我修改了你的 jfiddle 并添加一些可编辑设置，使 num0 列可编辑，而 num1 列不可编辑。

如果编辑了 num0，有没有办法让 num1 的数据和表示更新为 num0 + 1？ 即：num0 变为 11，num1 的数据变为 num0+1 或 12， 并在 num1 上过滤以查找 12 将列出第 1 行。

另外，将 num1 的表示设置为 12，以便用户可以看到更改。

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