Jun 21, 2010, 3:51 PM
[CLOSED] Dynamic GridPanel with Grouping Summary and Sorting
Hi,
I have a page which contains a GridPanel which is loaded dynamically and has a GroupingSummary plugin attached.
Does anyone know if it is possible to set the order of data within each group whilst having the grouping columns ordered in descending order?
I am binding data to the store using "</FONTstrData.SetDataFromJson" and the data passed from to this function is ordered correctly (date descending and then username ascending). However, the date field is not ordered in descending order (see Image1). If I add
[CODE]
strData.SortInfo.Field = "DateValue";
strData.SortInfo.Direction = Ext.Net.SortDirection.DESC;
strData.RemoteSort = true;
[CODE]
to the store then the dates are ordered in descending order but the child data is not ordered by the UserName field (see Image2)
Any suggestions would be greatly appreciated!
Thanks
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Report.aspx.cs" Inherits="WebApplication1.Report" %>
<!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 id="Head1" runat="server">
<title></title>
<style type="text/css">
</style>
</head>
<body>
<form id="frmMain" runat="server">
<ext:ResourceManager ID="rsmMain" runat="server">
<Listeners>
</Listeners>
</ext:ResourceManager>
<ext:Store runat="server" ID="strData" AutoLoad="true" AutoDataBind="true">
<Listeners>
</Listeners>
</ext:Store>
<ext:Viewport runat="server" ID="ViewPort1">
<Content>
<ext:FitLayout ID="FitLayout1" runat="server">
<Items>
<ext:Panel runat="server" ID="pnlReport" Border="false" AutoHeight="false" HideBorders="true">
<Content>
<ext:FitLayout runat="server" ID="FitLayout2">
<Items>
<ext:GridPanel runat="server"
ID="grdData" AutoScroll="true"
StoreID="strData" AutoWidth="true"
ClicksToEdit="1" AutoEncode="true"
EnableDragDrop="false"
AutoLoad="false" AutoDataBind="true" SerializationMode="Simple"
EnableColumnHide="false"
EnableColumnMove="false">
<ColumnModel>
<Columns>
</Columns>
</ColumnModel>
<SelectionModel>
<ext:RowSelectionModel ID="RowSelectionModel2" runat="server" SingleSelect="true">
</ext:RowSelectionModel>
</SelectionModel>
<LoadMask Msg="Loading" ShowMask="true" />
</ext:GridPanel>
</Items>
</ext:FitLayout>
</Content>
</ext:Panel>
</Items>
</ext:FitLayout>
</Content>
</ext:Viewport>
</form>
</body>
</html>
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using Ext.Net;
namespace WebApplication1
{
public partial class Report : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
if (!X.IsAjaxRequest || !Page.IsPostBack)
{
rsmMain.RegisterClientScriptInclude("GridSummary", "Ext.ux.grid.GridSummary.js");
LoadColumns(); //Load store and grid columns
LoadData(); //Load data
}
}
private void LoadColumns()
{
JsonReader opReader;
RecordField opField;
Column opColumn = new Column();
GroupingSummaryColumn opGroupColumn = new GroupingSummaryColumn();
//Department view
//Create GroupingView and assign to the grid
Ext.Net.GroupingView opView = new GroupingView();
opView.ID = "GroupingView1";
opView.ForceFit = true;
opView.EmptyText = "No data available";
opView.ShowGroupName = false;
opView.HideGroupedColumn = true;
opView.StartCollapsed = true;
grdData.View.Add(opView);
//Set the AutoExpandColumn
grdData.AutoExpandColumn = "colDate";
//Get the GroupField on the store
strData.GroupField = "DateValue";
GenericPlugin opGenPlugin = new GenericPlugin();
opGenPlugin.InstanceName = "Ext.ux.grid.GridSummary";
grdData.Plugins.Add(opGenPlugin);
//Add the Grouping Summary plugin - needed for the grouping and summary row functionality
GroupingSummary opPlugin = new GroupingSummary();
opPlugin.ID = "GroupingSummary1";
grdData.Plugins.Add(opPlugin);
//Create a new reader as the store is being dynamically
opReader = new JsonReader();
opReader.IDProperty = "TransactionID";
//Date
opField = new RecordField("DateValue", RecordFieldType.Date);
opReader.Fields.Add(opField); //add recordField to store reader
opGroupColumn = new GroupingSummaryColumn();
opGroupColumn.ColumnID = "colDate";
opGroupColumn.Header = "Date";
opGroupColumn.DataIndex = "DateValue";
opGroupColumn.Hideable = false;
opGroupColumn.Renderer.Handler = "return Ext.util.Format.date(value, 'd/m/Y')";
opGroupColumn.SummaryType = SummaryType.Count;
opGroupColumn.SummaryRenderer.Handler = "return ((value === 0 || value > 1) ? '(' + value +' Bookings)' : '(1 Booking)');";
grdData.ColumnModel.Columns.Add(opGroupColumn);
//User
opField = new RecordField("UserName");
opReader.Fields.Add(opField); //add recordField to store reader
opGroupColumn = new GroupingSummaryColumn();
opGroupColumn.ColumnID = "colUser";
opGroupColumn.Header = "User";
opGroupColumn.DataIndex = "UserName";
opGroupColumn.Hideable = false;
opGroupColumn.Width = Unit.Pixel(100);
opGroupColumn.SummaryType = SummaryType.Count;
opGroupColumn.Renderer.Handler = "return value";
opGroupColumn.SummaryRenderer.Handler = "return ((value === 0 || value > 1) ? '(' + value +' Bookings)' : '(1 Booking)');";
grdData.ColumnModel.Columns.Add(opGroupColumn);
//Porject Number
opField = new RecordField("ProjectNumber");
opReader.Fields.Add(opField); //add recordField to store reader
opColumn = new Column(); //add column to store
opColumn.Header = "Project";
opColumn.DataIndex = "ProjectNumber";
opColumn.Width = Unit.Pixel(75);
grdData.ColumnModel.Columns.Add(opColumn);
//Porject title
opField = new RecordField("ProjectName");
opReader.Fields.Add(opField); //add recordField to store reader
opColumn = new Column(); //add column to store
opColumn.Header = "Project Title";
opColumn.DataIndex = "ProjectName";
opColumn.Width = Unit.Pixel(200);
grdData.ColumnModel.Columns.Add(opColumn);
//Hours
opField = new RecordField("Hours");
opReader.Fields.Add(opField); //add recordField to store reader
opGroupColumn = new GroupingSummaryColumn();
opGroupColumn.ColumnID = "colHours";
opGroupColumn.Header = "Hours";
opGroupColumn.Fixed = true;
opGroupColumn.DataIndex = "Hours";
opGroupColumn.Width = Unit.Pixel(75);
opGroupColumn.SummaryType = SummaryType.Sum;
opGroupColumn.Renderer.Handler = "return value;";
grdData.ColumnModel.Columns.Add(opGroupColumn);
// strData.SortInfo.Field = "DateValue";
// strData.SortInfo.Direction = Ext.Net.SortDirection.DESC;
// strData.RemoteSort = true;
opReader.Root = "data";
strData.Reader.Add(opReader);
}
/// <summary>
/// Author: Beth Chubb
/// Date: 03/06/2010
/// Purpose: gets the department discretionary data loads into store
/// </summary>
/// <param name="lStartDateID">The start date ID</param>
/// <param name="lEndDateID">The end date ID</param>
private void LoadData()
{
IList<Dictionary<string, object>> opData = new List<Dictionary<string, object>>();
Dictionary<string, object> opObj;
//Populate data
opObj = new Dictionary<string, object>();
opObj.Add("DateID", 2);
opObj.Add("DateValue", new DateTime(2010, 6, 3));
opObj.Add("DepartmentName", "Dept1");
opObj.Add("ProjectNumber", "Project 2");
opObj.Add("ProjectName", "P2");
opObj.Add("UserName", "Bob");
opObj.Add("TransactionID", 5);
opObj.Add("Hours", 1);
opData.Add(opObj);
opObj = new Dictionary<string, object>();
opObj.Add("DateID", 2);
opObj.Add("DateValue", new DateTime(2010, 6, 3));
opObj.Add("DepartmentName", "Dept1");
opObj.Add("ProjectNumber", "Project 1");
opObj.Add("ProjectName", "P1");
opObj.Add("UserName", "Jane");
opObj.Add("TransactionID", 4);
opObj.Add("Hours", 1);
opData.Add(opObj);
opObj = new Dictionary<string, object>();
opObj.Add("DateID", 1);
opObj.Add("DateValue", new DateTime(2010, 6, 2));
opObj.Add("DepartmentName", "Dept1");
opObj.Add("ProjectNumber", "Project 2");
opObj.Add("ProjectName", "P2");
opObj.Add("UserName", "Bob");
opObj.Add("TransactionID", 2);
opObj.Add("Hours", 4);
opData.Add(opObj);
opObj = new Dictionary<string, object>();
opObj.Add("DateID", 1);
opObj.Add("DateValue", new DateTime(2010, 6, 2));
opObj.Add("DepartmentName", "Dept1");
opObj.Add("ProjectNumber", "Project 1");
opObj.Add("ProjectName", "P1");
opObj.Add("UserName", "Jane");
opObj.Add("TransactionID", 3);
opObj.Add("Hours", 1);
opData.Add(opObj);
opObj = new Dictionary<string, object>();
opObj.Add("DateID", 1);
opObj.Add("DateValue", new DateTime(2010, 6, 2));
opObj.Add("DepartmentName", "Dept1");
opObj.Add("ProjectNumber", "Project 3");
opObj.Add("ProjectName", "P3");
opObj.Add("UserName", "Paul");
opObj.Add("TransactionID", 1);
opObj.Add("Hours", 9);
opData.Add(opObj);
strData.SetDataFromJson(String.Format("{{totalCount:{1},'data' : {0}}}", JSON.Serialize(opData), opData.Count));
}
}
}
