PDA

View Full Version : [CLOSED] Gridpanel dynamic grouping



mohan.bizbites
Oct 17, 2013, 4:27 PM
Hi team,
In page load if we give groupfiled to store then it is working fine but it is not working in button's direct event
In button click we want to group the grid data based on given groupfield.
How can we solve this ?

Here is the sample code to reproduce the scenario


<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Test.aspx.cs" Inherits="Cresent.WorkSafeExt.Test" %>


<!DOCTYPE html>


<script runat="server">
protected void Page_Load(object sender, EventArgs e)
{
if (!X.IsAjaxRequest)
{
this.Store1.DataSource = this.Data;
this.Store1.DataBind();
}
}
private object[] Data
{
get
{
return new object[]
{
new object[] { "3m Co", 71.72, 0.02, 0.03, "9/1 12:00am" },
new object[] { "Alcoa Inc", 29.01, 0.42, 1.47, "9/1 12:00am" },
new object[] { "Altria Group Inc", 83.81, 0.28, 0.34, "9/1 12:00am" },
new object[] { "American Express Company", 52.55, 0.01, 0.02, "9/1 12:00am" },
new object[] { "American International Group, Inc.", 64.13, 0.31, 0.49, "9/1 12:00am" },
new object[] { "AT&T Inc.", 31.61, -0.48, -1.54, "9/1 12:00am" },
new object[] { "Boeing Co.", 75.43, 0.53, 0.71, "9/1 12:00am" },
new object[] { "Caterpillar Inc.", 67.27, 0.92, 1.39, "9/1 12:00am" },
new object[] { "Citigroup, Inc.", 49.37, 0.02, 0.04, "9/1 12:00am" },
new object[] { "E.I. du Pont de Nemours and Company", 40.48, 0.51, 1.28, "9/1 12:00am" },
new object[] { "Exxon Mobil Corp", 68.1, -0.43, -0.64, "9/1 12:00am" },
new object[] { "General Electric Company", 34.14, -0.08, -0.23, "9/1 12:00am" },
new object[] { "General Motors Corporation", 30.27, 1.09, 3.74, "9/1 12:00am" },
new object[] { "Hewlett-Packard Co.", 36.53, -0.03, -0.08, "9/1 12:00am" },
new object[] { "Honeywell Intl Inc", 38.77, 0.05, 0.13, "9/1 12:00am" },
new object[] { "Intel Corporation", 19.88, 0.31, 1.58, "9/1 12:00am" },
new object[] { "International Business Machines", 81.41, 0.44, 0.54, "9/1 12:00am" },
new object[] { "Johnson & Johnson", 64.72, 0.06, 0.09, "9/1 12:00am" },
new object[] { "JP Morgan & Chase & Co", 45.73, 0.07, 0.15, "9/1 12:00am" },
new object[] { "McDonald\"s Corporation", 36.76, 0.86, 2.40, "9/1 12:00am" },
new object[] { "Merck & Co., Inc.", 40.96, 0.41, 1.01, "9/1 12:00am" },
new object[] { "Microsoft Corporation", 25.84, 0.14, 0.54, "9/1 12:00am" },
new object[] { "Pfizer Inc", 27.96, 0.4, 1.45, "9/1 12:00am" },
new object[] { "The Coca-Cola Company", 45.07, 0.26, 0.58, "9/1 12:00am" },
new object[] { "The Home Depot, Inc.", 34.64, 0.35, 1.02, "9/1 12:00am" },
new object[] { "The Procter & Gamble Company", 61.91, 0.01, 0.02, "9/1 12:00am" },
new object[] { "United Technologies Corporation", 63.26, 0.55, 0.88, "9/1 12:00am" },
new object[] { "Verizon Communications", 35.57, 0.39, 1.11, "9/1 12:00am" },
new object[] { "Wal-Mart Stores, Inc.", 45.45, 0.73, 1.63, "9/1 12:00am" }
};
}
}
protected void BTN_CLICK(object sender, DirectEventArgs e)
{
Column3.Show();
Store1.GroupField = "price";
this.Store1.DataSource = this.Data;
this.Store1.DataBind();
}
</script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<ext:ResourceManager ID="ResourceManager1" runat="server" />
<div>
<ext:Viewport ID="Viewport1" runat="server" Margins="0 0 10 0">
<LayoutConfig>
<ext:VBoxLayoutConfig Align="Center" Pack="Center" />
</LayoutConfig>
<Items>
<ext:GridPanel ID="GridPanel1"
runat="server"
Title="Grouped Header GridPanel"
Width="640"
Height="400"
ColumnLines="true">
<Store>
<ext:Store ID="Store1" runat="server">
<Model>
<ext:Model ID="Model1" runat="server">
<Fields>
<ext:ModelField Name="company" />
<ext:ModelField Name="price" Type="Float" />
<ext:ModelField Name="change" Type="Float" />
<ext:ModelField Name="pctChange" Type="Float" />
<ext:ModelField Name="lastChange" Type="Date" DateFormat="M/d hh:mmtt" />
</Fields>
</ext:Model>
</Model>
</ext:Store>
</Store>
<ColumnModel ID="ColumnModel1" runat="server">
<Columns>
<ext:Column ID="Column1"
runat="server"
Text="Company"
DataIndex="company"
Flex="1"
Sortable="false" />
<ext:Column ID="Column3"
runat="server"
Text="Price"
DataIndex="price"
Width="75"
Sortable="true" Hidden="true">
<Renderer Format="UsMoney" />
</ext:Column>


<ext:Column ID="Column4"
runat="server"
Text="Change"
DataIndex="change"
Width="75"
Sortable="true">
</ext:Column>
<ext:Column ID="Column5"
runat="server"
Text="Change %"
DataIndex="pctChange"
Width="75"
Sortable="true">
</ext:Column>






</Columns>


</ColumnModel>
<Features>
<ext:Grouping
ID="Grouping1"
runat="server"
HideGroupedHeader="true"
StartCollapsed="false"
GroupHeaderTplString='{columnName}: {name} ({rows.length} Item{[values.rows.length > 1 ? "s" : ""]})' />
</Features>
<View>
<ext:GridView ID="gvSampleGrid" runat="server"></ext:GridView>
</View>
</ext:GridPanel>
<ext:Button ID="img1" runat="server" Text="click to GroupIt">
<DirectEvents>
<Click OnEvent="BTN_CLICK"></Click>
</DirectEvents>
</ext:Button>
</Items>
</ext:Viewport>




</div>
</form>
</body>
</html>




Please contact If you need more clarification.

Thank you
Mohan

Baidaly
Oct 17, 2013, 7:36 PM
Hello!

It's not necessary to load data again if the store already loaded data. Also, during DirectEvent you should use Methods instead of Properties:


protected void BTN_CLICK(object sender, DirectEventArgs e)
{
Column3.Show();
Store1.Group("price");
}

mohan.bizbites
Oct 18, 2013, 6:15 AM
Thank you very much for the help :) Close this.....

Regards
Mohan