Our blazing fast Grid component built with pure JavaScript


Post by henrique »

In the sample bellow I forced the complex field name to show the summarization isn't working.

The value in the bottom in the grid don't show the values has expected.

import { Grid, DataGenerator, StringHelper } from '../../build/grid.module.js?466040';
import shared from '../_shared/shared.module.js?466040';

let myData = [];

DataGenerator.generateData(50).forEach(
    element => {
        myData.push(
            {
                myInfo: element
            }
        );
    }
)

console.log(myData);

new Grid({
    appendTo: 'container',

features: {
    filter: true,
    summary: true
},

tbar: [
    {
        text: 'Sum selected rows',
        toggleable: true,
        onToggle: 'up.onSelectToggle'
    }
],

columns: [
    {
        text: 'Name',
        field: 'myInfo.name',
        width: 200,
        locked: true,
        sum: 'count',
        summaryRenderer: ({ sum }) => `Total: ${sum}`
    },
    {
        text: 'City',
        field: 'myInfo.city',
        width: 200,
        locked: true,
        sum: (result, current, index) => {
            // There is
            if (index === 0) {
                result = {};
            }

            const city = current.city;
            if (!Object.prototype.hasOwnProperty.call(result, city)) {
                result[city] = 1;
            }
            else {
                ++result[city];
            }

            return result;
        },
        summaryRenderer: ({ sum }) => {
            let value = 0,
                mostPopularCity = '';

            Object.keys(sum).forEach(key => {
                if (value < sum[key]) {
                    value = sum[key];
                    mostPopularCity = key;
                }
            });

            return StringHelper.xss`Most entries: ${mostPopularCity}`;
        }
    },
    { text: 'Team', field: 'myInfo.team', width: 150 },
    {
        type: 'number',
        text: 'Score',
        field: 'myInfo.score',
        width: 200,
        sum: true,
        summaryRenderer: ({ sum }) => `Total amount: ${sum}`
    },
    {
        type: 'percent',
        text: 'Percent',
        field: 'myInfo.percent',
        editor: {
            type: 'number',
            min: 0,
            max: 100
        },
        width: 100,
        sum: 'average',
        summaryRenderer: ({ sum }) => `Average: ${Math.round(sum)}%`
    }
],

data: myData,

onSelectToggle() {
    this.features.summary.selectedOnly = !this.features.summary.selectedOnly;
}
});

Post by Animal »

The field is a field name, not a path.

The field definition may have dataSource property which may be a path into the record's data


Post by henrique »

Why the column work without the dataSource definition?


Post by Animal »

Column has been specially coded to cope with complex mapping. Probably a customer wanted to use that:

    getRawValue(record) {
        if (this.hasComplexMapping) {
            return ObjectHelper.getPath(record, this.field);
        }

        // Engine can change field value to null, in which case cell will render previous record value,
        // before project commit
        return record[this.field];
    }

Post by henrique »

With the "dataSource" config, it's works. But in my case, I have models inside models, if I must create a data source property inside every model my, this will be a nightmare!

So, I ask you kindly to change this behavior, to allow fields with compound names in summation as well.

The grouping is allowing this now, https://github.com/bryntum/support/issues/5493!


Post by johan.isaksson »

Please see my post here viewtopic.php?p=119434#p119434, and the comment on the ticket above ^

Best regards,
Johan Isaksson

Post Reply