Kendo Grid with filter dropdown

[James]

Hi There,

I have created the Grid using dropdown list as a filter. I added the dropdown while creating the Columns.

for example:

columns: [
{
title: "Name",
encoded: false,
width: 160,
ui: jQuery.proxy(colFilter, { field: "Name", dataS: dataSource })  // dataSource is having all the values related to Name Column.

},
{
field: "City",
encoded: false,
width: 130,
filterable: {
ui: jQuery.proxy(colFilter, { field: "City", dataS: dataSource })  // dataSource is having all the values related to City Column.
}
}]


function colFilter(element) {
    try {        
        element.kendoDropDownList({
            dataSource: this.dataS,
            optionLabel: "--Select Value--"
        })
    } catch (exception) {
        alert(exception.Message);
    }
}

Suppose that I filter the Name column with any value. I want to show the related entries of the current view in City column filter dropdown. Instead of showing all the values.

How can this will be achieve?

Regards.

[Alexander Valchev]

Hello James,

You can use the filter method of the DataSource to filter those records that match the related criteria.
You should have in mind however that filtering the DataSource will have an immediate effect on all widgets that are bound to it. This is why I recommend you to create a new DataSource for the filter dropDown.

For example:

function colFilter(element) {
    try {
        dataSource = new kendo.data.DataSource({ data: this.dataS.data().toJSON() });

        element.kendoDropDownList({
            dataSource: dataSource,
            optionLabel: "--Select Value--"
        });
        //filter the dataSource: dataSource.filter();
    } catch (exception) {
        alert(exception.Message);
    }
}

For more information please see filter method of the DataSource:

• http://docs.kendoui.com/api/framework/datasource#methods-filter
  
  

Regards,
Alexander Valchev
Telerik

[James]

Thank you Alexander, for your quick reply.
Indeed it's a good solution. however, I am facing a another problem related to this.

Suppose that first time I try to filter Name column than colFilter function executes and the values show according to the data source. Now I come to second column City and try to filter. It's call the colFilter function and shows me filtered records according to the dataSource.filter().

Now My problem is when I come back again to first column for filter, this time it's doesn't call the colFilter function and directly shows the dropdown values.

My expectation is to show the first column dropdown with newly filter values.

Regards.

[Alexander Valchev]

Hello James,

The 'ui' function is executed only once when the filterMenu is build. In order to refresh the DropDown items you should reset its dataSource every time when the menu is opened.

The filterMenu opens as a kendoPopup widget. You can hook up to its open event, find the dropdownlist element (it have data-role="dropdownlist") and set new dataSource for it. Please check the following code sample:

$("#grid").data("kendoGrid").bind("filterMenuInit", function(e) {
    var popup = e.container.data("kendoPopup");
    popup.bind("open", function(e) {
        //find the dropdownlist in this.element container
        //use the setDataSource to change its DataSource
        //or filter method to filter the current dataSource
    }
});

I hope this will help.

Regards,
Alexander Valchev
Telerik

[Adam]

Hi James,
   Did you ever get a final product working and if so, share your development?  Thanks.