Saisie de la grille à l'aide de la touche de tabulation

Question

Comment entrer dans la grille à l'aide de la touche de tabulation?

Il est possible de définir le tabindex sur le div html en déclarant la tabulation mais il ne fera que focaliser le div entier. Je voudrais me concentrer sur la première cellule de la première rangée.

Personnellement, je suis venu avec le hack suivant, mais je suis à la recherche d'une meilleure solution. Toute bibliothèque externe est la bienvenue. Je n'ai qu'une seule colonne dans ma grille et des lignes simples, donc ce code devrait être amélioré pour enlever le focus potentiel sur toutes les cellules pour toutes les colonnes et/ou pour les lignes avec plus d'un niveau.

intérieur de ma directive

<div ag-grid="ctlr.gridOptions" class="ag-fresh" role="grid" tabindex="201" ng-focus="ctlr.onFocus()" id="myGrid"></div> 

contrôleur à l'intérieur

ctrl.onFocus = function() 
{ 
    var rows = $('#myGrid .ag-row.ag-row-even.ag-row-level-0'); 
    var firstRow = rows[0]; 

    var firstColumnCells = $('#myGrid .ag-row.ag-row-even.ag-row-level-0 .ag-cell.cell-col-0'); 
    var firstCell = firstColumnCells[0]; 

    //remove potential focus on rows 
    for (var i = 0; i < rows.length; i++) 
    { 
     rows[i].classList.remove('ag-row-focus'); 
     rows[i].classList.add('ag-row-no-focus'); 
    } 

    //remove potential focus on first column cells 
    for (var j = 0; j < rows.length; j++) 
    { 
     firstColumnCells[j].classList.remove('ag-cell-focus'); 
     firstColumnCells[j].classList.add('ag-cell-no-focus'); 
    } 

    //focus first row 
    firstRow.classList.remove('ag-row-no-focus'); 
    firstRow.classList.add('ag-row-focus'); 

    //focus first cell 
    firstCell.classList.remove('ag-cell-no-focus'); 
    firstCell.classList.add('ag-cell-focus'); 

    firstCell.focus(); 

}; 

d'émission existant sur github: https://github.com/ceolter/ag-grid/issues/183

Answer 1

En utilisant une directive se sent moins bidouillés pour moi - après avoir ajouté tabindex = "0" le div de la grille afin qu'il obtienne le focus du clavier J'utilise cette directive pour déplacer le focus de la div vers la cellule en haut à gauche:

function gridTab($window) { 
    return { 
     restrict : 'A', 
     link : function(scope, element) { 
      element.bind('focus', function() { 
       if (scope.grid.rowData.length > 0) { 
        scope.grid.api.setFocusedCell(0,0); 
       } 
      }); 
     } 
    }; 
}