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