Kendo UI: Paging and accessing the filtered results in javaScript

Moving on slightly from my last post on the Kendo UI Grid we’re going to take a wee look at paging and accessing the results of the filter in javaScript.

pageable : true

By default paging is turned off. This means that when the grid is rendered you get all the data displayed in one go. If the amount of data is small then this
may be fine. However, if the amount of data runs into the hundreds of rows (or more) then you’ll probably want to turn paging on in order to make the display of the data more manageable for the user and potentially to reduce the amount of data send to the browser (but that part is for another day – in this example I’ll be using the same data set as previously which is loaded all at once).

To enable paging add to the configuration pageable : true and also remember to add in to the dataSource part of the configuration the
pageSize that you want.

If you forget to put the pageSize in then the grid will display with all the elements, but the paging navigation bar will display a message such as “NaN – NaN of 150 items”

scrollable : false

By default the grid is scrollable. This is useful if you have something to scroll, such as the virtualised scrolling feature. But for the paging in this example, the scroll bar is simply displayed but not enabled.

To turn off the scrollbar, in the configuration set scrollable : false and the scroll bar will be removed.

Getting the filtered results in JavaScript

It is possible to get the results of the filter out of the grid. It isn’t actually a direct feature of the grid (or the dataSource) but it is possible in a round about sort of way.

Essentially, what needs to happen is that filter object in the grid is used to query the data all over again to produce a second result set that can be used directly in JavaScript.

In the example below, I’ve got the results of the filter being rendered into a unordered list block.

It works but 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 =;

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

  // Output the results
  $.each(filteredData, function(index, item){
    $('#FilterResults').append('<li>'+item.Site+' : '+item.Visitors+'</li>')

The results look like this:

The filter results in 12 of 150 rows returned.

National Galleries of Scotland (Edinburgh sites) : 1281465
Edinburgh Castle (Historic Scotland) : 1210248
Kelvingrove Art Gallery & Museum (Glasgow) : 1070521
Royal Botanic Garden Edinburgh : 707244
Gallery of Modern Art (Glasgow Museums) : 490872
People's Palace (Glasgow Museums) : 245770
Burrell Collection (Glasgow Museums) : 187756
Museum of Transport (Glasgow Museums) : 160571
St Mungo Museum of Religious Art (Glasgow Museums) : 143017
Provand's Lordship (Glasgow Museums) : 107044
Scotland Street School Museum (Glasgow Museums) : 49346
Glasgow Museums Resource Centre : 9059

Full grid configuration

Here is the full configuration of the grid for this example:

  var data = getData(); // From the bva-data.js file
    dataSource: {
      data: data,
      pageSize: 10,
      schema: {
        model: {
          fields: {
            Site: {type: "string" },
            Visitors: {type: "number" },
            FreeCharge: {type: "string" },
            Change: {type: "number" }
    filterable: true,
    columnMenu: false,
    sortable: true,
    pageable: true,
    scrollable: false,
    columns: [ 
      { field: "Site" }, 
      { field: "Visitors" }, 
      { field: "FreeCharge" },
      { field: "Change", template: "#= kendo.toString(Change, \"p\") #" }
    dataBound: function(e) {

The getData() method can be found here:

Example: paging demo.


  • 24/7/2012: Added a link to a demo


  1. Dave Sussman says:

    You can use the view() method in script to get the current data view, including filters. Eg:

    var filteredData = datasource.view();

    Not sure when this was implemented in the grid, so it’s possible it wasn’t there when you wrote this, but I was searching for something else and came upon this post. Note that I haven’t actually tried this either.

    1. lombausch says:

      view() returns only currently displayed data. If there is a pagination, than it takes only one page. I haven’t tested the original method though.

  2. writerusdrivelus says:

    just needed the same thing… so I reviewed both

    view() returns the current view or page structure you’d follow very different logic to resolve and eventually end up re-writing all of it when you need to add pages see the DOM and avoid unless you’re sure it won’t change

    so good post – not been able to find anything else – should really be injected into the core

  3. James Boman says:

    Good post – but this only works for hard-coded local datasources. It doesn’t work in the real world when you are trying to get the filtered results of an ODATA data source.

    I guess I _could_ write a function to go and get the thousands of records, and put them in memory …. but then whats the point of having a grid control that does paging?

    Hmmm – still looking for a solution…..

    1. No need to be sarcastic. The real world contains many variations, not all of which need OData. Sometimes you don’t need OData and a simpler solution will suffice. Sometimes you only have a couple of hundred rows and so a simple solution such as this is just fine.

      1. James Boman says:

        Colin – Sorry about that, it was uncalled for. Just getting a bit frustrated.

        To make up for it, I did figure out how to do it for remote datasources – you need to re-query the datasource object for each page using dataSource.query

        Working example here:


Leave a Reply to Colin Angus Mackay Cancel reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s