Our blazing fast Grid component built with pure JavaScript


Post by Exigo »

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


Post by alex.l »

The problem is on data level, not on UI.
You need to have all fields defined in your store. Basically, in first data load store will try to auto expose all fields according to data loaded, but after that it will just use first generated fieldset.
So, try to specify required fields in your store. For your test case it will look like

const store = new Store({ 
     fields : ['code'], // the field that won't be exposed from generated data
     data: DataGenerator.generateData(50) 
 });

All the best,
Alex


Post by Exigo »

Hi Alex

Thanks for the quick response, works like a charm. Adding a Model to the store will do the same thing, correct?

Best
Christian @Exigo


Post by alex.l »

Yes, absolutely.

All the best,
Alex


Post by Exigo »

Perfect :)

Sorry for the late response!

Best
Christian @Exigo


Post Reply