how do you loop through all rows in kendoUI grid with filter

Question

here's my code. it works, if you want to loop through all the rows. now, QA told me I have to make it to support filter. so, when user use filter, only a subset of the rows will show on the grid. I need to only loop through only those rows.

    var entityGrid = $("#EntitesGrid").data("kendoGrid");       
    var data = entityGrid.dataSource.data();
    var totalNumber = data.length;

    for(var i = 0; i<totalNumber; i++) {
        var currentDataItem = data[i];
        VersionIdArray[i] = currentDataItem.VersionId;
    }

I tried.

    var data = entityGrid.dataSource.data().fetch();

and

    var data = entityGrid.dataSource.data().filter();

couldn't get it working.

score 26 · Accepted Answer · edited Oct 06 '16 at 15:51

For future reference and for those who are interested, I found the the solution at:

http://colinmackay.scot/2012/07/23/kendo-ui-paging-and-accessing-the-filtered-results-in-javascript/

It works by first getting hold of the grid's data source, getting the filter and the data, creating a new query with the data and applying the filter to it. While this does result in getting the results of the filter it does have the distinct disadvantage of processing the filter operation twice.

function displayFilterResults() {
    // Gets the data source from the grid.
    var dataSource = $("#MyGrid").data("kendoGrid").dataSource;

    // Gets the filter from the dataSource
    var filters = dataSource.filter();

    // Gets the full set of data from the data source
    var allData = dataSource.data();

    // Applies the filter to the data
    var query = new kendo.data.Query(allData);
    var filteredData = query.filter(filters).data;

    // Output the results
    $('#FilterCount').html(filteredData.length);
    $('#TotalCount').html(allData.length);
    $('#FilterResults').html('');
    $.each(filteredData, function(index, item){
        $('#FilterResults').append('<li>'+item.Site+' : '+item.Visitors+'</li>')
    });
}

Good job! I am learning how to use the Kendo grid now, and the documentation gives you just enough information to make you feel dumb. Thanks for this! — , Jan 28 '21 at 20:00

Rodolpho Brock · Answer 2 · 2019-07-11T13:30:28.080

6

Many thanks!!! With this help now I did this...

kendo.data.DataSource.prototype.dataFiltered = function () {
    // Gets the filter from the dataSource
    var filters = this.filter();

    // Gets the full set of data from the data source
    var allData = this.data();

    // Applies the filter to the data
    var query = new kendo.data.Query(allData);

    // Returns the filtered data
    return query.filter(filters).data;
}

So now I can get my filtered data very easy!!! Awesome!!!

Example:

var dataFiltered = $("#MyGrid").data("kendoGrid").dataSource.dataFiltered();

edited Jul 11 '19 at 13:30

answered Nov 19 '14 at 19:41

Rodolpho Brock

8,027
2
28
27

This was a great answer. Thanks! – Kevin Babcock Dec 30 '14 at 11:58
Hi @FoxDeploy, it was been so many years ago that I really don't know even if this code still works with current Kendo version... But the goal of it was to extend a method in [kendoGrid.dataSource] called "dataFiltered" so you could do something like this: var dataFiltered = $("#MyGrid").data("kendoGrid").dataSource.dataFiltered(); – Rodolpho Brock Jul 11 '19 at 13:28

how do you loop through all rows in kendoUI grid with filter

2 Answers2