PDA

View Full Version : [CLOSED] Grid group Text change dynamically?



aditya
Feb 14, 2014, 7: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, 4: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/#!/api/Ext.grid.feature.Grouping-cfg-groupHeaderTpl

aditya
Feb 17, 2014, 11: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, 12:36 PM
I think I got the problem. I need a sample to test with. Please provide. You can modify my example.

aditya
Feb 17, 2014, 1:53 PM
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, 2: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, 2: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>