[CLOSED] Grouping grids - how to get rendered group value in the group header text

  1. #1

    [CLOSED] Grouping grids - how to get rendered group value in the group header text

    Hi,

    In Ext.NET 1.x I was able to show the grouping text with the HTML as set by the column rendering function. Consider this 1.x example:

    <%@ Page Language="C#" %>
     
    <script runat="server">
        protected void Page_Load(object sender, EventArgs e)
        {
            if (!X.IsAjaxRequest)
            {
                Store1.DataSource = Data;
                Store1.DataBind();
            }
        }
     
        private object[] Data
        {
            get
            {
                return new object[]
                {
                    new object[] { "3m Co", 71.72},
                    new object[] { "Alcoa Inc", 29.01},
                    new object[] { "Altria Group Inc", 83.81},
                    new object[] { "American Express Company", 52.55},
                    new object[] { "American International Group, Inc.", 64.13}
                };
            }
        }
    
    </script>
     
    <!DOCTYPE html>
    <html>
    <head id="Head1" runat="server">
        <title>Ext.NET Example</title>
         
        <style type="text/css">
            .high { color: green; }
            .low { color: red; }
        </style>
             
        <script type="text/javascript">
            function formatPriceColumn(value) {
                var cls = value < 50 ? 'low' : 'high';
    
                return "<span class='" + cls + "'>" + value + "</span>";
            }
        </script>
    </head>
    <body>
        <ext:ResourceManager ID="ResourceManager1" runat="server" />
         
        <ext:GridPanel
            ID="GridPanel1"
            runat="server"
            StripeRows="true"
            Title="Array Grid"
            TrackMouseOver="true"
            Width="600"
            Height="350"
            AutoExpandColumn="company">
            <Store>
                <ext:Store ID="Store1" runat="server">
                    <Reader>
                        <ext:ArrayReader>
                            <Fields>
                                <ext:RecordField Name="company" />
                                <ext:RecordField Name="price" Type="Float" />
                            </Fields>
                        </ext:ArrayReader>
                    </Reader>
                </ext:Store>
            </Store>
            <ColumnModel ID="ColumnModel1" runat="server">
                <Columns>
                    <ext:Column ColumnID="Company" Header="Company" DataIndex="company" />
                    <ext:Column Header="Price" DataIndex="price">                 
                        <Renderer Fn="formatPriceColumn" />
                    </ext:Column>
                </Columns>
            </ColumnModel>
            <View>
                <ext:GroupingView GroupTextTpl="{text}" />
            </View>
        </ext:GridPanel>
    </body>
    </html>
    If I group by the second column, you would see output similar to the attached screenshot:



    Notice that the formatting applied to the values is shown in the grouping header as it takes the rendered HTML value to show there.

    Now, if I try the same (or similar!) thing in Ext.NET 3, I don't seem to get the same thing. First, here is the code I used

    <%@ Page Language="C#" %>
     
    <script runat="server">
        protected void Page_Load(object sender, EventArgs e)
        {
            if (!X.IsAjaxRequest)
            {
                Store1.DataSource = Data;
                Store1.DataBind();
            }
        }
     
        private object[] Data
        {
            get
            {
                return new object[]
                {
                    new object[] { "3m Co", 71.72},
                    new object[] { "Alcoa Inc", 29.01},
                    new object[] { "Altria Group Inc", 83.81},
                    new object[] { "American Express Company", 52.55},
                    new object[] { "American International Group, Inc.", 64.13}
                };
            }
        }
    
    </script>
     
    <!DOCTYPE html>
    <html>
    <head>
        <title>Ext.NET Example</title>
         
        <style type="text/css">
            .high { color: green; }
            .low { color: red; }
        </style>
             
        <script type="text/javascript">
            function formatPriceColumn(value) {
                var cls = value < 50 ? 'low' : 'high';
    
                return "<span class='" + cls + "'>" + value + "</span>";
            }
        </script>
    </head>
    <body>
        <ext:ResourceManager ID="ResourceManager1" runat="server" />
         
        <ext:GridPanel
            ID="GridPanel1"
            runat="server"
            Width="600"
            Height="350"
            AutoExpandColumn="company">
            <Store>
                <ext:Store ID="Store1" runat="server">
                    <Model>
                        <ext:Model>
                            <Fields>
                                <ext:ModelField Name="company" />
                                <ext:ModelField Name="price" Type="Float" />
                            </Fields>
                        </ext:Model>
                    </Model>
                </ext:Store>
            </Store>
            <ColumnModel ID="ColumnModel1" runat="server">
                <Columns>
                    <ext:Column ColumnID="Company" Header="Company" DataIndex="company" />
                    <ext:Column Header="Price" DataIndex="price">
                        <Renderer Fn="formatPriceColumn" />
                    </ext:Column>
                </Columns>
            </ColumnModel>
            <Features>
                <ext:Grouping runat="server" GroupHeaderTplString="{columnName} {name} {renderedGroupValue}" />
            </Features>
        </ext:GridPanel>
    </body>
    </html>
    Here is the resulting screenshot when I group by the same column:



    The grouping text loses the formatting. In my production code, I replace some values with images (think traffic light icons/status images) and these are quite valuable in the grouping header text). It would be nice to have that functionality continue in Ext.NET 3.x/Ext JS 5.1.

    I looked at the Sencha documentation at http://docs.sencha.com/extjs/5.1/5.1...ature.Grouping for groupHeaderTpl and it says there should be a property called renderedGroupValue which I have added to the template string in the above code example, but nothing comes through.

    Also, if I put a breakpoint in the XTemplate apply() method, the values don't match the documentation from Sencha. In my production code at initial render I saw all the values mentioned in the documentation (except renderedGroupValue!) and subsequent breaks into that method (e.g. view refresh) showed things like rows, view property, etc etc. In the above code example I don't even see the initial values described by the documentation (without renderedGroupValue). Any tips on better debugging these templates for future?

    Thanks!
    Attached Thumbnails Click image for larger version. 

Name:	grouping-ext-net-1.png 
Views:	18 
Size:	11.2 KB 
ID:	19501   Click image for larger version. 

Name:	grouping-ext-net-3.png 
Views:	18 
Size:	10.8 KB 
ID:	19511  
    Last edited by Daniil; Jan 27, 2015 at 11:26 AM. Reason: [CLOSED]
  2. #2
    Hi Anup,

    Thank you for the question!

    {renderedGroupValue} doesn't work in EXtJS 4 as well.
    https://github.com/extnet/Ext.NET/issues/118

    With ExtJS 5 the situation become worse. If ExtJS 4 has {name} working (that is actually a rendered group value), then ExtJS 5 still has {name}, but it is not a rendered group value anymore.

    I hope this solution helps.

    Example
    <%@ Page Language="C#" %>
    
    <script runat="server">
        protected void Page_Load(object sender, EventArgs e)
        {
            if (!X.IsAjaxRequest)
            {
                Store1.DataSource = new object[]
                {
                    new object[] { "3m Co", 71.72},
                    new object[] { "Alcoa Inc", 29.01},
                    new object[] { "Altria Group Inc", 83.81},
                    new object[] { "American Express Company", 52.55},
                    new object[] { "American International Group, Inc.", 64.13}
                }; ;
            }
        }
    </script>
    
    <!DOCTYPE html>
    <html>
    <head>
        <title>Ext.NET v3 Example</title>
    
        <style>
            .high {
                color: green;
            }
    
            .low {
                color: red;
            }
        </style>
    
        <script>
            var formatPriceColumn = function (value) {
                var cls = value < 50 ? 'low' : 'high';
    
                return "<span class='" + cls + "'>" + value + "</span>";
            };
    
            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);
            };
        </script>
    </head>
    <body>
        <ext:ResourceManager runat="server" />
    
        <ext:GridPanel runat="server" Width="600" Height="350">
            <Store>
                <ext:Store ID="Store1" runat="server">
                    <Model>
                        <ext:Model runat="server">
                            <Fields>
                                <ext:ModelField Name="company" />
                                <ext:ModelField Name="price" Type="Float" />
                            </Fields>
                        </ext:Model>
                    </Model>
                </ext:Store>
            </Store>
            <ColumnModel runat="server">
                <Columns>
                    <ext:Column runat="server" Text="Company" DataIndex="company" Flex="1" />
                    <ext:Column runat="server" Text="Price" DataIndex="price">
                        <Renderer Fn="formatPriceColumn" />
                    </ext:Column>
                </Columns>
            </ColumnModel>
            <Features>
                <ext:Grouping runat="server" GroupHeaderTplString="{[ getGroupText(values, parent) ]}" />
            </Features>
        </ext:GridPanel>
    </body>
    </html>
  3. #3
    Hi,

    Thanks for quick reply, as always! And more importantly, for the explanation and solution - neat workaround.

    Many thanks! Please mark as closed.
  4. #4
    It has been fixed in ExtJS 5.1.1 and going to Ext.NET 3.2.0 release (already in SVN trunk).

Similar Threads

  1. [CLOSED] Group header align text bottom
    By rthiney in forum 2.x Legacy Premium Help
    Replies: 12
    Last Post: Dec 21, 2013, 9:39 PM
  2. [CLOSED] GridPanel header group text oddity
    By rthiney in forum 2.x Legacy Premium Help
    Replies: 4
    Last Post: Dec 13, 2013, 6:22 PM
  3. [CLOSED] Custom Grid Group Header Text
    By bayoglu in forum 2.x Legacy Premium Help
    Replies: 4
    Last Post: May 17, 2013, 3:38 PM
  4. [CLOSED] Change text in header group column.
    By pdcase in forum 1.x Legacy Premium Help
    Replies: 4
    Last Post: Mar 09, 2011, 3:44 PM
  5. group header text multiline problem
    By wp_joju in forum 1.x Help
    Replies: 0
    Last Post: Dec 21, 2010, 10:54 AM

Posting Permissions