CODEWITHSUNDEEP
javascripthandsontable
noobie
noobie

Reputation: 2607

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

Upvotes: 0

Views: 1024

Answers (2)

Dercilio
Dercilio

Reputation: 191

I solved this way:

afterDocumentKeyDown: function (event) {
    // getSelected() returns [[startRow, startCol, endRow, endCol], ...]
    const startRow = this.getSelected()[0][0];

    if (event.key === "Tab") {
        const nextRow = startRow === 6 ? 1 : startRow + 1; // if the last row (6), returns to the first one
        this.selectCell(nextRow, 0); // needs to be col 0 because Tab already changes to the right col
    }
}

In my case, I had a table 2 columns x 7 rows, and I have an intention to move only in column 1 from the row (zero-indexed) 1 to 6, returning to row 1.

References:

  1. https://handsontable.com/docs/7.4.2/Hooks.html#event:afterDocumentKeyDown

  2. https://forum.handsontable.com/t/keyboard-tab-key-doesnt-enter-into-handsontable/3490

Upvotes: 1

noobie
noobie

Reputation: 2607

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);          
      }
    }); 
});

Upvotes: 1

Related Questions