kendo-grid:不能过滤下拉列表中的列

时间:2014-07-10 16:16:14

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

我用模板定义了列:“object.type”,它是dropdownlist(有多种类型可供搜索)。

它有编辑:

                editor : function (container, options) {
                        $('<input data-text-field="display" data-value-field="id" data-bind="value:' + options.field + '"/>')
                            .appendTo(container)
                            .kendoDropDownList({
                                index: 0,
                                dataTextField: "display",
                                dataValueField: "id",
                                dataSource: usergroupConf.permissions
                            });
                    },

因此该列的元素是具有键id和显示的对象,例如

{
  "id":"1",
  "display":"Big"
}

现在,我为该列定义了可过滤的属性:

                filterable : {
                    extra : false,
                    ui : function(element) {
                        element.kendoDropDownList({
                            index: 0,
                            dataTextField: "display",
                            dataValueField: "id",
                            dataSource: usergroupConf.permissions
                        });
                    }
                }

当我点击过滤器框时,它显示过滤器正常,但当我从中选择一些值时,我收到错误:

Uncaught TypeError: undefined is not a function 

简而言之,

如何过滤掉剑道网格中的下拉列?

1 个答案:

答案 0 :(得分:2)

因此,经过大规模的研究,洗液正在随之而来。在kendo网格中使用外键。

  1. 创建附加字段,该字段是所选值的键 下拉
  2. 对于该列,crate编辑器将绑定到下拉列表 会改变这个新领域

            {
                field: 'permission_id',
                title : 'Permission',
                // values : usergroupConf.permissions,
                template : "#= permission.display #",
                editor : function (container, options) {
                    // bind it to permission, but update permission_id as well (because of enabled filtering)
                    $('<input data-text-field="display" data-value-field="id" data-bind="value:permission"/>')
                        .appendTo(container)
                        .kendoDropDownList({
                            index: 0,
                            dataTextField: "display",
                            dataValueField: "id",
                            dataSource: usergroupConf.permissions,
                            select : function(e) {
                                options.model.permission_id = this.dataItem(e.item.index()).id;
                            }
                        });
                },
                filterable : {
                    extra : false,
                    ui : function(element) {
                        element.kendoDropDownList({
                            dataSource: usergroupConf.permissions,
                            dataTextField: "display",
                            dataValueField: "id",
                            optionLabel: "--Select Value--"
                        });
                    }
                }
            },
    
  3. 这是数据源

        dataSource: new kendo.data.DataSource({
            // pageSize: 10,
            serverPaging: false,
            schema: {
                model: {
                    id : 'id',
                    fields: {
                        'id' : {},
                        'name' : {
                            editable : false,
                            nullable : false
                        },
                        'permission' : {
                            editable : true
                        },
                        'permission_id' : { // we'll have permission_id to enable filter (kendo doesn't support filtering through objects (what permission column is) by default)
                            editable : true,
                            type : 'number'
                        }
                    }
                }
            },
    
  4. 所以最后,在填充数据时,您必须添加权限作为对象:

    {
      "id":1
      "display":"Move"
    }
    

    permission_id:1