kendo-ui - kendo-grid : Can't filter column which is dropdownlist

Question

I have column defined with template : "object.type" and it is dropdownlist (there are multiple types to search).

It has editor:

                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
                            });
                    },

so element for this column is object with keys id and display, e.g.

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

now, I have defined filterable property for that column:

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

when I click on filter box it displays filter fine, but when I select some value from it I get error :

Uncaught TypeError: undefined is not a function 

So in short,

how to filter columns in kendo's grid which are dropdowns?

Answer 1

因此，经过大量研究，解决方案正在紧随其后。在剑道网格中使用外键。

1. 创建附加字段，该字段是下拉列表中选择的值的键

2. 对于该列，将绑定到下拉列表的板条箱编辑器，它将更改此新字段

           {
               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'
                       }
                   }
               }
           },
   

所以最后，在填充数据时，您必须将权限添加为对象：

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

和

permission_id:1