I modified the basic demo in the examples page and added a syncDataOnLoad property with a 50% threshold. I updated the data to generate 100 rows and then scrolled the grid to the bottom. Then after 5 seconds I set the grid data to 1 record and it generates an error and the grid display becomes wacky.
import { Grid, DataGenerator } from '../../build/grid.module.js?463787';
import shared from '../_shared/shared.module.js?463787';
const dataArray = DataGenerator.generateData(100);
let grid = new Grid({
appendTo : 'container',
features : {
group : false
},
// Headers will ripple on tap in Material theme
ripple : {
delegate : '.b-grid-header'
},
store: {
syncDataOnLoad: {
threshold: '50%'
}
},
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;
}
}
],
data : dataArray
});
grid.scrollRowIntoView(99);
setTimeout(() => {
grid.data = DataGenerator.generateData(1);
}, 5000);
Any ideas?
Thanks,
Tim