Client Side Filtering and Sorting

[Don]

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 = grid.dataSource.data()[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.                currentRow.show();
14.            } else {
15.                currentRow.hide();
16.            }
17.        });
18.}

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

1.    ...
2.    dataBound: gridOnDataBound,
3.    change: filterButtonClicked('Available')
4.}).data("kendoGrid");

 

[Boyan Dimitrov]

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. 

Regards,
Boyan Dimitrov
Telerik by Progress