Unable to display edited cell content of a dynamically added column

[bensullivan]

Ah ok thanks. Where can I access the nightly builds?

[sergey.maltsev]

Hi, bensullivan!

Nightly builds are available in customer zone for license owners.

[bensullivan]

Ah right ok - thanks!

[bensullivan]

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:

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 });

Is there another fix required for handling dynamically added column groups?

Thanks!

Ben

[sergey.maltsev]

Hi!

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' }

After upcoming Grid release with ability to add Model fields the code should be like this

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 });