Filter Grid Column with Custom Editor

2 posts, 0 answers
  1. Sunny
    Sunny avatar
    1 posts
    Member since:
    Apr 2017

    Posted 25 Feb 2018 Link to this post

    In demo:

    we can see column with datatype CategoryViewModel.

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




  2. Georgi
    Georgi avatar
    677 posts

    Posted 27 Feb 2018 Link to this post

    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) {
                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.

    Progress Telerik
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Back to Top