This is a migrated thread and some comments may be shown as answers.

Kendo Grid with filter dropdown

4 Answers 408 Views
Grid
This is a migrated thread and some comments may be shown as answers.
James
Top achievements
Rank 1
James asked on 09 Jan 2014, 10:19 AM
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.

4 Answers, 1 is accepted

Sort by
0
Alexander Valchev
Telerik team
answered on 09 Jan 2014, 12:35 PM
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:

Regards,
Alexander Valchev
Telerik
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
James
Top achievements
Rank 1
answered on 10 Jan 2014, 05:50 AM
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.
0
Alexander Valchev
Telerik team
answered on 13 Jan 2014, 11:24 AM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Adam
Top achievements
Rank 1
answered on 23 Apr 2014, 07:51 PM
Hi James,
   Did you ever get a final product working and if so, share your development?  Thanks.
Tags
Grid
Asked by
James
Top achievements
Rank 1
Answers by
Alexander Valchev
Telerik team
James
Top achievements
Rank 1
Adam
Top achievements
Rank 1
Share this question
or