[CLOSED] Grid group Text change dynamically?

  1. #1

    [CLOSED] Grid group Text change dynamically?

    Hi all,

    I am working on a grid. in Grid, I have a column with Combo as editor. when I try to group by this field. Group's GroupHeaderTplString set to its Value field(GUID in my case) . but i want to show combo Display Field as GroupHeaderTplString.
    Last edited by Daniil; Feb 17, 2014 at 3:03 PM. Reason: [CLOSED]
  2. #2
    Hi @aditya,

    So, for some column you want some GroupHeaderTpl, for another column - another GroupHeaderTpl, right?

    Please look at the example.

    Example
    <%@ Page Language="C#" %>
    
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
    
    <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[] { "group1", "1", "1" },
                    new object[] { "group1", "11", "11" },
                    new object[] { "group1", "111", "111" },
                    new object[] { "group2", "2", "2" },
                    new object[] { "group2", "22", "22" },
                    new object[] { "group2", "222", "222" }
                };
            }
        }
    </script>
    
    <!DOCTYPE html>
    
    <html>
    <head runat="server">
        <title>Ext.NET v2 Example</title>
    </head>
    <body>
        <form runat="server">
            <ext:ResourceManager runat="server" />
            <ext:GridPanel ID="GridPanel1" runat="server">
                <Store>
                    <ext:Store runat="server" GroupField="groupId">
                        <Model>
                            <ext:Model runat="server">
                                <Fields>
                                    <ext:ModelField Name="groupId" />
                                    <ext:ModelField Name="test1" />
                                    <ext:ModelField Name="test2" />
                                </Fields>
                            </ext:Model>
                        </Model>
                    </ext:Store>
                </Store>
                <ColumnModel runat="server">
                    <Columns>
                        <ext:Column runat="server" Text="GroupId" DataIndex="groupId" />
                        <ext:Column runat="server" Text="Test1" DataIndex="test1" />
                        <ext:Column runat="server" Text="Test2" DataIndex="test2" />
                    </Columns>
                </ColumnModel>
                <Features>
                    <ext:Grouping runat="server">
                        <GroupHeaderTpl runat="server">
                            <Html>
                                <tpl if="groupField === 'groupId'">
                                    GroupID column: {name}
                                </tpl>
                                <tpl if="groupField === 'test1'">
                                    Test1 column: {name}
                                </tpl>
                                <tpl if="groupField === 'test2'">
                                    Test2 column: {name}
                                </tpl>
                            </Html>
                        </GroupHeaderTpl>
                    </ext:Grouping>
                </Features>
            </ext:GridPanel>
        </form>
    </body>
    </html>
    See also
    http://docs.sencha.com/extjs/4.2.1/#...groupHeaderTpl
  3. #3
    Thank for reply @Daniil,
    This solution is not what i am exactly want.
    suppose I have two columns.
    <ext:ModelField Name="GroupId" />
    <ext:ModelField Name="GroupName" />
    <ext:ModelField Name="test1" />
    <ext:ModelField Name="test2" />
    in grid store.

    and I m using a Combo as editor for Column GroupId. i am using renderer for Column GroupId. so user will see GroupName but internally this columnm has dataIndex property is GroupId.

    i want when user try to grouping grid on this column he will able to see GroupName as groupHeader instead of GroupId.
  4. #4
    I think I got the problem. I need a sample to test with. Please provide. You can modify my example.
  5. #5
    Quote Originally Posted by Daniil View Post
    I think I got the problem. I need a sample to test with. Please provide. You can modify my example.
    Hi @Daniil,
    I am sending you modified Code you can check it at your end.
    using System;
    using Ext.Net;
    
    public partial class Dynamic_GroupText : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            if (!X.IsAjaxRequest)
            {
                Store store = this.GridPanel1.GetStore();
                store.DataSource = new object[] 
                { 
                    new object[] { 1,"group1", "1", "1" },
                    new object[] { 1,"group1", "11", "11" },
                    new object[] { 1,"group1", "111", "111" },
                    new object[] { 2,"group2", "2", "2" },
                    new object[] { 2,"group2", "22", "22" },
                    new object[] { 2,"group2", "222", "222" }
                };
                storeCombo.DataSource = new object[]
                {
                    new object[] { 1,"group1"},
                    new object[] { 2,"group2" },
                };
            }
        }
    }
    <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Dynamic GroupText.aspx.cs" Inherits="Dynamic_GroupText" %>
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
    
    <!DOCTYPE html>
    <html>
    <head id="Head1" runat="server">
        <title>Ext.NET v2 Example</title>
        <script>
            var comboRenderer = function (value) {
                var r = App.storeCombo.getById(value);
                if (Ext.isEmpty(r)) {
                    return value;
                }
                return r.data.GroupName;
            };
        </script>
    </head>
    <body>
        <form id="Form1" runat="server">
            <ext:ResourceManager ID="ResourceManager1" runat="server" />
            <ext:Store ID="storeCombo" runat="server">
                <Model>
                    <ext:Model ID="Model1" runat="server" IDProperty="GroupId">
                        <Fields>
                            <ext:ModelField Name="GroupId" />
                            <ext:ModelField Name="GroupName" />
                        </Fields>
                    </ext:Model>
                </Model>
            </ext:Store>
            <ext:Store ID="storeGrid" runat="server">
                <Model>
                    <ext:Model ID="Model2" runat="server">
                        <Fields>
                            <ext:ModelField Name="GroupId" Type="Int" />
                            <ext:ModelField Name="GroupName" />
                            <ext:ModelField Name="TestCol1" />
                            <ext:ModelField Name="TestCol2" />
                        </Fields>
                    </ext:Model>
                </Model>
            </ext:Store>
            <ext:GridPanel ID="GridPanel1" runat="server" StoreID="storeGrid">
                <Features>
                    <ext:Grouping ID="Grouping1" GroupHeaderTplString="{columnName}: {name}" runat="server">
                    </ext:Grouping>
                </Features>
                <ColumnModel ID="ColumnModel1" runat="server">
                    <Columns>
                        <ext:Column ID="Column6" runat="server" Text="Group Select" DataIndex="GroupId">
                            <Renderer Fn="comboRenderer" />
                            <Editor>
                                <ext:ComboBox ID="ComboBox1" runat="server" StoreID="storeCombo" DisplayField="GroupName" ValueField="GroupId" Editable="False">
                                </ext:ComboBox>
                            </Editor>
                        </ext:Column>
                        <ext:Column ID="Column3" runat="server" Text="Test Col1" DataIndex="TestCol1" />
                        <ext:Column ID="Column4" runat="server" Text="Test Col2" DataIndex="TestCol2" />
                    </Columns>
                </ColumnModel>
                <Plugins>
                    <ext:CellEditing ID="CellEditing1" runat="server" ClicksToEdit="1" />
                </Plugins>
            </ext:GridPanel>
        </form>
    </body>
    </html>
  6. #6
    Please use:
    <ext:Grouping runat="server">
        <GroupHeaderTpl runat="server">
            <Html>
                <tpl if="groupField === 'GroupId'">
                    {columnName}: {[ values.children[0].data.GroupName ]}
                <tpl else>
                    {columnName}: {name}
                </tpl>
            </Html>
    </ext:Grouping>
    For our future collaboration. It is better to provide us with standalone examples. Like the one I provided you earlier. Please put the code behind into an ASPX page. It allows us to copy, paste and run your samples without any changes and save time.
  7. #7
    Hi,
    I want to ehanchment in this code.
    I want to sort column Column6 which has dataindex GroupId. it sort on its dataindex GroupId. Is any possibility to override this field(GroupId) by GroupName ?
    <%@ Page Language="C#" %>
     
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
     
    <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[] { 1,"1group", "1", "1" },
                    new object[] { 1,"1group", "11", "11" },
                    new object[] { 1,"1group", "111", "111" },
                    new object[] { 2,"2group", "2", "2" },
                    new object[] { 2,"2group", "22", "22" },
                    new object[] { 2,"2group", "222", "222" },
                    new object[] { 3,"3group", "3", "3" },
                    new object[] { 3,"3group", "33", "33" },
                    new object[] { 3,"3group", "333", "333" },
                    new object[] { 11,"11group", "11", "11" },
                    new object[] { 11,"11group", "1111", "1111" },
                    new object[] { 11,"11group", "11111", "11111" }
                };
                storeCombo.DataSource = new object[]
                {
                    new object[] { 1,"1group"},
                    new object[] { 2,"2group" },
                    new object[] { 3,"3group" },
                    new object[] { 11,"11group"},
                };
            }
        }
    </script>
     
    <!DOCTYPE html>
     
    <html>
    <head runat="server">
        <title>Ext.NET v2 Example</title>
        <script>
            var comboRenderer = function (value) {
                var r = App.storeCombo.getById(value);
                if (Ext.isEmpty(r)) {
                    return value;
                }
                return r.data.GroupName;
            };
        </script>
    </head>
    <body>
        <form id="Form1" runat="server">
            <ext:ResourceManager ID="ResourceManager1" runat="server" />
            <ext:Store ID="storeCombo" runat="server">
                <Model>
                    <ext:Model ID="Model1" runat="server" IDProperty="GroupId">
                        <Fields>
                            <ext:ModelField Name="GroupId" />
                            <ext:ModelField Name="GroupName" />
                        </Fields>
                    </ext:Model>
                </Model>
            </ext:Store>
            <ext:Store ID="storeGrid" runat="server">
                <Model>
                    <ext:Model ID="Model2" runat="server">
                        <Fields>
                            <ext:ModelField Name="GroupId" Type="Int" />
                            <ext:ModelField Name="GroupName" />
                            <ext:ModelField Name="TestCol1" />
                            <ext:ModelField Name="TestCol2" />
                        </Fields>
                    </ext:Model>
                </Model>
            </ext:Store>
            <ext:GridPanel ID="GridPanel1" runat="server" StoreID="storeGrid">
                <Features>
                    <ext:Grouping ID="Grouping1" runat="server">
                        <GroupHeaderTpl ID="GroupHeaderTpl1" runat="server">
                            <Html>
                                <tpl if="groupField === 'GroupId'">
                    {columnName}: {[ values.children[0].data.GroupName ]}
                <tpl else>
                    {columnName}: {name}
                </tpl>
                            </Html>
                        </GroupHeaderTpl>
                    </ext:Grouping>
                </Features>
                <ColumnModel ID="ColumnModel1" runat="server">
                    <Columns>
                        <ext:Column ID="Column6" runat="server" Text="Group Select" DataIndex="GroupId" Sortable="true">
                            <Renderer Fn="comboRenderer" />
                            <Editor>
                                <ext:ComboBox ID="ComboBox1" runat="server" StoreID="storeCombo" DisplayField="GroupName" ValueField="GroupId" Editable="False">
                                </ext:ComboBox>
                            </Editor>
                        </ext:Column>
                        <ext:Column ID="Column3" runat="server" Text="Test Col1" DataIndex="TestCol1" />
                        <ext:Column ID="Column4" runat="server" Text="Test Col2" DataIndex="TestCol2" />
                    </Columns>
                </ColumnModel>
                <Plugins>
                    <ext:CellEditing ID="CellEditing1" runat="server" ClicksToEdit="1" />
                </Plugins>
            </ext:GridPanel>
        </form>
    </body>
    </html>
    Last edited by aditya; Feb 19, 2014 at 5:50 AM.

Similar Threads

  1. [CLOSED] Custom Grid Group Header Text
    By bayoglu in forum 2.x Premium Help
    Replies: 4
    Last Post: May 17, 2013, 4:38 PM
  2. [CLOSED] Grid group text
    By bayoglu in forum 2.x Premium Help
    Replies: 2
    Last Post: Apr 26, 2013, 10:02 PM
  3. Replies: 0
    Last Post: Sep 20, 2012, 7:08 PM
  4. [CLOSED] Change text in header group column.
    By pdcase in forum 1.x Premium Help
    Replies: 4
    Last Post: Mar 09, 2011, 4:44 PM
  5. Replies: 1
    Last Post: Nov 23, 2010, 8:31 PM

Tags for this Thread

Posting Permissions