Column Re-config loses checkbox selection column

[Stormseeker]

I've been working with the Vue Integration example code (Thanks for that!) and I think there might be a bug with the column watch in grid.js and using selectionMode: 'checkbox'.

    watch : {
        columns : function(newValue) {
            // New columns assigned, use as grid columns
            this.gridEngine.columns.data = newValue;
        }
    },

Whenever this runs after the grid is initialized, even if the column config data is the same, the checkbox gets lost on re-render and selection is broken afterwards.

I worked around it by comparing the difference between the newValue and existing columns and using ColumnStore.add and/or ColumnStore.get('x').remove() to add or remove the columns as needed. Maybe just the example needs to be tweaked?

[saki]

There is relatively new option for Store, syncDataOnLoad that you can try to use on columns (columns are converted to a store upon initialization).

To do that in our example configure columns initially as this:

// Columns to display in grid
columns : {
    syncDataOnLoad : true,
    data:[
        { field : 'team', text : 'Team', flex : 1 },
        { field : 'city', text : 'City', flex : 1 },
        { field : 'division', text : 'Division', flex : 1, hidden : true },
        { field : 'conference', text : 'Conference', flex : 1 }
    ]
},

You can leave watch and everything else as it is.

Let us please know if it helped. If not, post please a runnable showcase that we can easily start and debug.

[Stormseeker]

It looks like it is unrelated to Vue. I modified the basic grid example to show the issue.

import { Grid, DataGenerator } from '../../build/grid.module.js?439591';
import shared from '../_shared/shared.module.js?439591';

let testGrid = new Grid({
    adopt : 'container',
    minHeight : '20em',
    features : {
        group : false,
    },
    selectionMode: {'row': true,'checkbox': true},
    // Headers will ripple on tap in Material theme
    ripple : {
        delegate : '.b-grid-header'
    },
    columns : {
        syncDataOnLoad : true,
        data:[
            { field : 'team', text : 'Team', flex : 1 },
            { field : 'city', text : 'City', flex : 1 },
            { field : 'division', text : 'Division', flex : 1, hidden : true },
            { field : 'conference', text : 'Conference', flex : 1 }
        ]
    },

    data : DataGenerator.generateData(50)
});

setTimeout(function() {
    testGrid.columns.data = [
        { field : 'team', text : 'Team', flex : 1 },
        { field : 'city', text : 'City', flex : 1 },
        { field : 'division', text : 'Division', flex : 1, hidden : true },
        { field : 'conference', text : 'Conference', flex : 1 }
    ];
}, 2500);

After the setTimeout runs, if you click on any row, you get this error in console:

grid.module.js?439591:139 Uncaught TypeError: Cannot read property 'widget' of undefined
    at Grid.triggerChangeEvent (grid.module.js?439591:139)
    at Grid.onRecordCollectionChange (grid.module.js?439591:139)
    at Collection.trigger (grid.module.js?439591:9)
    at Collection.splice (grid.module.js?439591:9)
    at Grid.selectCell (grid.module.js?439591:139)
    at Grid.onCellNavigate (grid.module.js?439591:139)
    at Grid.focusCell (grid.module.js?439591:139)
    at Grid.onFocusGesture (grid.module.js?439591:139)
    at Grid.onElementMouseDown (grid.module.js?439591:139)
    at CellEdit.functionChainRunner (grid.module.js?439591:21)

[saki]

When the checkbox selection mode is initiated, the checkbox column is added to the column store. Then you overwrite the columns with the new data but the checkbox selection logic expects that the column is there, which it is not.

What you could do would be to get data of the first column, merge it with the other new data and it will work. Something like this:

setTimeout(function() {
    testGrid.columns.data = [
        testGrid.columns.getAt(0).data,
        { field : 'city', text : 'City', flex : 1 },
        { field : 'division', text : 'Division', flex : 1, hidden : true },
        { field : 'conference', text : 'Conference', flex : 1 },
        { field : 'team', text : 'Team', flex : 1 }
    ];
}, 2500);

[saki]

We will treat it as a bug, here is the ticket: https://github.com/bryntum/support/issues/365