Angular JS-ng grid grid issue
First, consider a 400px wide grid that has four columns. All columns are 100 pixels wide. The tab between columns works as expected.
.gridStyle {
border: 1px solid rgb(212,212,212);
width: 400px;
height: 300px
}
Now a similar grid with the same 400px width, again with four columns. But this time, each column is 300px wide. Now tabbing between columns doesn't work. It is tabulation only within the columns that are visible on the screen.
$scope.columns = [
{
"field": 'Classification',
displayName: 'Classification',
width: '300 px',
cellTemplate: link
},
{
"field": 'name',
displayName: 'Name',
width: '300 px'
},
{
"field": 'age',
displayName: 'Age',
width: '300 px'
},
{
"field": 'Classification',
displayName: 'Classification',
width: '300 px',
cellTemplate: link
}
];
See the two Plunks for a comparison of behavior.
I don't know why this is happening. I am displaying almost 20 columns in an ng grid and would like to implement functionality for tabs between columns. But it cannot. Can anyone help me with this issue?
source to share
I had exactly the same problem and it was pushing me against the wall. I came here hoping to find an answer, but no luck.
So after a lot of research it seems to me that this is just a bug in the ng grid. There seems to be no way to resolve this ... other than updating to a renamed newer version of ng-grid, ui-grid.
It looks pretty straightforward, and all common upgrade errors are documented here .
I forked and updated the second Plunk from your question ( Plunk ) and while it doesn't quite look perfect, it is a good proof of concept.
In a nutshell, change the module dependency from ngGrid
to ui.grid
plus any additional functionality you need:
var app = angular.module('myApp',
['ui.grid', 'ui.grid.cellNav', 'ui.grid.edit', 'ui.grid.selection']);
... and add the same dependencies as the directives in the same element as ui-grid="gridOptions"
:
<div class="gridStyle"
ui-grid="gridOptions"
ui-grid-cellNav
ui-grid-edit
ui-grid-selection>
</div>
In Plunk, you can see that tabs outside the viewport only work in the ui-grid (c ui-grid-cellNav
), no hacking required.
source to share