Premium support for our pure JavaScript UI components


Post by H9FFDC »

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

Post by mats »

Thanks for another crystal clear test case! We'll get it fixed, ticket: https://github.com/bryntum/support/issues/2385


Post Reply