With Kendo's web of user interfaces, how do you access filtered and sorted data?
I have a Kendo grid that is sorted and filtered. When I export, I want to export all the data that is currently being viewed, but not just the current page.
$("#grid").data("kendoGrid").dataSource
→ appears to be the original list of unsorted and unfiltered items. In Chrome Developer Tools, tags _data
, and _pristine
look the same.
There is also dataSource.view
, but only 10 items are visible on the current page.
Is there a way to access a sorted list and / or a filtered list?
update: I found this answer on the Kendo forums and see if it helps. http://www.kendoui.com/forums/framework/data-source/get-filtered-data-from-paged-grid.aspx
source to share
This is how you access the filtered data:
var dataSource = $("#grid").data("kendoGrid").dataSource;
var filteredDataSource = new kendo.data.DataSource({
data: dataSource.data(),
filter: dataSource.filter()
});
filteredDataSource.read();
var data = filteredDataSource.view();
And then you can loop through the data:
for (var i = 0; i < data.length; i++) {
result += "<tr>";
result += "<td>";
result += data[i].SiteId;
result += "</td>";
result += "<td>";
result += data[i].SiteName;
result += "</td>";
result += "</tr>";
}
source to share
Most of the answers to them apply to Kendo grid when they just look at local data in memory. If you are using remote data (i.e. your grid is bound to an ODATA source, for example), you will need to iterate over all the pages to get the filtered data.
However, this was not as straightforward as I thought.
I came up with the following:
var filteredRows = [];
function getResults() {
var dataSource = $("#grid").data("kendoGrid").dataSource;
var filters = dataSource.filter();
var allData = dataSource.data();
var query = new kendo.data.Query(allData);
var data = query.filter(filters).data;
var totalRowCount = parseInt(dataSource.total().toString());
var totalPages = Math.ceil(totalRowCount / dataSource.pageSize());
PageTraverser(dataSource, 1, totalPages, filters, function () {
$('#pResults').text('Got ' + filteredRows.length + ' rows of filtered data.');
});
}
function PageTraverser(dataSource, targetPage, totalPages, filters, completionFunction) {
dataSource.query({
page: targetPage,
pageSize: 20,
filter: filters
}).then(function () {
var view = dataSource.view();
for (var viewItemId = 0; viewItemId < view.length; viewItemId++) {
var viewItem = view[viewItemId];
filteredRows.push(viewItem);
}
targetPage++;
if (targetPage <= totalPages) {
PageTraverser(dataSource, targetPage, totalPages, filters, completionFunction);
} else {
completionFunction();
}
});
}
Working example here: http://dojo.telerik.com/@JBoman32768/Ucudi
source to share
This is how we currently do it, although there are several options:
var myData = new kendo.data.Query(dataSource.data()).filter(dataSource.filter()).data;
You simply call a new Query and apply the current filter that the grid applied, which will return the same results as the grid.
source to share