Client Side Filtering and Sorting

2 posts, 0 answers
  1. Don
    Don avatar
    44 posts
    Member since:
    Apr 2009

    Posted 26 Jul 2016 Link to this post

    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')


  2. Boyan Dimitrov
    Boyan Dimitrov avatar
    1968 posts

    Posted 28 Jul 2016 Link to this post

    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.
Back to Top