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

Client Side Filtering and Sorting

1 Answer 344 Views
This is a migrated thread and some comments may be shown as answers.
Top achievements
Rank 1
Don asked on 26 Jul 2016, 02:27 PM

We are doing filtering and sorting client side. We hook into the change event and filter out the results. All is well until the sort is done descending. The correct number of records are displayed but the records themselves are the wrong ones. It's like the indexing is wrong on the displayed records. Can someone point me at what to look at to figure his out. Thanks.


01.function filterButtonClicked(gridId) {
02.    var grid = $("#" + gridId.toLowerCase() + "Grid").data("kendoGrid");
03.    var filtertxt = $("#txt" + gridId + "Filter").val().trim().toLowerCase();
04.    $("#" + gridId.toLowerCase() + "Grid")
05.        .find("table > tbody > tr")
06.        .each(function (i) {
07.            var currentRow = $(this);
08.            var displayName =[i].DisplayName.toLowerCase();
09.            // See if filter should be applied
10.            console.log(filtertxt);
11.            console.log(displayName);
12.            if (displayName.indexOf(filtertxt) >= 0) {
13.      ;
14.            } else {
15.                currentRow.hide();
16.            }
17.        });

And this is the grid event hook but the event is getting called just fine.

1.    ...
2.    dataBound: gridOnDataBound,
3.    change: filterButtonClicked('Available')


1 Answer, 1 is accepted

Sort by
Boyan Dimitrov
Telerik team
answered on 28 Jul 2016, 09:14 AM

Hello Don,

Based on the provided code you are actually hiding the table row DOM elements (tr). The sorting actually renders the grid and the rows will be shown again. In order to apply the filtering we suggest using the filter method of the Kendo UI DataSource. When filtering is applied in the DataSource even if the Kendo UI Grid is refreshed only the filtered rows will be shown. 

A reference to the Kendo UI DataSource can be accessed using the dataSource property of the Kendo UI Grid. 

Boyan Dimitrov
Telerik by Progress
Get started with Kendo UI in days. Online training courses help you quickly implement components into your apps.
Asked by
Top achievements
Rank 1
Answers by
Boyan Dimitrov
Telerik team
Share this question