PDA

View Full Version : grid groupingSummary: how to set row style by row values ?



yyogev
22 Dec 2011, 5:24 AM
Hello,

I am using groupingSummary and would like summary rows to have a red background color if certain criteria are met in the group data.

In the past I used the multilevel grouping grid user extension with summary under ExtJS 3, and I modified renderSummary() in GroupSummary.js to allow defining a function to get background color.

Now with ExtJS 4 I tried to look at the groupingSummary code but could not see how to modify it to my needs.

Please help.

Note: I have found a nice solution - see in my last post to this thread (http://www.sencha.com/forum/showthread.php?164051-grid-groupingSummary-how-to-set-row-style-by-row-values&p=702879&viewfull=1#post702879).

Thanks,

tvanzoelen
22 Dec 2011, 8:10 AM
You can use the groupingsummary feature http://docs.sencha.com/ext-js/4-0/#!/api/Ext.grid.feature.GroupingSummary

and set groupHeaderTpl property.

In templates it is possible to set conditions see http://docs.sencha.com/ext-js/4-0/#!/example/platform/templates.html

yyogev
22 Dec 2011, 8:15 AM
Hi @tvanzoelen (http://www.sencha.com/forum/member.php?32684-tvanzoelen), Thanks for replying.

Yes, I'm using groupingSummary, as said above.
I'm looking for a way to set the summary row style.

I thought at first that getRowClass might do it, but it's not invoked for summary rows.

tvanzoelen
22 Dec 2011, 8:41 AM
Yes I see, excuse. I can not see getRowClass either. I think it is done somewhere in the Ext.grid.feature.AbstractSummary class. It works with templates I think.



printSummaryRow: function(index){
var inner = this.view.getTableChunker().metaRowTpl.join(''),
prefix = Ext.baseCSSPrefix;

inner = inner.replace(prefix + 'grid-row', prefix + 'grid-row-summary');
inner = inner.replace('{{id}}', '{gridSummaryValue}');
inner = inner.replace(this.nestedIdRe, '{id$1}');
inner = inner.replace('{[this.embedRowCls()]}', '{rowCls}');
inner = inner.replace('{[this.embedRowAttr()]}', '{rowAttr}');
inner = Ext.create('Ext.XTemplate', inner, {
firstOrLastCls: Ext.view.TableChunker.firstOrLastCls
});

return inner.applyTemplate({
columns: this.getPrintData(index)
});
},


Maybe extend this method in a new class and set the new mixin in Ext.grid.feature.GroupingSummary class

tvanzoelen
22 Dec 2011, 9:00 AM
Forget my previous post. You can also set a property summaryRenderer in the column config of your grid.

the method getColumnValue in Ext.grid.feature.AbstractSummary uses it



getColumnValue: function(column, summaryData){
var comp = Ext.getCmp(column.id),
value = summaryData[column.id],
renderer = comp.summaryRenderer;

if (renderer) {
value = renderer.call(
comp.scope || this,
value,
summaryData,
column.dataIndex
);
}
return value;
},


I think the answer to your question is, just set a summaryRenderer in the column config

yyogev
22 Dec 2011, 9:12 AM
Forget my previous post. You can also set a property summaryRenderer in the column config of your grid.

the method getColumnValue in Ext.grid.feature.AbstractSummary uses it



getColumnValue: function(column, summaryData){
var comp = Ext.getCmp(column.id),
value = summaryData[column.id],
renderer = comp.summaryRenderer;

if (renderer) {
value = renderer.call(
comp.scope || this,
value,
summaryData,
column.dataIndex
);
}
return value;
},


I think the answer to your question is, just set a summaryRenderer in the column config

Thanks, but this does not do what I want. It only affects the text of the summarized columns.

tvanzoelen
22 Dec 2011, 9:35 AM
If it is implemented correctly you have acces to the metadata in the renderer. The second argument


metaData : Object

A collection of metadata about the current cell; can be used or modified by the renderer. Recognized properties are: tdCls, tdAttr, and style.

The fourth argument is the row index. Mayby you can retrieve the row and set the cls on the row if you want to style the row. You could also set a breakpoint in your rendere to have a look what metaDatacomes in.

yyogev
22 Dec 2011, 9:41 AM
Thanks, this might be it.

However, I really wish there was an easier way to do this...

Also note that it will make the same calls multiple times for each row if the grid has several summarized columns.

tvanzoelen
22 Dec 2011, 9:47 AM
I think it's a pretty clean implmentation. It will only call the summaryrenderer if you defined it on the column. If you defined it for one column it will call it once for each group.

PS the first argument is the column, the second the value, the third argument are all summed values of the row and the fourth argument is the rowindex.

yyogev
23 Dec 2011, 2:27 AM
Thanks. I didn't get to it yet, but I promise to report here how it went after I do it.

yyogev
27 Dec 2011, 9:38 PM
The fourth argument is the row index. Mayby you can retrieve the row and set the cls on the row if you want to style the row. You could also set a breakpoint in your rendere to have a look what metaDatacomes in.

Looking in Firebug, I see that my SummaryRenderer function is called from getColumnValue(), with the following parameters:
- value: the summarized value
- summaryData: the id of summary grid columns
- dataIndex: the dataIndex for the current column

So the row index is not given.

Here's the call stack at this point (deepest level first, using ExtJS 4.0.7):
- summary_row_renderer, home_page.js (line 3044)
- getColumnValue, ext-all-debug.js (line 81642)
- getPrintData, ext-all-debug.js (line 82268)
- printSummaryRow, ext-all-debug.js (line 81627)



I think printSummaryRow() would be the proper place to do this, by extending GroupingSummary.

Then I will have to look up in the DOM for x-grid-row-summary, and apply a CSS class of my own there.

yyogev
29 Dec 2011, 8:24 AM
I was finally able to solve it, using this method:
I created a sub-class of GroupingSummary where I override printSummaryRow:


Ext.define('Ext.ux.myClass', {
extend: 'Ext.grid.feature.GroupingSummary',
constructor: function(config)
{
Ext.ux.milestone_group_summary.superclass.constructor.call(this, config);
},


<omitted some private data members>


printSummaryRow: function (index)
{
val = Ext.ux.myClass.superclass.printSummaryRow.call(this, index);
if (!this.check_for_errors || !this.show_summary_error(index))
return val;
var prefix = Ext.baseCSSPrefix;
val = val.replace(prefix + 'grid-row-summary', prefix + 'grid-row-summary-error');
return val;
},
show_summary_error: function(index)
{
var me = this, groups = me.summaryGroups;
var group = groups[index-1];
var col = null;
var group_summaries = me.summaryData[group.name];
var key;
for (key in group_summaries)
{
if (Ext.getCmp(key).dataIndex == "<dataIndex to search>")
{
col = key;
break;
}
}
var col_value = group_summaries[col];
return (col_value == 0 ? false : > get_threshold(group.name));
}





I added a CSS class:


.x-grid-row-summary-error { background-color: #FF8888 !important; /* light red */
}