PDA

View Full Version : Grid with GroupingSummary when two columns reference the same dataIndex



n3rd
22 May 2011, 11:03 PM
I'm using an Ext.grid.Panel with the GroupingSummary feature. In a stripped down version of my problem, I've a model with two numeric fields 'value' and 'previous' which (not surprisingly) contain the current and the previous value of a record.

In the grid I wish to display an additional column that contains the relative change:


{
header: 'Change %',
dataIndex: 'value',
summaryType: function (values) {
var result = [];

Ext.Array.forEach(values, function (record){
var diff = record.get('value') - record.get('previous');
result.push(100 * diff / record.get('value'));
});

return Ext.util.Format.number(Ext.Array.mean(result), '0.00') + '%';
},
renderer: function (value, style, record, row, col, store, grid) {
var diff = value - record.get('previous');
return Ext.util.Format.number(100 * diff / value, '0.00') + '%';
},
summaryRenderer: function(v, params, data) {
return ' '+ 100 * Ext.util.Format.number(v, '0.00');
}
}

And that, by itself, works just fine. The problem arises when I add a column to the grid that displays the value. In that case, the summary of the "Change %" column is displayed in the "value" column, overwriting whatever was there first. It seems that the grouping summary is internally indexed by the dataIndex, which means that having two different columns referencing the same field in the model does not work.

This is currently a major roadblock for us and I hope someone knows a way around this issue.

You can view a live example of the problem here (http://pub.n3rd.org/ggrid.html).

Thanks a lot in advance.

jsakalos
22 May 2011, 11:46 PM
v argument of summaryRenderer is string ('4.46%') so when you try to do an arithmetic with the string it yields 0. Either convert it to number or treat it as string.

n3rd
23 May 2011, 12:06 AM
While that was indeed an error, it had nothing to do with the problem I described. I get the same summary value for the "value" column (where it should be the sum) and the "change %" column (where it should be the average).

n3rd
24 May 2011, 5:13 AM
Bump. This issue is still open.

jsakalos
24 May 2011, 9:22 AM
I would classify it as a bug in grouping summary feature. Here is the showcase where everything looks fine, just the first summary renderer gets wrong argument v. It looks like that second summaryType overrides the first summaryType in some place. Moving this thread to Bugs:


<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf8">
<title>Grouping Grids</title>

<!-- ExtJS -->
<link rel="stylesheet" type="text/css" href="ext-4.0.1/resources/css/ext-all.css" />
<script type="text/javascript" src="ext-4.0.1/ext-all.js"></script>

<!-- Example -->
<script type="text/javascript">
Ext.define('MyModel', {
extend: 'Ext.data.Model',
fields: [
{ name: 'id', type: 'int' },
{ name: 'name', type: 'string' },
{ name: 'group', type: 'string' },
{ name: 'value', type: 'float' }
]
});

var data = [
{ id: 1, group: 'Group One', name: 'First Item', value: 42.13, previous: 39.99 },
{ id: 2, group: 'Group One', name: 'Second Item', value: 41.76, previous: 40.16 },
{ id: 3, group: 'Group Two', name: 'Third Item', value: 0.13, previous: 0.11 },
{ id: 4, group: 'Group Two', name: 'Fourth Item', value: 0.55, previous: 0.61 },
{ id: 5, group: 'Group Two', name: 'Fifth Item', value: 17.42, previous: 19.16 },
{ id: 6, group: 'Group Three', name: 'Sixth Item', value: 13.17, previous: 13.17 },
{ id: 7, group: 'Group Three', name: 'Seventh Item', value: 11.87, previous: 11.19 },
{ id: 8, group: 'Group Three', name: 'Eighth Item', value: 18.02, previous: 19.17 },
{ id: 9, group: 'Group Three', name: 'Ninth Item', value: 95.00, previous: 100.00 },
];

Ext.onReady(function(){
var xg = Ext.grid;

var store = new Ext.data.Store({
model: 'MyModel',
data: data,
groupField: 'group'
});

var grid = new Ext.grid.Panel({
width: 1024,
height: 600,
frame: true,
title: '',
renderTo: 'myGridDiv',
store: store,
features: [{
id: 'group',
ftype: 'groupingsummary',
groupHeaderTpl: '{name}',
hideGroupedHeader: false,
enableGroupingMenu: false,
startCollapsed: false
}],
columns: [{
header: 'Name',
width: 100,
align: 'left',
dataIndex: 'name'
}, {
header: 'Value',
width: 70,
align: 'right',
sortable: true,
summaryType: function(values) {
var result = [], retval;
Ext.Array.forEach(values, function(record) {
result.push(record.get('value'));
});
retval = Ext.Array.sum(result);
console.log('first reference', retval);
return retval;
},
summaryRenderer: function(v, params, data) {
return '? ' + v;
},
dataIndex: 'value'
}, {
header: 'Previous',
width: 70,
align: 'right',
sortable: true,
dataIndex: 'previous'
}, {
header: 'Change %',
width: 70,
align: 'right',
sortable: true,
dataIndex: 'value',
summaryType: function (values) {
var result = [], retval;

Ext.Array.forEach(values, function (record){
var diff = record.get('value') - record.get('previous');
result.push(100 * diff / record.get('value'));
});
retval = Ext.Array.mean(result);
console.log('second reference', retval);
return Ext.util.Format.number(retval, '0.00') + '%';
},
renderer: function (value, style, record, row, col, store, grid) {
var diff = value - record.get('previous');
return Ext.util.Format.number(100 * diff / value, '0.00') + '%';
},
summaryRenderer: function(v, params, data) {
return ' '+ v;
}
}]
});
});
</script>
</head>
<body>
<div id="myGridDiv"></div>
</body>
</html>

n3rd
24 May 2011, 10:21 AM
I had previously reported (http://www.sencha.com/forum/showthread.php?133858-Grid-with-GroupingSummary-when-two-columns-reference-the-same-dataIndex&p=603390#post603390) this very issue but not gotten any reply which is why I re-posted it in the Premium forum. I sincerely hope I'm having more luck this time.

allemattio
6 Nov 2017, 2:43 AM
Was this bug solved in any version?
I still have this in ExtJS 6.0.1, I have two columns under the same group accessing the same dataIndex. One column has a summaryType:min and the other has a summaryType: sum.
But both columns show the sum as a summary...