Please find the below sample code similar to my page. the onyl change to my actual page is o'm using object data source to bind the data store.
<%@ Page Language="C#" %>
<%@ register assembly="Coolite.Ext.Web" namespace="Coolite.Ext.Web" tagprefix="ext" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<script runat="server">
protected void Page_Load(object sender, EventArgs e)
{
this.Store1.DataSource = new object[]
{
new object[] {"3m Co", "USA"},
new object[] {"Alcoa Inc", "USA"},
new object[] {"Altria Group Inc", "USA"},
new object[] {"American Express Company", "USA"},
new object[] {"American International Group, Inc.", "UK"},
new object[] {"AT&T Inc.", "UK"},
new object[] {"Boeing Co.", "UK"},
new object[] {"Caterpillar Inc.", "Other"},
new object[] {"Citigroup, Inc.", "Other"},
new object[] {"E.I. du Pont de Nemours and Company", "Other"},
new object[] {"Exxon Mobil Corp", "Other"},
new object[] {"General Electric Company", "India"},
new object[] {"General Motors Corporation", "India"},
new object[] {"Hewlett-Packard Co.", "China"},
};
}
protected void Button1_Clicked(object sender, Coolite.Ext.Web.AjaxEventArgs e)
{
for (int i = GridPanel1.ColumnModel.Columns.Count - 1; i >= 0; i--)
{
GridPanel1.RemoveColumn(i);
}
GridPanel1.Reconfigure();
Coolite.Ext.Web.Column company = new Column();
company.DataIndex = "company";
company.Header = "Company Name";
company.Groupable = false;
GridPanel1.AddColumn(company);
Coolite.Ext.Web.Column country = new Column();
country.DataIndex = "country";
country.Header = "Country";
country.Width = 100;
country.Groupable = true;
country.ColumnID = "country";
GridPanel1.AddColumn(country);
GridPanel1.AutoExpandColumn = "country";
//Create grouping view
Coolite.Ext.Web.GroupingView groupView1 = new GroupingView();
groupView1.EnableRowBody = true;
groupView1.EnableGrouping = true;
groupView1.HideGroupedColumn = true;
GridPanel1.View.Clear();
GridPanel1.View.Add(groupView1);
Store1.DataBind();
}
</script>
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>Untitled Page</title>
</head>
<body>
<form id="form1" runat="server">
<ext:scriptmanager id="ScriptManager1" runat="server">
</ext:scriptmanager>
<ext:store id="Store1" runat="server" groupfield="country">
<reader>
<ext:arrayreader>
<fields>
<ext:recordfield name="company">
</ext:recordfield>
<ext:recordfield name="country" sortdir="ASC" >
</ext:recordfield>
</fields>
</ext:arrayreader>
</reader>
</ext:store>
<ext:button id="Button1" runat="server" text="Show Data">
<ajaxevents>
<click onevent="Button1_Clicked"></click>
</ajaxevents>
</ext:button>
<ext:gridpanel id="GridPanel1" autoheight="true" runat="server" storeid="Store1">
</ext:gridpanel>
</form>
</body>
</html>
thanks in advance.