Our blazing fast Grid component built with pure JavaScript


Post by Edouard »

Hi,

I need a grid which contains 2 subsets of columns:

  • A subset of permanents columns : the columns are always the same
  • A subset of variables columns : The number of columns can vary

i.e:

NameCityCountryPeriod 1Period 2Period 3
JohnParisFrance10423

or

NameCityCountryPeriod 1Period 2Period 3Period 4Period 5
JohnParisFrance10423256

So I set up my bryntum grid with the ajaxStore, and my backend send something like this :

{
    "data": [
        {
            "name": "John",
            "city": "Paris",
            "country": "France",
            "periods": [
                {
                    "id": 22,
                    "position": 1,
                    "value": 10
                },
                {
                    "id": 23,
                    "position": 2,
                    "value": 4
                },
                {
                    "id": 24,
                    "position": 3,
                    "value": 23
                },
            ]
        }
    ]
}

Now I need a way to map each item of the periods array to a dedicated column.

I tried this but without success:

columns: [
    { field: 'name', text: 'Name' },
    { field: 'city', text: 'City' },
    { field: 'country', text: 'Country' },
    { field: 'periods[0].value', text: 'period 1' },
    { field: 'periods[1].value', text: 'period 2' },
    { field: 'periods[2].value', text: 'period 3' },
]

Is there a way to achieve this without changing the structure of the ajax response?
Thx


Post by saki »

You will need to extract data from the response in store listener. As to columns, you can hide or show them programmatically by setting hidden = true on the column. Mind please that grid.columns are a https://bryntum.com/docs/grid/#Grid/data/ColumnStore at runtime so you would get 4th column as

grid.columns.getAt(3).hidden = true;

The example of data layer could be the following. (You can replace app.js content of grid basic demo to see it in action):

import '../_shared/shared.js'; // not required, our example styling etc.
import Grid from '../../lib/Grid/view/Grid.js';
import '../../lib/Grid/column/NumberColumn.js';

new Grid({

    appendTo : 'container',

    features : {
        group : false
    },

    // Headers will ripple on tap in Material theme
    ripple : {
        delegate : '.b-grid-header'
    },

    columns : [
        {
            text   : 'Name',
            field  : 'name',
            flex   : 2,
            editor : {
                type     : 'textfield',
                required : true
            }
        }, {
            text  : 'City',
            field : 'city',
            flex  : 1
        }, {
            text  : 'Period 0',
            field : 'period0'
        }, {
            text  : 'Period 1',
            field : 'period1'
        }, {
            text  : 'Period 2',
            field : 'period2'
        }
    ],

    store : {
        fields : [{
            name : 'periods'
        }, {
            name : 'period0'
        }, {
            name : 'period1'
        }, {
            name : 'period2'
        }],

        listeners : {
            change({ record, records, source }) {
                records = records || [record];
                records.forEach(r => {
                    if (!r.updatingPeriods) {
                        r.updatingPeriods = true;
                        r.periods.forEach((period, index) => {
                            r[`period${index}`] = period.value;
                        });
                        r.updatingPeriods = false;
                    }
                });
            }
        },

        data : [
            {
                name    : 'Mary',
                city    : 'Barcelona',
                country : 'Spain',
                periods : [
                    {
                        id       : 22,
                        position : 1,
                        value    : 8
                    },
                    {
                        id       : 23,
                        position : 2,
                        value    : 4
                    },
                    {
                        id       : 24,
                        position : 3,
                        value    : 9
                    }
                ]
            },
            {
                name    : 'John',
                city    : 'Paris',
                country : 'France',
                periods : [
                    {
                        id       : 22,
                        position : 1,
                        value    : 10
                    },
                    {
                        id       : 23,
                        position : 2,
                        value    : 4
                    }
                ]
            }
        ]
    }

});

Post by pmiklashevich »

Opened a ticket to support calculated fields: https://github.com/bryntum/support/issues/3070

Pavlo Miklashevych
Sr. Frontend Developer


Post by Edouard »

Thanks saki.
(Sorry for the late reply)


Post Reply