View Full Version : Issue with GridPanel grouping Column

17 Jun 2013, 4:49 AM
With previous versions, we were using col.groupRenderer for grouping with some additional text but now groupRenderer has been removed and i am not getting proper way to call my group renderer function.
We were creating columns dynamically from code behind and assigning groupRenderer a javascript function like

col.GroupRenderer.Fn = "RenderYearLevel";

var RenderYearLevel = function(val){if(parseInt(val)>=90){ return "UL to Age "+val;}else{ return val+" Year Level Term";}}

I tried using groupHeaderTpl but nothing worked out for me. Please help me!!!

17 Jun 2013, 11:20 PM
Annyone please reply.... i have tried everything but not getting any solutions.

18 Jun 2013, 5:43 PM
You're headed the right direction with groupHeaderTpl. Something like the following might be it - or least getting you closer (I inserted your function into one of the examples in the API doc detailing groupHeaderTpl - the one that shows how to execute member functions):

groupHeaderTpl: Ext.create('Ext.XTemplate',
'Group: ',
'<div>{name:this.formatName}</div>', {
formatName: function (val) {
if (parseInt(val) >= 90) {
return "UL to Age " + val;
} else {
return val + " Year Level Term";

20 Jun 2013, 11:02 PM
Thank for the reply Slemmon.
But my requirement is to assign GroupHeaderTpl value through code behind but its not working i did this using below code snippet.

col = new Column();
col.ID = "YearLevel";
col.Text = "Years";
col.DataIndex = "YearLevel";
col.Sortable = true;
col.Groupable = true;
//col.GroupRenderer.Fn = "RenderYearLevel";
Grouping grp = new Grouping();
XTemplate tpl=new XTemplate{ID="temp1"};
tpl.Html = "<div>{name:this.formatName}</div>', {formatName: function (val) {if (parseInt(val) >= 90) {return 'UL to Age ' + val;} else {return val + ' Year Level Term';}}";
col.Renderer.Fn = "RenderYearLevelForUL";
col.Width = 50;