[CLOSED] GroupHeaderTplString question

  1. #1

    [CLOSED] GroupHeaderTplString question

    I know this is fixed in ExtJS 5.1.1 and going to Ext.NET 3.2.0, but I have not upgraded yet.

    You made the following suggestion in
    Thread 52321 [CLOSED] Grouping grids how to get rendered group value in the group header text
            var getGroupText = function (values, parent) {
                var grid = parent.view.panel,
                    col = grid.headerCt.child(Ext.String.format("gridcolumn[dataIndex={0}]", values.groupField)),
                    value = values.groupValue;
    
                if (col.renderer) {
                    value = col.renderer.apply(col, [value]); // You might need to pass other parameters that is used inside a Column's Renderer
                }
    
                return Ext.String.format("{0}: {1}", values.columnName, value);
            };
    I need to pass metadata and record parameters into my renderer, how do I retrieve the values to pass?
    Last edited by fabricio.murta; Jun 16, 2016 at 4:41 AM.
  2. #2
    Hello Chris!

    I'm not really sure what you refer to when you say 'metadata' and 'record parameters'... or should I read it 'metadata and record parameters'?

    Do you think you can reuse the example Daniil provided in the thread you pointed with an example of each, just to ensure we speak about the same thing? Maybe a comment like "I want to pass this" to the content you need there. I believe this way it will become clearer for us to give you a better response!
    Fabrício Murta
    Developer & Support Expert
  3. #3
    What I would like to do is colorize the GroupHeaderTpl based on the render logic of the column selected. So in this simple example the column for Age is rendered based on the ageType ['O' --> red,'N' --> green]. If the column is grouped I would like the TPL also to be displayed in those colors.

    Ungrouped, Age Column rendered with color
    Click image for larger version. 

Name:	GridGroupTpl02.PNG 
Views:	27 
Size:	4.5 KB 
ID:	24642

    Grouped by Age Column, would like the Header string to be in color
    Click image for larger version. 

Name:	GridGroupTpl01.PNG 
Views:	22 
Size:	4.6 KB 
ID:	24643

    <%@ Page Language="C#" %>
    
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
    <!DOCTYPE html>
    
    <html>
    <script runat="server">
        protected void Page_Load(object sender, EventArgs e)
        {
            if (!X.IsAjaxRequest)
            {
                Store store = this.GridPanel1.GetStore();
                store.DataSource = new object[] 
                { 
                    new object[] { "Old", "O", 20, "Bob" },
                    new object[] { "Old", "O", 15, "Mike" },
                    new object[] { "New", "N", 1, "Susie" },
                    new object[] { "New", "N", 1, "Chris" },
                    new object[] { "New", "N", 2, "Becky" }
                };
            }
        }
    </script>
    <head runat="server">
        <title>GridPanel GroupHeaderTpl</title>
    </head>
    <body>
        <ext:ResourceManager runat="server" />
        <ext:GridPanel ID="GridPanel1" runat="server">
            <HtmlBin>
                <script type="text/javascript">
                    var ageRenderer = function (value, meta, record) {
                        switch (record.data.ageType) {
                            case 'O':
                                meta.style = "color: red;";
                                break;
                            case 'N':
                                meta.style = "color: green;";
                                break;
                            default:
                                meta.style = "color: black;";
                                break;
                        }
                        return value;
                    }
    
                </script>
    
            </HtmlBin>
            <Store>
                <ext:Store runat="server">
                    <Model>
                        <ext:Model runat="server">
                            <Fields>
                                <ext:ModelField Name="ageName" />
                                <ext:ModelField Name="ageType" />
                                <ext:ModelField Name="years" Type="Int" />
                                <ext:ModelField Name="owner" />
                            </Fields>
                        </ext:Model>
                    </Model>
                </ext:Store>
            </Store>
            <ColumnModel runat="server">
                <Columns>
                    <ext:Column runat="server" Text="Age" DataIndex="ageName">
                        <Renderer Fn="ageRenderer" />
                    </ext:Column>
                    <ext:Column runat="server" Text="Years" DataIndex="years" Align="Center" Groupable="false" />
                    <ext:Column runat="server" Text="Owner" DataIndex="owner" Groupable="false" />
                </Columns>
            </ColumnModel>
            <SelectionModel>
                <ext:RowSelectionModel ID="gp1Selection" runat="server" ClientIDMode="Static" Mode="Multi" AllowDeselect="true" />
            </SelectionModel>
            <Features>
                <ext:Grouping ID="gp1Grouping" runat="server" ClientIDMode="Static" EnableGroupingMenu="true" HideGroupedHeader="true" GroupHeaderTplString="{columnName}: {name} ({rows.length})" />
            </Features>
        </ext:GridPanel>
    
    </body>
    </html>
  4. #4
    Hello Chris!

    I think we handled something really really close to your request. Could come up with a long and short solution. Here is the post for the short solution. Go one page before and you can see a long one (which is not really as good as the short one).

    Background Color in CustomSummaryType - post #11

    I hope this is just what you want, but will do a better look and return here if I find by myself otherwise, given your sample code.
    Fabrício Murta
    Developer & Support Expert
  5. #5
    Hello again, Chris!

    It was actually another example/thread that best matched your needs!

    First off, this is a feature Ext.NET (nor ExtJS) does not have, so you have to do it your own.

    Here is one approach that you can take to attain this. It does not felt like too slow for the page, so I guess it is alright. Of course, there are plenty of room for optimization here!

    The actual thread would be this: Backgroud row group in gridpanel. It is also reasonably recent and inspired the reply for the first thread I linked above, but that's non-related detail.

    As for your sample, to color the groups according to the contents of the group, the events that redraw the group title have to be catched and then have the corresponding color reflected to the HTML element. The capture pattern had to change between 2.x and the 3.x example on the thread linked above. This far, it looks sane but again, I didn't dig too deep as to override the render functions of the group plugin:

    <%@ Page Language="C#" %>
    
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
    <!DOCTYPE html>
    
    <html>
    <script runat="server">
        protected void Page_Load(object sender, EventArgs e)
        {
            if (!X.IsAjaxRequest)
            {
                Store store = this.GridPanel1.GetStore();
                store.DataSource = new object[] 
                { 
                    new object[] { "Old", "O", 20, "Bob" },
                    new object[] { "Old", "O", 15, "Mike" },
                    new object[] { "New", "N", 1, "Susie" },
                    new object[] { "New", "N", 1, "Chris" },
                    new object[] { "New", "N", 2, "Becky" }
                };
            }
        }
    </script>
    <head runat="server">
        <title>GridPanel GroupHeaderTpl</title>
    </head>
    <body>
        <ext:ResourceManager runat="server" />
        <ext:GridPanel ID="GridPanel1" runat="server">
            <HtmlBin>
                <script type="text/javascript">
                    var ageRenderer = function (value, metadata, record, rowIndex, colIndex, store, view) {
                        switch (record.data.ageType) {
                            case 'O':
                                metadata.style = "color: red;";
                                break;
                            case 'N':
                                metadata.style = "color: green;";
                                break;
                            default:
                                metadata.style = "color: black;";
                                break;
                        }
                        return value;
                    };
    
                    var handleGroupChange = function (store, groupers) {
                        store.needsRepaint = true;
                    };
    
                    var handleCollapseExpand = function (item, node, group) {
                        item.store.needsRepaint = true;
                        paintGroupHeaders(item.store);
                    };
    
                    var paintGroupHeaders = function (store) {
                        var i, j, thisGroup, thisGroupName, thisAge, found,
                            greenColor = "#cfc", redColor = "#fcc", // light variations of the colors
                            groupColors = [], headerList, records;
    
                        console.log('check for repaint...');
    
                        // if the store is not grouped, no painting will be necessary. Return already.
                        if (!store.isGrouped()) {
                            store.needsRepaint = false;
                        }
    
                        if (!store.needsRepaint) {
                            return;
                        }
    
                        console.log('performing repaint...');
    
                        records = store.data.items
                        // 1. for each record in the grid
                        for (i = 0; i < records.length; i++) {
                            thisGroupName = records[i].data.ageName;
                            thisAge = records[i].data.ageType;
    
                            // 1.1. check if we already tracked the group
                            found = false; // initially, we didn't see the group in our cache
                            for (j = 0; j < groupColors.length; j++) {
                                if (groupColors[j].groupName == thisGroupName) {
                                    found = true;
                                    // 1.1.1. If we have it, then remember it on thisGroup.
                                    thisGroup = groupColors[j];
                                    break;
                                }
                            }
    
                            // 1.1.2. create the group info if we didn't find it, binding 'green' color by default and to thisGroup variable
                            if (!found) {
                                thisGroup = {
                                    groupName: thisGroupName,
                                    color: greenColor
                                };
                                groupColors.push(thisGroup);
                            }
    
                            // 1.2. apply the red color if age is 'Old'
                            // as the color is green by default it is sufficient to:
                            // 1.2.1. if thisAge is "O" and color is not already red, bind it red color
                            if (thisAge == "O" && thisGroup.color != redColor) {
                                thisGroup.color = redColor;
                            }
                        }
    
                        // 2. After loading the groups' info, then apply the css style to each groups' headers:
                        for (i = 0; i < groupColors.length; i++) {
                            thisGroup = groupColors[i];
    
                            headerList = document.querySelectorAll(".x-grid-group-row div[id=\"" + App.GridPanel1.view.id + "-hd-" + thisGroup.groupName + "\"]");
    
                            // by chance, if more than one group header row is found on the page, apply the style to them all!
                            // you may alternatively throw an error if headerList.length != 1
                            for (j = 0; j < headerList.length; j++) {
                                headerList[j].style.backgroundColor = thisGroup.color;
                            };
                        }
    
                        // It is done, no re-painting until store has it marked in.
                        store.needsRepaint = false;
                    };
                </script>
            </HtmlBin>
            <Store>
                <ext:Store runat="server" GroupField="ageName">
                    <Model>
                        <ext:Model runat="server">
                            <Fields>
                                <ext:ModelField Name="ageName" />
                                <ext:ModelField Name="ageType" />
                                <ext:ModelField Name="years" Type="Int" />
                                <ext:ModelField Name="owner" />
                            </Fields>
                        </ext:Model>
                    </Model>
                    <Listeners>
                        <GroupChange Fn="handleGroupChange" />
                    </Listeners>
                </ext:Store>
            </Store>
            <ColumnModel runat="server">
                <Columns>
                    <ext:Column runat="server" Text="Age" DataIndex="ageName">
                        <Renderer Fn="ageRenderer" />
                    </ext:Column>
                    <ext:Column runat="server" Text="Years" DataIndex="years" Align="Center" Groupable="false" />
                    <ext:Column runat="server" Text="Owner" DataIndex="owner" Groupable="false" />
                </Columns>
            </ColumnModel>
            <ViewConfig>
                <Listeners>
                    <Refresh Handler="paintGroupHeaders(item.store);" />
                    <GroupExpand Fn="handleCollapseExpand" />
                    <GroupCollapse Fn="handleCollapseExpand" />
                </Listeners>
            </ViewConfig>
            <Listeners>
                <AfterLayout Handler="item.store.needsRepaint=true;" />
            </Listeners>
            <SelectionModel>
                <ext:RowSelectionModel ID="gp1Selection" runat="server" ClientIDMode="Static" Mode="Multi" AllowDeselect="true" />
            </SelectionModel>
            <Features>
                <ext:Grouping ID="gp1Grouping" runat="server" ClientIDMode="Static" EnableGroupingMenu="true" HideGroupedHeader="true" GroupHeaderTplString="{columnName}: {name} ({rows.length})" />
            </Features>
        </ext:GridPanel>
    </body>
    </html>
    I hope this helps! The simplified samples you provide really helped!
    Fabrício Murta
    Developer & Support Expert
  6. #6
    Please close the thread.
    Thanks for the research. This looked to be a little to much. So I implemented the following.

    #1 Grab an ExtJS override to fix renderGroupValue in 2.4.1
                    /**
                    * @class Ext.override.grid.feature.Grouping
                    * @override Ext.grid.feature.Grouping
                    * Grouping bug fixes.
                    * @date 2013-04-24
                     */
                    Ext.define('Ext.override.grid.feature.Grouping', {
                        override: 'Ext.grid.feature.Grouping',
    
                        /**
                         * @inheritdoc
                         */
                        setupRowData: function (record, idx) {
                            var me = this,
                                data = me.refreshData,
                                groupInfo = me.groupInfo,
                                header = data.header,
                                view = me.view,
                                store = view.dataSource;
                            me.callParent(arguments);
    
                            groupInfo.name = groupInfo.renderedGroupValue = groupInfo.groupValue;
                            if (header && header.renderer && header.renderer.call)
                                groupInfo.name = groupInfo.renderedGroupValue = header.renderer.call(
                                    header.scope || view.ownerCt,
                                    groupInfo.groupValue,
                                    {}, // unused
                                    record,
                                    idx,
                                    header.getOwnerHeaderCt().getHeaderIndex(header),
                                    store,
                                    view);
                        }
                    });
    #2 Grab an ExtJS override to fix ungrouping in 2.4.1
                    // Thread 53481 - February 11, 2015: Uncheck "Show In Group" Issue.
                    // When unchecking the "Show In Groups" option for a GridPanel the column
                    // was not automatically being re-displayed as a column back in the GridPanel.
                    Ext.grid.feature.Grouping.override({
                        onGroupToggleMenuItemClick: function (menuItem, checked) {
                            this.callParent(arguments);
    
                            if (this.hideGroupedHeader) {
                                if (!checked) {
                                    this.prunedHeader.show();
                                    delete this.prunedHeader;
                                } else {
                                    this.pruneGroupedHeader();
                                }
                            }
                        }
                    });
    #3 Change my renderer for the ageName column to interpret the color from the value rather then the record.data.ageType

    Here is the final code
    <%@ Page Language="C#" %>
    
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
    <!DOCTYPE html>
    
    <html>
    <script runat="server">
        protected void Page_Load(object sender, EventArgs e)
        {
            if (!X.IsAjaxRequest)
            {
                Store store = this.GridPanel1.GetStore();
                store.DataSource = new object[] 
                { 
                    new object[] { "Old", "O", 20, "Bob" },
                    new object[] { "Old", "O", 15, "Mike" },
                    new object[] { "New", "N", 1, "Susie" },
                    new object[] { "New", "N", 1, "Chris" },
                    new object[] { "New", "N", 2, "Becky" }
                };
            }
        }
    </script>
    <head runat="server">
        <title>GridPanel GroupHeaderTpl</title>
    </head>
    <body>
        <ext:ResourceManager runat="server" />
        <ext:GridPanel ID="GridPanel1" runat="server">
            <HtmlBin>
                <script type="text/javascript">
                    /**
                    * @class Ext.override.grid.feature.Grouping
                    * @override Ext.grid.feature.Grouping
                    * Grouping bug fixes.
                    * @date 2013-04-24
                     */
                    Ext.define('Ext.override.grid.feature.Grouping', {
                        override: 'Ext.grid.feature.Grouping',
    
                        /**
                         * @inheritdoc
                         */
                        setupRowData: function (record, idx) {
                            var me = this,
                                data = me.refreshData,
                                groupInfo = me.groupInfo,
                                header = data.header,
                                view = me.view,
                                store = view.dataSource;
                            me.callParent(arguments);
    
                            groupInfo.name = groupInfo.renderedGroupValue = groupInfo.groupValue;
                            if (header && header.renderer && header.renderer.call)
                                groupInfo.name = groupInfo.renderedGroupValue = header.renderer.call(
                                    header.scope || view.ownerCt,
                                    groupInfo.groupValue,
                                    {}, // unused
                                    record,
                                    idx,
                                    header.getOwnerHeaderCt().getHeaderIndex(header),
                                    store,
                                    view);
                        }
                    });
    
                    // Thread 53481 - February 11, 2015: Uncheck "Show In Group" Issue.
                    // When unchecking the "Show In Groups" option for a GridPanel the column
                    // was not automatically being re-displayed as a column back in the GridPanel.
                    Ext.grid.feature.Grouping.override({
                        onGroupToggleMenuItemClick: function (menuItem, checked) {
                            this.callParent(arguments);
    
                            if (this.hideGroupedHeader) {
                                if (!checked) {
                                    this.prunedHeader.show();
                                    delete this.prunedHeader;
                                } else {
                                    this.pruneGroupedHeader();
                                }
                            }
                        }
                    });
                    var ageRenderer = function (value, meta, record) {
                        var colorStyle;
                        switch (value) {
                            case 'Old':
                                colorStyle = "color: red;";
                                break;
                            case 'New':
                                colorStyle = "color: green;";
                                break;
                            default:
                                colorStyle = "color: black;";
                                break;
                        }
                        return Ext.String.format('<span style="{0}">{1}</span>', colorStyle, value);
                    }
    
                </script>
    
            </HtmlBin>
            <Store>
                <ext:Store runat="server">
                    <Model>
                        <ext:Model runat="server">
                            <Fields>
                                <ext:ModelField Name="ageName" />
                                <ext:ModelField Name="ageType" />
                                <ext:ModelField Name="years" Type="Int" />
                                <ext:ModelField Name="owner" />
                            </Fields>
                        </ext:Model>
                    </Model>
                </ext:Store>
            </Store>
            <ColumnModel runat="server">
                <Columns>
                    <ext:Column runat="server" Text="Age" DataIndex="ageName">
                        <Renderer Fn="ageRenderer" />
                    </ext:Column>
                    <ext:Column runat="server" Text="Years" DataIndex="years" Align="Center" Groupable="false" />
                    <ext:Column runat="server" Text="Owner" DataIndex="owner" Groupable="false" />
                </Columns>
            </ColumnModel>
            <SelectionModel>
                <ext:RowSelectionModel ID="gp1Selection" runat="server" ClientIDMode="Static" Mode="Multi" AllowDeselect="true" />
            </SelectionModel>
            <Features>
                <ext:Grouping ID="gp1Grouping" runat="server" ClientIDMode="Static" EnableGroupingMenu="true" HideGroupedHeader="true" GroupHeaderTplString="{columnName}: {renderedGroupValue} ({rows.length})" />
            </Features>
        </ext:GridPanel>
    
    </body>
    </html>
  7. #7
    Hello Chris!

    Well, sorry the solution we provided didn't really meet your needs but we're glad you could find a more suitable solution. Thanks for sharing the outcome!
    Fabrício Murta
    Developer & Support Expert

Similar Threads

  1. GroupHeaderTplString + rendering function
    By bossun in forum 2.x Help
    Replies: 0
    Last Post: Sep 25, 2013, 5:50 AM
  2. [CLOSED] GroupingSummary not displayed GroupHeaderTplString
    By tobros in forum 2.x Legacy Premium Help
    Replies: 2
    Last Post: Sep 24, 2013, 2:40 AM
  3. [CLOSED] GroupHeaderTplString show only value
    By PriceRightHTML5team in forum 2.x Legacy Premium Help
    Replies: 2
    Last Post: Jul 19, 2013, 11:45 AM
  4. [CLOSED] GroupHeaderTplString custom
    By JCarlosF in forum 2.x Legacy Premium Help
    Replies: 4
    Last Post: May 08, 2013, 2:31 PM
  5. [CLOSED] GroupHeaderTplString null values
    By JCarlosF in forum 2.x Legacy Premium Help
    Replies: 2
    Last Post: Apr 23, 2013, 3:04 PM

Posting Permissions