Our blazing fast Grid component built with pure JavaScript


Post by Stormseeker »

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


Post by tasnim »

Hi Tim,
Thanks for your detailed report. I've reproduced it. I've created a ticket to investigate it. Here it is https://github.com/bryntum/support/issues/5706

Good Luck :),
Tasnim


Post Reply