Please look at the way how to achieve your requirement without re-rendering and re-loading, because these actions can be very expensive.
Example
<%@ Page Language="C#" %>
<%@ Import Namespace="System.Collections.Generic" %>
<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
<script runat="server">
protected void Page_Load(object sender, EventArgs e)
{
if (!X.IsAjaxRequest)
{
var structure = new Dictionary<string, string[]>
{
{ "Asia", new string[] {"Beijing", "Tokyo"} },
{ "Europe", new string[] {"Berlin", "London", "Paris"} }
};
var products = new string[] { "ProductX", "ProductY" };
var grid = GridPanel1;
var view = grid.View[0];
var store = grid.Store[0];
var cm = grid.ColumnModel;
var continentGroupRow = new HeaderGroupRow();
var cityGroupRow = new HeaderGroupRow();
var data = new object[5];
var i = 0;
var random = new Random();
foreach (KeyValuePair<string, string[]> keyValuePair in structure)
{
var continent = keyValuePair.Key;
var cities = keyValuePair.Value;
continentGroupRow.Columns.Add(new HeaderGroupColumn
{
Header = continent,
Align = Alignment.Center,
ColSpan = cities.Length * products.Length
});
foreach (string city in cities)
{
cityGroupRow.Columns.Add(new HeaderGroupColumn
{
Header = city,
ColSpan = products.Length,
Align = Alignment.Center
});
foreach (string product in products)
{
store.Reader[0].Fields.Add(city + product, RecordFieldType.Int);
cm.Columns.Add(new Column
{
DataIndex = city + product,
Header = product,
Renderer =
{
Format = RendererFormat.UsMoney
}
});
}
var arr = new int[20];
for (int j = 0; j < 20; j++)
{
arr[j] = Convert.ToInt32((Math.Floor(random.NextDouble() * 11) + 1) * 100000);
}
data[i++] = arr;
}
}
view.HeaderGroupRows.Add(continentGroupRow);
view.HeaderGroupRows.Add(cityGroupRow);
store.DataSource = data;
store.DataBind();
}
}
[DirectMethod]
public string SetHeader(int row, int column)
{
string header = "";
if (row == 1 && column == 1)
{
header = "New Tokyo";
}
else if (row == 1 && column == 3)
{
header = "New London";
}
else
{
header = "Default";
}
return header;
}
</script>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Grid Column Header Grouping - Ext.NET Examples</title>
<script type="text/javascript">
var changeHeader = function(grid, row, column, newHeader) {
grid.view.headerGroupRows[row][column].header = newHeader;
var rows = grid.view.mainHd.select(".x-grid3-hd-row", true).elements,
tds = rows[row].select("td", true).elements;
tds[column].child("div").dom.lastChild.nodeValue = newHeader;
}
</script>
</head>
<body>
<ext:ResourceManager runat="server" />
<ext:GridPanel
ID="GridPanel1"
runat="server"
StripeRows="true"
Title="Sales By Region"
TrackMouseOver="true"
Width="1000"
Height="400">
<Store>
<ext:Store runat="server">
<Reader>
<ext:ArrayReader />
</Reader>
</ext:Store>
</Store>
<SelectionModel>
<ext:RowSelectionModel runat="server" />
</SelectionModel>
<View>
<ext:GridView runat="server" ForceFit="true" />
</View>
</ext:GridPanel>
<ext:Button runat="server" Text="Change Asia to New Asia">
<Listeners>
<Click Handler="changeHeader(GridPanel1, 0, 0, 'New Asia');" />
</Listeners>
</ext:Button>
<ext:Button runat="server" Text="Change Europe to New Europe">
<Listeners>
<Click Handler="changeHeader(GridPanel1, 0, 1, 'New Europe');" />
</Listeners>
</ext:Button>
<ext:Button runat="server" Text="Change Beijing to New Beijing">
<Listeners>
<Click Handler="changeHeader(GridPanel1, 1, 0, 'New Beijing');" />
</Listeners>
</ext:Button>
<ext:Button runat="server" Text="Change Tokyo to New Tokyo (DirectMethod)">
<Listeners>
<Click Handler="Ext.net.DirectMethods.SetHeader(1, 1, {
success : function (result) {
changeHeader(GridPanel1, 1, 1, result);
}
});" />
</Listeners>
</ext:Button>
<ext:Button runat="server" Text="Change Tokyo to New Tokyo (DirectMethod)">
<Listeners>
<Click Handler="Ext.net.DirectMethods.SetHeader(1, 3, {
success : function (result) {
changeHeader(GridPanel1, 1, 3, result);
}
});" />
</Listeners>
</ext:Button>
</body>
</html>