Row selection dynamically for next page and reverse back in kendo grid

Question

Anyone please tell me how can i select next consecutive row from first page to second page of my kendo grid and reverse back to the previous page ? Kendo Grid API just only gives me information on 'select' and from there I have no clue at all how to implement my desired selection. What I have now is only selecting the row of the selected/active cell. Any insight/references are also appreciated. So far I haven't came across with any examples or article.

var data = $("#grid").data('kendoGrid');
var arrows = [38,40];
data.table.on("keydown", function (e) {
  if (arrows.indexOf(e.keyCode) >= 0) {
    setTimeout(function () {
      data.clearSelection();
      data.select($("#grid_active_cell").closest("tr"));
    },1);
  }
});

http://dojo.telerik.com/eSUQO

Richard Richard · Accepted Answer · 2018-01-18T17:46:03

var data = $("#grid").data('kendoGrid');
var arrows = [38,40];

var navrow_uid; ** add this tracking variable;

data.table.on("keydown", function (e) {
  if (arrows.indexOf(e.keyCode) >= 0) {
    setTimeout(function () {
      data.clearSelection();

   // break this up
   // data.select($("#grid_active_cell").closest("tr"));

      // fetch next row uid and compare to tracker
      var nextrow = $("#grid_active_cell").closest("tr");
      var uid = nextrow.data('uid');
      if (navrow_uid == uid ) {
        console.log("last navigable row");
        data.dataSource.page(1+data.dataSource.page());
        // best option here would be to set auto-page flag for databound event handler
      } else {
        data.select(nextrow);
        navrow_uid = uid;
      }
    },1);
  }
});

You will want to add a grid data bound handler, and have that check the aut-page flag to see if you need to select first or last row of page.

Row selection dynamically for next page and reverse back in kendo grid

1 Answers