I have a web application without any framework, just plain javascript and using Grid.
I need to update grid store dataset completely, but seems like calling
grid.store.data = newData
Please see attachments:
grid.store.data = newData
groupSummary: true,
summary: true
grid.store.removeAll();
import { Grid, DataGenerator, WidgetHelper } from '../../build/grid.module.js?438972';
import shared from '../_shared/shared.module.js?438972';
let columnsA = [
{
text: 'Group A',
filterable: false,
children: [
{
text: 'weight',
field: 'group_a_weight',
width: 80,
type: 'number',
hidden: false,
renderer: ({ value }) => {
return roundTo(value * 100, 3);
},
summaries: [{
sum: 'sum',
renderer: ({ sum }) => {
return roundTo(sum * 100, 3)
}
}]
},
{
text: 'param',
field: 'group_a_param',
width: 150,
hidden: true
}
]
}
];
let columnsB = [
{
text: 'Group B',
filterable: false,
children: [
{
text: 'weight',
field: 'group_b_weight',
width: 80,
type: 'number',
hidden: false,
renderer: ({ value }) => {
return roundTo(value * 100, 3);
},
summaries: [{
sum: 'sum',
renderer: ({ sum }) => {
return roundTo(sum * 100, 3)
}
}]
},
{
text: 'param',
field: 'group_b_param',
width: 150,
hidden: true
}
]
}
];
let grid = new Grid({
adopt : 'container',
minHeight : '20em',
features : {
cellEdit: true,
filter: true,
columnPicker: true,
regionResize: true,
groupSummary: true,
summary: true
},
columns : [
{ text: 'Id', field: 'id', width: 300 },
],
store: {
syncDataOnLoad: true,
data: []
}
});
var counter = 0;
WidgetHelper.append([
{
type : 'button',
ref : 'addButton',
text : 'Add column',
color : 'b-orange b-raised',
icon : 'b-fa b-fa-plus',
tooltip : 'Add new column',
onAction : async () => {
if (counter <= 1) {
var data = await generateData(counter ? 'group_b' : 'group_a', counter ? 15 : 10);
console.log(data);
var columns = counter ? columnsB : columnsA;
grid.store.data = data;
columns.forEach(d => grid.columns.add(d));
counter++;
}
}
}], { insertFirst : document.getElementById('tools') || document.body });
function generateData(group, n) {
return new Promise((resolve, reject) => {
// simulate async call
setTimeout(() => {
var data = [];
for (let i = 0; i < n; i++) {
var obj = {id: String(i)};
obj[group + '_weight'] = Math.random()
obj[group + '_param'] = 'Some String Param'
data.push(obj)
}
resolve(data);
}, 100)
})
}
function roundTo(value, decimals) {
if (value == undefined || value == null) return 0;
if (value == 0) return 0;
return Number(Math.round(value + 'e' + decimals) + 'e-' + decimals);
}
grid.columns.add(counter === 1 ? columnsB : columnsA);
grid.store.removeAll();
grid.store.add(data);
let columnsA = [
{
text : 'Group A',
filterable : false,
children : [
{
text : 'weight',
field : 'group_a_weight',
width : 80,
type : 'number',
hidden : false,
renderer : ({ value }) => {
return roundTo(value * 100, 3);
},
summaries : [{
sum : 'sum',
renderer : ({ sum }) => {
return roundTo(sum * 100, 3);
}
}]
},
{
text : 'param',
field : 'group_a_param',
width : 150,
hidden : true
}
]
}
];
let columnsB = [
{
text : 'Group B',
filterable : false,
children : [
{
text : 'weight',
field : 'group_b_weight',
width : 80,
type : 'number',
hidden : false,
renderer : ({ value }) => {
return roundTo(value * 100, 3);
},
summaries : [{
sum : 'sum',
renderer : ({ sum }) => {
return roundTo(sum * 100, 3);
}
}]
},
{
text : 'param',
field : 'group_b_param',
width : 150,
hidden : true
}
]
}
];
let grid = new Grid({
adopt : 'container',
minHeight : '20em',
features : {
cellEdit : true,
filter : true,
columnPicker : true,
regionResize : true,
groupSummary : true,
summary : true
},
columns : {
autoAddField : true,
data : [{ text : 'Id', field : 'id', width : 300 }]
},
store : {
syncDataOnLoad : true,
data : []
}
});
var counter = 0;
WidgetHelper.append([
{
type : 'button',
ref : 'addButton',
text : 'Add column',
color : 'b-orange b-raised',
icon : 'b-fa b-fa-plus',
tooltip : 'Add new column',
onAction : async() => {
if (counter <= 1) {
const
data = await generateData(counter ? ['group_a', 'group_b'] : ['group_a'], counter ? 15 : 10);
console.log(data);
grid.columns.add(counter === 1 ? columnsB : columnsA);
grid.store.removeAll();
grid.store.add(data);
counter++;
}
}
}], { insertFirst : document.getElementById('tools') || document.body });
function generateData(groups, n) {
return new Promise((resolve, reject) => {
// simulate async call
setTimeout(() => {
const
data = [];
for (let i = 0; i < n; i++) {
const
obj = { id : String(i) };
groups.forEach(group => {
obj[group + '_weight'] = Math.random();
obj[group + '_param'] = 'Some String Param';
});
data.push(obj);
}
resolve(data);
}, 100);
});
}
function roundTo(value, decimals) {
if (value == null || value === 0) {
return 0;
}
return Number(Math.round(value + 'e' + decimals) + 'e-' + decimals);
}