When restoring grid state, if a hidden column becomes visible, it is no longer possible to navigate to that column using arrow keys.
Can be replicated by updating the Grid State demo (https://www.bryntum.com/examples/grid/state/). The code has been amended to do the following (see below):
Give each column an explicit Id
Update the column config to make the city field hidden
Apply the state after the grid has been created
From the grid:
Toggle the city column to be visible
Click the store state button
You now have state that overrides the default hidden state of the City column. Re-run the code and you can no longer navigate to the city column using the keyboard.
import { Grid, Toast, DataGenerator } from '../../build/grid.module.js?447702';
import shared from '../_shared/shared.module.js?447702';
const grid = new Grid({
appendTo : 'container',
minHeight : '20em',
features : {
filter : true,
group : false,
regionResize : true
},
columns : [
{ id: 'id-name', text : 'First name', field : 'firstName' },
{ id: 'id-sname', text : 'Surname', field : 'surName' },
{ id: 'id-age', text : 'Age', field : 'age' },
// Hide city by default
{ id: 'id-city', text : 'City', field : 'city', hidden: true }
],
data : DataGenerator.generateData(50),
tbar : [
{
type : 'button',
ref : 'getButton',
color : 'b-blue',
text : 'Store state',
icon : 'b-fa b-fa-box',
tooltip : 'Stores the grids current state in localStorage',
onAction : () => {
const state = grid.state;
localStorage.setItem('b-grid-state', JSON.stringify(state));
grid.widgetMap.setButton.enable();
grid.widgetMap.clearButton.enable();
Toast.show('State stored in localStorage');
}
}
]
});
const state = JSON.parse(localStorage.getItem('b-grid-state'));
if (state) {
grid.state = state;
}