Support Forum
Hi
I think I've experienced this again in a slightly different context. I'm trying to dynamically add a column grouping and seeing the same behaviour where the edited child column value is not displayed after it has been edited. Here is some code that I have been running in a code editor window on the https://bryntum.com/examples/grid/basic page:
Is there another fix required for handling dynamically added column groups?
Thanks!
Ben
I think I've experienced this again in a slightly different context. I'm trying to dynamically add a column grouping and seeing the same behaviour where the edited child column value is not displayed after it has been edited. Here is some code that I have been running in a code editor window on the https://bryntum.com/examples/grid/basic page:
import { Grid, Store, DataGenerator, WidgetHelper } from '../../build/grid.module.js?435659';
import shared from '../_shared/shared.module.js?435659';
let column = 1;
const myFields = [
'id',
'person',
'role',
'team'
];
const grid = new Grid({
appendTo : 'container',
features : {
cellEdit : true,
stripe : true
},
showDirty : true,
columns : [
{ field : 'person', text : 'Person', width : 150, locked : true },
{ field : 'role', text : 'Role', width : 150, locked : true },
{ field : 'team', text : 'Team', width : 150 }
],
store : new Store({
fields : myFields,
data : []
})
});
grid.store.add({ id : grid.store.count + 1});
WidgetHelper.append([
{
type : 'button',
text : 'Add column',
color : 'b-green b-raised',
icon : 'b-fa b-fa-plus',
onAction : () => {
// Creating new field for myFields
const fieldName1 = `column${column++}`;
myFields.push({ name : fieldName1, type : 'percent' });
const fieldName2 = `column${column++}`;
myFields.push({ name : fieldName2, type : 'percent' });
const fieldName3 = `column${column++}`;
myFields.push({ name : fieldName3, type : 'percent' });
// Creating new Store for updated fields with existing store data copy
const store = new Store({
fields : myFields,
data : grid.store.records.map(r => r.data)
});
grid.store = store;
grid.refreshRows();
grid.columns.add(
{
text : 'Contact',
children : [
{ text : 'First name', field : 'fieldName1', width : 150, type : 'percent'
},
{ text : 'Surname', field : 'fieldName2', width : 150, type : 'percent'
},
{ text : 'City', field : 'fieldName3', width : 150, type : 'percent'
}
]
});
}
}
],
{ insertFirst : document.getElementById('tools') || document.body });
Thanks!
Ben
Hi!
There's a mistake in your column config code 'fieldName1' should be just fieldName1 (no quotes)
After upcoming Grid release with ability to add Model fields the code should be like this
There's a mistake in your column config code 'fieldName1' should be just fieldName1 (no quotes)
{ text : 'First name', field : fieldName1, width : 150, type : 'percent' },
{ text : 'Surname', field : fieldName2, width : 150, type : 'percent' },
{ text : 'City', field : fieldName3, width : 150, type : 'percent' }
let column = 1;
class MyModel extends GridRowModel {
static get fields() {
return [
'id',
'person',
'role',
'team'
];
}
}
const grid = new Grid({
appendTo : 'container',
features : {
cellEdit : true,
stripe : true
},
showDirty : true,
columns : [
{ field : 'person', text : 'Person', width : 150, locked : true },
{ field : 'role', text : 'Role', width : 150, locked : true },
{ field : 'team', text : 'Team', width : 150 }
],
store : new Store({
modelClass : MyModel,
data : [{ id : 1, person : 'name' }]
})
});
WidgetHelper.append([
{
type : 'button',
text : 'Add column',
color : 'b-green b-raised',
icon : 'b-fa b-fa-plus',
onAction : () => {
const newField = () => {
const fieldName = `column${column++}`;
MyModel.addField({ name : fieldName, type : 'percent' });
return fieldName;
};
grid.columns.add(
{
text : 'Contact',
children : [
{ text : 'First name', field : newField(), width : 150, type : 'percent' },
{ text : 'Surname', field : newField(), width : 150, type : 'percent' },
{ text : 'City', field : newField(), width : 150, type : 'percent' }
]
});
}
}
],
{ insertFirst : document.getElementById('tools') || document.body });