[CLOSED] Grid group Text change dynamically?

**aditya** · Feb 14, 2014, 6:08 PM

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.

**Daniil** · Feb 17, 2014, 3:38 AM

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

**aditya** · Feb 17, 2014, 10:31 AM

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.

**Daniil** · Feb 17, 2014, 11:36 AM

I think I got the problem. I need a sample to test with. Please provide. You can modify my example.

**aditya** · Feb 17, 2014, 12:53 PM

Originally Posted by Daniil

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>

**Daniil** · Feb 17, 2014, 1:20 PM

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.

**aditya** · Feb 17, 2014, 1:57 PM

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>

Thread: [CLOSED] Grid group Text change dynamically?

Thread Tools

Search Thread

Display

[CLOSED] Grid group Text change dynamically?

Similar Threads

[CLOSED] Custom Grid Group Header Text

[CLOSED] Grid group text

How to change multiheadercolumn header text dynamically?

[CLOSED] Change text in header group column.

Trying to Dynamically change the ToolTip-Text in a GridPanel...

Tags for this Thread

Posting Permissions

Sitemap

Downloads

Resources

Thread: [CLOSED] Grid group Text change dynamically?

[CLOSED] Grid group Text change dynamically?

Similar Threads

Tags for this Thread

Posting Permissions

Sitemap

Downloads

Resources

Stay connected with us