I was in a need for the same, and this thread helped me much.
I was needing also to save the Filters (which was missed out of this thread), and I did it and thought to share with you :)
Below is the same code with support to
Save Filters, with some slight modifications.
<%@ Page Language="C#" %>
<%@ Import Namespace="System.Xml" %>
<%@ Import Namespace="System.Collections.ObjectModel" %>
<%@ Import Namespace="System.Collections.Generic" %>
<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
<!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>GridPanel with Local Filtering, Sorting and Paging - Coolite Toolkit Examples
</title>
<script runat="server">
public static List<object> Data
{
get
{
var goods = new List<object>
{
new
{
Id = 1,
Price = 71.72,
Company = "3m Co",
Date = new DateTime(2011, 9, 1),
Size = "large",
Visible = true
},
new
{
Id = 2,
Price = 29.01,
Company = "Aloca Inc",
Date = new DateTime(2011, 08, 01),
Size = "medium",
Visible = false
},
new
{
Id = 3,
Price = 83.81,
Company = "Altria Group Inc",
Date = new DateTime(2011, 08, 03),
Size = "large",
Visible = false
},
new
{
Id = 4,
Price = 52.55,
Company = "American Express Company",
Date = new DateTime(2011, 01, 04),
Size = "extra large",
Visible = true
},
new
{
Id = 5,
Price = 64.13,
Company = "American International Group Inc.",
Date = new DateTime(2011, 03, 04),
Size = "small",
Visible = true
},
new
{
Id = 6,
Price = 31.61,
Company = "AT&T Inc.",
Date = new DateTime(2011, 02, 01),
Size = "extra large",
Visible = false
},
new
{
Id = 7,
Price = 75.43,
Company = "Boeing Co.",
Date = new DateTime(2011, 01, 01),
Size = "large",
Visible = true
},
new
{
Id = 8,
Price = 67.27,
Company = "Caterpillar Inc.",
Date = new DateTime(2011, 12, 03),
Size = "medium",
Visible = true
},
new
{
Id = 9,
Price = 49.37,
Company = "Citigroup, Inc.",
Date = new DateTime(2011, 11, 24),
Size = "large",
Visible = true
},
new
{
Id = 10,
Price = 40.48,
Company = "E.I. du Pont de Nemours and Company",
Date = new DateTime(2011, 05, 09),
Size = "extra large",
Visible = false
},
new
{
Id = 11,
Price = 68.1,
Company = "Exxon Mobile Corp",
Date = new DateTime(2011, 12, 12),
Size = "large",
Visible = true
},
new
{
Id = 12,
Price = 34.14,
Company = "General Electric Company",
Date = new DateTime(2011, 06, 16),
Size = "extra large",
Visible = true
},
new
{
Id = 13,
Price = 30.27,
Company = "General Motors Corporation",
Date = new DateTime(2006, 12, 07),
Size = "medium",
Visible = true
},
new
{
Id = 14,
Price = 36.53,
Company = "Hewlett-Packard Co.",
Date = new DateTime(2011, 05, 13),
Size = "large",
Visible = true
},
new
{
Id = 15,
Price = 38.77,
Company = "Honweywell Intl Inc",
Date = new DateTime(2006, 11, 07),
Size = "medium",
Visible = false
},
new
{
Id = 16,
Price = 19.88,
Company = "Intel Corporation",
Date = new DateTime(2011, 01, 09),
Size = "small",
Visible = true
},
new
{
Id = 17,
Price = 81.41,
Company = "International Business Machines",
Date = new DateTime(2005, 01, 21),
Size = "extra large",
Visible = true
},
new
{
Id = 18,
Price = 64.72,
Company = "Johnson & Johnson",
Date = new DateTime(2011, 01, 10),
Size = "extra large",
Visible = true
},
new
{
Id = 19,
Price = 45.73,
Company = "JP Morgan & Chase & Co",
Date = new DateTime(2011, 02, 20),
Size = "large",
Visible = false
},
new
{
Id = 20,
Price = 36.76,
Company = "McDonald's Corporation",
Date = new DateTime(2011, 06, 12),
Size = "large",
Visible = true
},
new
{
Id = 21,
Price = 27.96,
Company = "Pfizer Inc",
Date = new DateTime(2011, 12, 30),
Size = "small",
Visible = false
},
new
{
Id = 22,
Price = 45.07,
Company = "The Coca-Cola Company",
Date = new DateTime(2011, 01, 30),
Size = "medium",
Visible = false
},
new
{
Id = 23,
Price = 34.64,
Company = "The Home Depot, Inc",
Date = new DateTime(2006, 12, 31),
Size = "small",
Visible = true
},
new
{
Id = 24,
Price = 61.91,
Company = "The Procter & Gamble Company",
Date = new DateTime(2011, 04, 08),
Size = "extra large",
Visible = true
},
new
{
Id = 25,
Price = 63.26,
Company = "United Technologies Corporation",
Date = new DateTime(2006, 06, 04),
Size = "medium",
Visible = true
},
new
{
Id = 26,
Price = 35.57,
Company = "Verizon Communications",
Date = new DateTime(2005, 07, 09),
Size = "small",
Visible = false
},
new
{
Id = 27,
Price = 45.45,
Company = "Wal-Mart Stores, Inc",
Date = new DateTime(2006, 09, 09),
Size = "large",
Visible = true
}
};
return goods;
}
}
private static string SESSION_KEY_GRID_SETTINGS = "GRID_SETTINGS";
protected void Page_Load(object sender, EventArgs e)
{
if(!X.IsAjaxRequest)
{
this.Store1.DataSource = Data;
this.Store1.DataBind();
//TODO: Read from a more persistable storage
string strSettings = (string)HttpContext.Current.Session[SESSION_KEY_GRID_SETTINGS];
GetGridSettings(strSettings, this.Store1, this.GridPanel1, this.GridFilters1);
}
}
protected void SaveSettings(object sender, DirectEventArgs e)
{
string strSettings = e.ExtraParams["settings"];
XmlNode settings = JSON.DeserializeXmlNode(strSettings);
XmlNodeList columns = settings.SelectNodes("settings/columns");
if(columns != null)
{
foreach(XmlNode node in columns)
{
string dataIndex = node.SelectSingleNode("dataIndex").InnerText;
string width = node.SelectSingleNode("width").InnerText;
string hidden = node.SelectSingleNode("hidden").InnerText;
}
}
XmlNode sortState = settings.SelectSingleNode("settings/sortState");
if(sortState != null)
{
string field = sortState.SelectSingleNode("field").InnerText;
string direction = sortState.SelectSingleNode("direction").InnerText;
}
XmlNode groupField = settings.SelectSingleNode("settings/groupField");
if(groupField != null)
{
string field = groupField.InnerText;
}
XmlNodeList filters = settings.SelectNodes("settings/filter");
if(filters != null)
{
foreach(XmlNode filter in filters)
{
string field = filter.SelectSingleNode("field").InnerText;
XmlNodeList args = filter.SelectNodes("args");
//args can comtains:
// type
// comparison
// value
}
}
//TODO: Save to a more persistable storage
HttpContext.Current.Session.Add(SESSION_KEY_GRID_SETTINGS, strSettings);
}
public static void GetGridSettings(string strSettings, Store currentStore, GridPanel grdCurent, GridFilters GridFilters)
{
currentStore.SuspendEvents(false);
grdCurent.SuspendEvents(false);
GridFilters.SuspendEvents(false);
if(!string.IsNullOrEmpty(strSettings))
{
XmlNode settings = JSON.DeserializeXmlNode(strSettings);
#region Column Settings
//Column Settings
XmlNodeList columns = settings.SelectNodes("settings/columns");
if(columns != null)
{
foreach(XmlNode node in columns)
{
string dataIndex = node.SelectSingleNode("dataIndex").InnerText;
string width = node.SelectSingleNode("width").InnerText;
string hidden = node.SelectSingleNode("hidden").InnerText;
for(int i = 0;i < grdCurent.ColumnModel.Columns.Count;i++)
{
Ext.Net.ColumnBase col = grdCurent.ColumnModel.Columns[i];
if(col.DataIndex.Equals(dataIndex))
{
col.Hidden = (hidden.ToLower() == "true");
col.Width = Convert.ToInt32(width);
}
}
}
}
#endregion
#region Sort Settings
//Sort Settings
XmlNode sortState = settings.SelectSingleNode("settings/sortState");
if(sortState != null)
{
string field = sortState.SelectSingleNode("field").InnerText;
string direction = sortState.SelectSingleNode("direction").InnerText;
currentStore.Sort(field, direction == "DESC" ? Ext.Net.SortDirection.DESC : Ext.Net.SortDirection.Default);
}
#endregion
#region Group Settings
//Group Settings
XmlNode groupField = settings.SelectSingleNode("settings/groupField");
if(groupField != null)
{
string field = groupField.InnerText;
currentStore.GroupField = field;
}
#endregion
# region Filter Settings
//Filter Settings
XmlNodeList filters = settings.SelectNodes("settings/filter");
if(filters != null)
{
foreach(XmlNode filter in filters)
{
string field = filter.SelectSingleNode("field").InnerText;
XmlNodeList argsList = filter.SelectNodes("args");
if(0 < argsList.Count)
{
//args can comtains:
// type
// comparison
// value
//XmlNode nodTemp;
XmlNode args = argsList[0];
XmlNode nodType = args.SelectSingleNode("type");
string FilterType = (null == nodType) ? null : nodType.InnerText;
XmlNode nodComparison = args.SelectSingleNode("comparison");
string FilterComparison = (null == nodComparison) ? null : nodComparison.InnerText;
XmlNodeList nodValues = args.SelectNodes("value");
//string FilterValue = (null == nodValue) ? null : nodValue.InnerText;
if(null != nodValues && 0 != nodValues.Count)
{
for(int i = 0;i < GridFilters.Filters.Count;i++)
{
GridFilter gf = GridFilters.Filters[i];
if(gf.DataIndex.Equals(field))
{
gf.Active = true;
switch(gf.Type)
{
case Ext.Net.FilterType.String:
{
Ext.Net.StringFilter gf2 = gf as Ext.Net.StringFilter;
gf2.Value = nodValues[0].InnerText;
break;
}
case Ext.Net.FilterType.Date:
{
Ext.Net.DateFilter gf2 = gf as Ext.Net.DateFilter;
for(int j = 0;j < argsList.Count;j++)
{
args = argsList[j];
FilterComparison = args.SelectSingleNode("comparison").InnerText;
Ext.Net.Comparison comparison = (Ext.Net.Comparison)Enum.Parse(typeof(Ext.Net.Comparison), FilterComparison, true);
DateTime v;
if(DateTime.TryParse(args.SelectSingleNode("value").InnerText, out v))
{
switch(comparison)
{
case Comparison.Lt: gf2.BeforeValue = v; break;
case Comparison.Gt: gf2.AfterValue = v; break;
case Comparison.Eq: gf2.OnValue = v; break;
}
}
}
break;
}
case Ext.Net.FilterType.List:
{
Ext.Net.ListFilter gf2 = gf as Ext.Net.ListFilter;
gf2.Value = new string[nodValues.Count];
for(int j = 0;j < nodValues.Count;j++)
gf2.Value[j] = nodValues[j].InnerText;
break;
}
case Ext.Net.FilterType.Boolean:
{
Ext.Net.BooleanFilter gf2 = gf as Ext.Net.BooleanFilter;
gf2.Value = (nodValues[0].InnerText.ToLower() == "true");
break;
}
case Ext.Net.FilterType.Numeric:
{
Ext.Net.NumericFilter gf2 = gf as Ext.Net.NumericFilter;
for(int j = 0;j < argsList.Count;j++)
{
args = argsList[j];
FilterComparison = args.SelectSingleNode("comparison").InnerText;
Ext.Net.Comparison comparison = (Ext.Net.Comparison)Enum.Parse(typeof(Ext.Net.Comparison), FilterComparison, true);
float v;
if(float.TryParse(args.SelectSingleNode("value").InnerText, out v))
{
switch(comparison)
{
case Comparison.Lt: gf2.LessThanValue = v; break;
case Comparison.Gt: gf2.GreaterThanValue = v; break;
case Comparison.Eq: gf2.EqualValue = v; break;
}
}
}
break;
}
}
}
}
}
}
}
}
#endregion
grdCurent.StoreID = currentStore.ID;
currentStore.DataBind();
}
GridFilters.ResumeEvents();
grdCurent.ResumeEvents();
currentStore.ResumeEvents();
}
</script>
<script type="text/javascript">
function getSettings(grid) {
var settings = {
sortState: {},
columns: [],
groupField: "",
filter: []
};
var cm = grid.getColumnModel();
for (var i = 0, len = cm.config.length; i < len; i++) {
settings.columns.push({ dataIndex: cm.getDataIndex(i), width: cm.getColumnWidth(i), hidden: cm.isHidden(i) || false });
}
settings.sortState = grid.store.getSortState() || { field: "", direction: "" };
settings.groupField = grid.store.groupField || "";
grid.getFilterPlugin().filters.each(function(f) {
if (f.active) {
settings.filter.push({ field: f.dataIndex, args: f.serialize() });
}
});
return Ext.encode({ settings: [settings] });
}
</script>
</head>
<body>
<ext:ResourceManager ID="ScriptManager1" runat="server" StateProvider="None" />
<ext:Store runat="server" ID="Store1" AutoLoad="true" RemoteSort="true" GroupField="Size">
<Reader>
<ext:JsonReader>
<Fields>
<ext:RecordField Name="Id" Type="Int" />
<ext:RecordField Name="Company" Type="String" />
<ext:RecordField Name="Price" Type="Float" />
<ext:RecordField Name="Date" Type="Date" DateFormat="Y-m-dTh:i:s" />
<ext:RecordField Name="Size" Type="String" />
<ext:RecordField Name="Visible" Type="Boolean" />
</Fields>
</ext:JsonReader>
</Reader>
<SortInfo Field="Company" Direction="ASC" />
</ext:Store>
<ext:Window ID="Window1" runat="server" Width="700" Height="400" Closable="false"
Collapsible="true" Title="Example" Maximizable="true" Layout="FitLayout">
<Items>
<ext:GridPanel ID="GridPanel1" StoreID="Store1" runat="server" Region="Center" Layout="vbox"
StripeRows="true" Border="true" TrackMouseOver="true" AutoExpandMax="300" AutoExpandMin="100"
AutoExpandColumn="Company">
<LayoutConfig>
<ext:VBoxLayoutConfig Align="Stretch" />
</LayoutConfig>
<ColumnModel ID="ColumnModel1" runat="server">
<Columns>
<ext:Column Header="Id" DataIndex="Id" Sortable="true" />
<ext:Column Header="Company" DataIndex="Company" Sortable="true" />
<ext:Column Header="Price" DataIndex="Price" Sortable="true">
<Renderer Format="UsMoney" />
</ext:Column>
<ext:Column Header="Date" DataIndex="Date" Sortable="true" Align="Center">
<Renderer Fn="Ext.util.Format.dateRenderer('Y-m-d')" />
</ext:Column>
<ext:Column Header="Size" DataIndex="Size" Sortable="true" />
<ext:Column Header="Visible" DataIndex="Visible" Sortable="true" Align="Center">
<Renderer Handler="return (value) ? 'Yes':'No';" />
</ext:Column>
</Columns>
</ColumnModel>
<View>
<ext:GroupingView runat="server">
</ext:GroupingView>
</View>
<LoadMask ShowMask="true" />
<Plugins>
<ext:GridFilters runat="server" ID="GridFilters1" Local="true">
<Filters>
<ext:NumericFilter DataIndex="Id" />
<ext:StringFilter DataIndex="Company" />
<ext:NumericFilter DataIndex="Price" />
<ext:DateFilter DataIndex="Date">
<DatePickerOptions runat="server" TodayText="Now" />
</ext:DateFilter>
<ext:ListFilter DataIndex="Size" Options="extra small,small,medium,large,extra large" />
<ext:BooleanFilter DataIndex="Visible" />
</Filters>
</ext:GridFilters>
</Plugins>
</ext:GridPanel>
</Items>
<Buttons>
<ext:Button runat="server" Text="Save settings">
<DirectEvents>
<Click OnEvent="SaveSettings">
<ExtraParams>
<ext:Parameter Name="settings" Value="getSettings(#{GridPanel1})" Mode="Raw">
</ext:Parameter>
</ExtraParams>
</Click>
</DirectEvents>
</ext:Button>
<ext:Button ID="Button1" runat="server" Text="Reload">
<Listeners>
<Click Handler="window.location.reload();" />
</Listeners>
</ext:Button>
</Buttons>
</ext:Window>
</body>
</html>
