Filter Grid Column with Custom Editor

[Sunny]

In demo:

https://demos.telerik.com/aspnet-mvc/grid/editing-custom

we can see column with datatype CategoryViewModel.

Can we make a filter like demo in link below with that?

https://demos.telerik.com/aspnet-mvc/grid/filter-menu-customization

 

Thanks

 

[Georgi]

Hello Sunny,

Generally speaking the DataSource supports flat data which is why some of the functionality such as sorting, filtering, etc. does not work with nested objects.

As a workaround I can suggest to bind the column to one of the fields of the object (CategoryName). However, since the column is bound to a property of the object it will be necessary to update the object field of the data item manually within the change event of the drop down:

function onChange() {
       $("#grid").data("kendoGrid").dataItem(this.element.closest("tr")).set("Category", this.dataItem().toJSON());
   }

Finally, in order to create the drop down filter widget follow the steps from the demo:

1. Specify which function builds the custom filter widget:

.Filterable(x=> x.UI("customFilter"))

2. Add the function that creates the filter widget:

function customFilter(element) {
        element.kendoDropDownList({
            dataSource: {
                data: data
            },
            optionLabel: "--Select Value--"
        });
    }

For your convenience attached you will find a sample which demonstrates how to use a drop down editor and a drop down filter widget. Please examine it and let me know if it helps you.

I look forward to your reply.


Regards,
Georgi
Progress Telerik