Our blazing fast Grid component built with pure JavaScript


Post by bensullivan »

Hi

I have a column I want to edit with a dropdown. The dropdown populates ok but after focus moves out of the edited cell (Person column), I get a strange value displayed:
Screen Shot 2019-10-01 at 18.08.25.png
Screen Shot 2019-10-01 at 18.08.25.png (62.28 KiB) Viewed 1181 times
Here is my code:
import {Grid, WidgetHelper, Store, DataGenerator} from './build/grid.module.js';

const personStore = new Store({
    data : [
        { 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 }, 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: 'capacity', width: 60}
    ],
    data : [
        {person: 'Select', role: 'Select', team: 'Select', capacity: 0}
    ]
});
Any ideas what I'm doing wrong? Ultimately, I'd like to populate the dropdown stores with API calls but I'm just starting with an inline store initially.

Thanks!

Ben

Post by sergey.maltsev »

Hi, bensullivan!

A can offer you two code samples:

Simple way
const persons = [
    'Bilbo Baggins',
    'Samwise Gamjee',
    'Peregrin Took'
];

const grid = new Grid({
    appendTo : 'container',

    minHeight : '20em',

    features : {
        cellEdit : true,
        stripe   : true
    },

    showDirty : true,
    columns   : [
        { field  : 'person',
            text   : 'Person',
            editor : { type : 'dropdown', items : persons },
            width  : 300,
            locked : true },
        { field : 'role', text : 'Role', width : 150, locked : true },
        { field : 'team', text : 'Team', width : 150, locked : true }
    ],
    data : [
        { person : 'Select', role : 'Select', team : 'Select', capacity : 0 }
    ]
});
More complex way for your data Store:
const personStore = new Store({
    idField : 'value',
    data    : [
        { value : 'PERS-1', text : 'Bilbo Baggins' },
        { value : 'PERS-2', text : 'Samwise Gamjee' },
        { value : 'PERS-3', text : 'Peregrin Took' }
    ]
});

const grid = new Grid({
    appendTo : 'container',

    minHeight : '20em',

    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 }
    ],
    data : [
        { person : 'Select', role : 'Select', team : 'Select', capacity : 0 }
    ]
});

Post by bensullivan »

Great thanks!

Post Reply