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

时间:2015-01-20 18:12:34

标签: kendo-ui kendo-grid kendo-datasource

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

num0上的过滤器可以找到。 num1上的过滤器显示,你可以使用它 没有找到匹配项。即:过滤num1并选择“Is equal”并输入“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");

});

2 个答案:

答案 0 :(得分: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/

答案 1 :(得分:0)

感谢OnaBai: 我修改了你的jfiddle 并添加一些可编辑的设置,以便num0列可编辑,num1列不可编辑。

如果编辑num0,有没有办法让num1的数据和演示文稿更新为num0 + 1? 即:num0更改为11,num1' s数据更改为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");