Declined
Last Updated: 03 Mar 2020 14:45 by ADMIN
Alex
Created on: 08 Sep 2015 09:56
Category: Kendo UI for jQuery
Type: Feature Request
1
Grid with additional navigation methods 'nextRecord', 'previousRecord'
It would be nice to have navigation methods like 'nextRecord', 'previousRecord' to select grid records. These methods must  take care of paging issues and load next/previous page automatically and select the correct record afterwards. I've implemented these methods on my side nut it would be easier to have them natively as part of the grid implementation.
2 comments
Alex
Posted on: 08 Sep 2015 12:40
Sure - although it might be far from a 'best practice' solution:

// grid code, get selectedIndex in change event and select row in dataBound event
// after navigating to next/previous page

change : function(e){
         var dataRows = grid.items();
         // index you get is 0 based hence add 1
         selectedIndex = dataRows.index(grid.select()) + 1;
}

dataBound: function(e){
     if(selectAfterLoad){
          selectAfterLoad = false;
           grid.select('tr:eq(' + selectedIndex + ')'); 
       }   
}

 // navigate to the next grid row
        nextRow = function () {
            // get current number of rows ...
            var numRows = grid.dataSource.pageSize();
            var numPages = grid.dataSource.totalPages();
            var currentPage = grid.dataSource.page();
            
            // already last row of current page then load next page and select first record in 
            // dataBound event
            if (selectedIndex == numRows) {                
                var nextPage = currentPage + 1;
                // not the last page yet - load the next page and select the first record after load
                if (nextPage <= numPages) {
                    grid.dataSource.page(nextPage);
                    selectedIndex = 1;
                    selectAfterLoad = true;
                }
            }
            else {
                // set next row index (1 based !!)
                selectedIndex = Math.min(selectedIndex + 1, numRows);
                grid.select('tr:eq(' + selectedIndex + ')'); 
            }            
        };

// navigate to previous row
previousRow = function () {
            // get current number of rows
            var numRows = grid.dataSource.pageSize();
            var currentPage = grid.dataSource.page();
            
            // already first row of current page then load previous page and select last record
            // in dataBound event
            if (selectedIndex == 1) {                
                var nextPage = currentPage-1;
                // not the last page yet - load the next page and select the last record after load
                if (nextPage > 0) {
                    grid.dataSource.page(nextPage);
                    selectedIndex = numRows;
                    selectAfterLoad = true;
                }
            }
            else {
                // set next row index (1 based !!)
                selectedIndex = Math.max(selectedIndex-1, 1);
                grid.select('tr:eq(' + selectedIndex + ')'); 
            } 
        };
ADMIN
Telerik Admin
Posted on: 08 Sep 2015 11:59
Thanks for the suggestion, Alex.

Presently we don't have immediate plans for implementing such methods, yet since you stated that you came up with your own implementation, can you share it in this thread to make it publicly available?

Thanks in advance.