I have an issue where I'm trying to update the cell of a column that has been dynamically added. When the cell loses focus, the new value is not displayed, although when I go back in the cell appears to have the value that was set before.
Here is my code:
import {Grid, WidgetHelper, Store} from './build/grid.module.js';
const personStore = new Store({
idField: 'value',
data : [
{ text : 'Select...' },
{ value: 'PERS-1', text : 'Bilbo Baggins' },
{ value: 'PERS-2', text : 'Samwise Gamjee' },
{ value: 'PERS-3', text : 'Peregrin Took' }
]
});
const grid = new Grid({
appendTo: 'target',
features : {
cellEdit: true,
stripe: true
},
showDirty: true,
columns: [
{
field: 'person',
text: 'Person',
editor : { type : 'dropdown', store : personStore },
renderer({ record }) {
const person = personStore.getById(record.person);
return person ? person.text : record.person;
},
width: 300,
locked: true
},
{ field: 'role', text: 'Role', width: 150, locked: true },
{ field: 'team', text: 'Team', width: 150, locked: true },
{ text: '2019<br>Nov', type: 'percent', field: 'capacity1', width: 60}
],
data : [
{person: 'Select...', role: 'Select...', team: 'Select...', capacity1: 0}
]
});
WidgetHelper.append([
{
type : 'button',
ref : 'removeButton',
text : 'Remove Last Month',
color : 'b-orange b-raised',
icon : 'b-fa b-fa-minus',
tooltip : 'Remove Last Month',
onAction : () => grid.columns.count > 1 && grid.columns.last.remove()
},
{
type : 'button',
ref : 'addButton',
text : 'Add Month',
color : 'b-green b-raised',
icon : 'b-fa b-fa-plus',
tooltip : 'Add new month',
onAction : () => {
grid.columns.add({ text: 'Dec', type: 'percent', field: 'capacity2', width: 60});
}
}
], { insertFirst : document.getElementById('gridButtons') || document.body });
Thanks!
Ben