/**
 *
 * Grid with navigation code included 
 * 
 * selectRowByIndex: 0 based row selection by index of currently shown rows
 *
 * @author Alex Bernhard <alex.bernhard@uzh.ch>
 * @version 1.2.0
 */


(function ($) {

    var kendo = window.kendo,
        ui = kendo.ui,
        Grid = ui.Grid,
        self = this;

    var NavigatableGrid = Grid.extend({
        init: function (element, options) {

            // assign that to this
            var self = this;
            this.selectedIndex = 0;
            this.updateAfterLoad = false;

            // call the base function to create the widget
            Grid.fn.init.call(this, element, options);

            if (typeof options['updateMethod'] == 'function') {
                this.updateMethod = options['updateMethod'];
            }

            self.bindEvents();

        },
        options: {
            name: "NavigatableGrid",
        },
        bindEvents: function () {
            this.bind("change", function () { this.setSelectedIndex(); });
            this.bind("dataBound", function () {
                this.selectRowByIndex(this.selectedIndex);
                // after selecting the next row, shall update be called here?
                // happens only when navigating to a new page
                // or after search results are present
                if (this.updateAfterLoad) {
                    this.updateAfterLoad = false;
                    let selectedItem = this.dataItem(this.select());
                    if(selectedItem != null && selectedItem.hasOwnProperty('id')){
                        this.updateMethod(selectedItem.id);
                    }
                }              

                return false;
            });
        },
        updateMethod: function () { },        
        setSelectedIndex: function () {
            let dataRows = this.items();
            this.selectedIndex = dataRows.index(this.select());
            return this.selectedIndex;
        },
        selectRowByIndex: function (index) {
            // zero based index
            this.clearSelection();
            this.select('tr:eq(' + index + ')');
        },
        selectRowById: function (id) {
            this.clearSelection();
            let view = this.dataSource.view();
            let _self = this;
            let rows = $.grep(view, function (item) {
                return item.id == id;
            }).map(function (item) {
                return _self.tbody.find("[data-uid=" + item.uid + "]");
            });

            if (Array.isArray(rows) && typeof rows[0] !== 'undefined') {
                this.select(rows[0]);
            }
        },
        previousRow: function () {

            // get current number of rows
            let pageSize = this.dataSource.pageSize();
            let currentPage = this.dataSource.page();

            // already first row of current page ?
            if (this.selectedIndex == 0) {
                let previousPage = currentPage - 1;
                // not the first page yet - load the previous page and read the data
                // after load
                if (previousPage > 0) {
                    this.selectedIndex = pageSize - 1; // last row of previous page
                    this.updateAfterLoad = true;
                    this.dataSource.page(previousPage);
                }
            } else {
                // set next row index (0 based !!)
                this.selectedIndex = Math.max(this.selectedIndex - 1, 0);
                this.selectRowByIndex(this.selectedIndex);
                this.updateAfterLoad = false;

                let selectedItem = this.dataItem(this.select());   
                if(selectedItem != null && selectedItem.hasOwnProperty('id')){
                    this.updateMethod(selectedItem.id);
                }
            }
        },
        nextRow: function () {

            // get current number of rows
            let numRows = this.items().length;
            let pageSize = this.dataSource.pageSize();
            let numPages = this.dataSource.totalPages();
            let currentPage = this.dataSource.page();

            // already last row of current page ?
            if (this.selectedIndex == numRows -1) {
                let nextPage = currentPage + 1;
                // not the last page yet - load the next page and read the data
                // after load
                if (nextPage <= numPages) {
                    this.dataSource.page(nextPage);
                    this.selectedIndex = 0;
                    this.updateAfterLoad = true;
                }
            } else {
                // set next row index (zero based !!)
                this.selectedIndex = Math.min(this.selectedIndex + 1, pageSize-1);
                this.selectRowByIndex(this.selectedIndex);
                
                let selectedItem = this.dataItem(this.select());   
                if(selectedItem != null && selectedItem.hasOwnProperty('id')){
                    this.updateMethod(selectedItem.id);
                }
            }
        }
    });
    kendo.ui.plugin(NavigatableGrid);
})(jQuery);

accessionGrid = $("#accession-grid").kendoNavigatableGrid({
.... standard code for kendo grid
// call method in form when navigating
 updateMethod: function(data){accessionForm.update(data)},
.....
});

// code for grid navigation
function nextAccessionGridRow(){
    accessionGrid.nextRow();
}

function previousAccessionGridRow(){
    accessionGrid.previousRow();
}

<div id="grid"></div>
<script>
$("#grid").kendoGrid({
  columns: [ {
    field: "name",
    title: "Name",
    attributes: {
      "data-id": "#:data.id#",
      "data-clientid": "#:data.clientId#",
    }
  } ],
  dataSource: [ { id:1, name: "Jane Doe", clientId:"#223" }, { id:2, name: "John Doe", clientId:"#354"  }]
});
</script>