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

So, after massive research, soulution is following. Use foreign keys in kendo grid.

1. Create additional field which is key of the value selected in dropdown

2. For that column, crate editor which would be bind to dropdown and it would change this new field

           {
               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. This is the datasource

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

so in the end, when populating data you will have to add permission as object:

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

and

permission_id:1