Search code examples
javascripthandsontable

handsontable set custom tab order


I have a handsontable grid (HandsonTable) and would like to limit navigation to only the first two columns (A,B). So when the user starts on A1 and uses tab it will navigate to B1, A2, B2, A3, B3 etc. and when it reaches the end of the table go backup to A1.

Is there a way to do this?

$(document).ready(function () {

  var container = document.getElementById('basic_example');

  var data = function () {
   return Handsontable.helper.createSpreadsheetData(100, 12);
  };

  var hot = new Handsontable(container, {
    data: data(),
    height: 400,
    colHeaders: true,
    rowHeaders: true,
    stretchH: 'all',
    columnSorting: true,
    contextMenu: true
  });

});

MY CODE


Solution

  • Used the link provided by mpuraria above and got it working. The navigation order has been restricted to the first two columns when using the tab key. jsfiddle.

    $(document).ready(function () {
    
      var container = document.getElementById('basic_example');
    
      var data = function () {
       return Handsontable.helper.createSpreadsheetData(10, 9);
      };
    
      var hot = new Handsontable(container, {
        data: data(),
        height: 400,
        colHeaders: true,
        rowHeaders: true,
        stretchH: 'all',
        columnSorting: true,
        contextMenu: true
      });
    
    
      Handsontable.Dom.addEvent(document.body, 'keydown', function(e) {
    
          if (e.keyCode === 9) {  
    
    
            e.stopPropagation();
            var selection = hot.getSelected();
            var rowIndex = selection[0];
            var colIndex = selection[1];          
    
            //rowIndex++;
            colIndex++;
    
    
              if (colIndex > 1) {
                  rowIndex++;
                  colIndex = 0;
    
              }
    
              hot.selectCell(rowIndex,colIndex);          
          }
        }); 
    });