Hi
We have a feature where we need to change between two different datasets (and columnsets) in the same grid. However when I load the new columns and data, only overlapping fields are rendered? Is this a bug or is this not possible and should this be created as completly seperated grids?
I have recreated the problem in the basic grid example see below:
https://bryntum.com/examples/grid/basic/
import { Grid, DataGenerator, Store } from '../../build/grid.module.js?458960';
import shared from '../_shared/shared.module.js?458960';
const store = new Store({ data: DataGenerator.generateData(50) });
const grid = new Grid({
appendTo : 'container',
features : {
group : false
},
// Headers will ripple on tap in Material theme
ripple : {
delegate : '.b-grid-header'
},
columns : [
{
text : 'Name',
field : 'name',
flex : 2,
editor : {
type : 'textfield',
required : true
}
}, {
text : 'Age',
field : 'age',
width : 100,
type : 'number'
}, {
text : 'City',
field : 'city',
flex : 1
}, {
text : 'Food',
field : 'food',
flex : 1
}, {
text : 'Color (not sortable)',
field : 'color',
flex : 1,
sortable : false,
renderer({ cellElement, value }) {
// renderer that sets text color = text
cellElement.style.color = value;
return value;
}
}
],
store: store
});
// DATASET 2
const data = [
{
name: 'hello',
code: 'world'
}
];
// COLUMNSET 2
const cols = [
{
text: 'Name',
field: 'name'
}, {
text: 'Code',
field: 'code'
}
];
// Changing mode loads the new dataset and column set
const changeMode = () => {
//grid.columns.removeAll();
grid.columns.data = cols;
//store.removeAll(true);
store.data = data;
//grid.rowManager.refresh();
//grid.columns.refreshData();
console.log(grid.columns, store.data);
};
// Load new dataset and columnset after 2 sec
setTimeout(changeMode, 2000);
As seen in the code we have tried different private refresh metodes, but nothing seems to help.
We have the same problem in scheduler-pro.
Best
Christian @Exigo