server-side paging and 'select all'

2 posts, 0 answers
  1. Chris
    Chris avatar
    5 posts
    Member since:
    Aug 2010

    Posted 09 Sep 2016 Link to this post

    I'm not sure I'm totally getting The Kendo Way of the doing things yet. My instinct is to get the data I need from the grid, do what I need with it, then manually update the grid. It seems to me, the grid want to be the single point of truth for data and functions.

    I am using server-side paging with an API. The API can cope with pageSize and page parameters, which are defined in the grid. That means I am only ever seeing, say, 20 records at a time. To do this, the read function has an options param that "magically" contains pageSize and page.

    vm.masterGrid.dataSource = new{
        pageable: {
            pageSizes: true,
            buttonCount: 5
        pageSize: 20,
        serverPaging: true,
        serverSorting: true,
        serverFiltering: true,
            read: function(options) {
                    return vm.getOrders(options);

    I want to be able to check one or several or all, or even all-minus-one orders, and send them "down the pipe".
    Each row has a checkbox, and then there is a 'Select All' button.

    Since the grid only sees a small window of data, I don't think I can keep track of all order states in the front end. (If I'm on page one, the grid knows nothing about any orders except the first 20).

    So, my solution is to have a separate end-point: api/orders/selectall. It has no params (except pageSize and page) and simply tells the back end to flag all orders as 'in-progress'. Upon return, it needs to deliver tohse 20 records and tell the grid to refresh.

    So my question(s), after all that is/are:
    How does my select all button interact with the grid?


    I need to 

    1. get that options item (below, I'm faking it)
    2. make the call via my api, and stuff the new data back into the grid

    Do I call read()? How? I'm outside the grid.

    1. vm.selectAll = function () {
          var  options = {
              data: {
                  pageSize: 20,
                  page: 1
  2. Boyan Dimitrov
    Boyan Dimitrov avatar
    2062 posts

    Posted 13 Sep 2016 Link to this post

    Hello Dave,

    In general the Kendo UI DataSource is the component responsible for the data management. In order to request new data (show data for a specific page) you can use the query method of the Kendo UI DataSource. This method executes the specified query over the data items. Makes a HTTP request if bound to a remote service.


    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