GridPanel grouping feature problem

Hi,

If I try to activate the menu of gridPanel located in 'Tab B' browser console generates the error "Uncaught TypeError: Cannot read property 'enable' of null". If I remove 'TAB A' or delete filter feature everything works fine.

Am I doing something wrong?

Tanks in advance,

P.D: using Ext.NET ver 2.5.2

Code:

<%@ Page Language="C#" %> <%@ Import Namespace="System.Collections.Generic" %> <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %> <!DOCTYPE html> <script runat="server"> protected void Page_Load(object sender, EventArgs e) { this.Store1.DataSource = new List<Class1> { new Class1(1, "P1", "T1.1", 1), new Class1(2, "P1", "T1.2", 4), new Class1(3, "P2", "T2.1", 3), new Class1(4, "P3", "T3.1", 5), new Class1(5, "P3", "T3.2", 4), }; } public class Class1 { public Class1(int pId, string pAtt1, string pAtt2, int pAtt3) { this.Id = pId; this.Att1 = pAtt1; this.Att2 = pAtt2; this.Att3 = pAtt3; } public int Id { get; set; } public string Att1 { get; set; } public string Att2 { get; set; } public int Att3 { get; set; } } </script> <html> <head runat="server"> <title>Test</title> </head> <body> <form runat="server"> <ext:ResourceManager runat="server" /> <ext:Store ID="Store1" runat="server"> <Model> <ext:Model ID="Model1" runat="server" IDProperty="Id"> <Fields> <ext:ModelField Name="Id" Type="Int" /> <ext:ModelField Name="Att1" /> <ext:ModelField Name="Att2" /> <ext:ModelField Name="Att3" Type="Int" /> </Fields> </ext:Model> </Model> </ext:Store> <ext:TabPanel ID="TabPanel1" runat="server"> <Items> <ext:FormPanel ID="FormPanel1" runat="server" Title="Tab A" /> <ext:GridPanel ID="GridPanel1" runat="server" StoreID="Store1" Title="Tab B"> <ColumnModel ID="ColumnModel1" runat="server"> <Columns> <ext:Column ID="Column1" runat="server" Text="Att1" DataIndex="Att1" Width="100" /> <ext:Column ID="Column2" runat="server" Text="Att2" DataIndex="Att2" Width="100" /> <ext:Column ID="Column3" runat="server" Text="Att3" DataIndex="Att3" /> </Columns> </ColumnModel> <Features> <ext:Grouping ID="Grouping1" runat="server" /> <ext:GridFilters ID="GridFilters1" runat="server" MenuFilterText="Filtros"> <Filters> <ext:StringFilter DataIndex="Att1" /> <ext:StringFilter DataIndex="Att2" /> <ext:NumericFilter DataIndex="Att3" /> </Filters> </ext:GridFilters> </Features> </ext:GridPanel> </Items> </ext:TabPanel> </form> </body> </html>

Hello,

Please, set the following GridFilters property:

Code:

Local="true"

The following example demonstrates:

Code:

<%@ Page Language="C#" %> <%@ Import Namespace="System.Collections.Generic" %> <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %> <!DOCTYPE html> <script runat="server"> protected void Page_Load(object sender, EventArgs e) { this.Store1.DataSource = new List<Class1> { new Class1(1, "P1", "T1.1", 1), new Class1(2, "P1", "T1.2", 4), new Class1(3, "P2", "T2.1", 3), new Class1(4, "P3", "T3.1", 5), new Class1(5, "P3", "T3.2", 4), }; } public class Class1 { public Class1(int pId, string pAtt1, string pAtt2, int pAtt3) { this.Id = pId; this.Att1 = pAtt1; this.Att2 = pAtt2; this.Att3 = pAtt3; } public int Id { get; set; } public string Att1 { get; set; } public string Att2 { get; set; } public int Att3 { get; set; } } </script> <html> <head runat="server"> <title>Test</title> </head> <body> <ext:ResourceManager runat="server" /> <ext:Store ID="Store1" runat="server"> <Model> <ext:Model ID="Model1" runat="server" IDProperty="Id"> <Fields> <ext:ModelField Name="Id" Type="Int" /> <ext:ModelField Name="Att1" /> <ext:ModelField Name="Att2" /> <ext:ModelField Name="Att3" Type="Int" /> </Fields> </ext:Model> </Model> </ext:Store> <ext:TabPanel ID="TabPanel1" runat="server"> <Items> <ext:FormPanel ID="FormPanel1" runat="server" Title="Tab A" /> <ext:GridPanel ID="GridPanel1" runat="server" StoreID="Store1" Title="Tab B"> <ColumnModel ID="ColumnModel1" runat="server" > <Columns> <ext:Column ID="Column1" runat="server" Text="Att1" DataIndex="Att1" Width="100" /> <ext:Column ID="Column2" runat="server" Text="Att2" DataIndex="Att2" Width="100" /> <ext:Column ID="Column3" runat="server" Text="Att3" DataIndex="Att3" /> </Columns> </ColumnModel> <Features> <ext:Grouping runat="server"/> <ext:GridFilters ID="GridFilters1" runat="server" MenuFilterText="Filtros" Local="true"> <Filters> <ext:StringFilter DataIndex="Att1" /> <ext:StringFilter DataIndex="Att2" /> <ext:NumericFilter DataIndex="Att3" /> </Filters> </ext:GridFilters> </Features> </ext:GridPanel> </Items> </ext:TabPanel> </body> </html>

The links to the related official examples, for your reference:
GridFilters Local
Grouping

Hope it helps.

Hi Dimitris,

Thank you for your answer.

For my application is important to perform server-side filtering.
Is there some workaround?

Thanks again !

Hi,

Please set DeferredRender="false" for the TabPanel. Also, you need to setup remote filtering properly, see: https://examples2.ext.net/#/GridPane...ilters_Remote/

This is how your code should look like:

Code:

<%@ Page Language="C#" %> <%@ Import Namespace="System.Collections.Generic" %> <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %> <!DOCTYPE html> <script runat="server"> protected void Store1_ReadData(object sender, StoreReadDataEventArgs e) { List<Class1> data = new List<Class1> { new Class1(1, "P1", "T1.1", 1), new Class1(2, "P1", "T1.2", 4), new Class1(3, "P2", "T2.1", 3), new Class1(4, "P3", "T3.1", 5), new Class1(5, "P3", "T3.2", 4), }; string s = e.Parameters[this.GridFilters1.ParamPrefix]; //-- start filtering ------------------------------------------------------------ if (!string.IsNullOrEmpty(s)) { FilterConditions fc = new FilterConditions(s); foreach (FilterCondition condition in fc.Conditions) { Comparison comparison = condition.Comparison; string field = condition.Field; FilterType type = condition.Type; object value; switch (condition.Type) { case FilterType.Boolean: value = condition.Value<bool>(); break; case FilterType.Date: value = condition.Value<DateTime>(); break; case FilterType.List: value = condition.List; break; case FilterType.Numeric: if (data.Count > 0 && data[0].GetType().GetProperty(field).PropertyType == typeof(int)) { value = condition.Value<int>(); } else { value = condition.Value<double>(); } break; case FilterType.String: value = condition.Value<string>(); break; default: throw new ArgumentOutOfRangeException(); } data.RemoveAll( item => { object oValue = item.GetType().GetProperty(field).GetValue(item, null); IComparable cItem = oValue as IComparable; switch (comparison) { case Comparison.Eq: switch (type) { case FilterType.List: return !(value as List<string>).Contains(oValue.ToString()); case FilterType.String: return !oValue.ToString().StartsWith(value.ToString()); default: return !cItem.Equals(value); } case Comparison.Gt: return cItem.CompareTo(value) < 1; case Comparison.Lt: return cItem.CompareTo(value) > -1; default: throw new ArgumentOutOfRangeException(); } } ); } } //-- end filtering ------------------------------------------------------------ this.GridPanel1.GetStore().DataSource = data; } public class Class1 { public Class1(int pId, string pAtt1, string pAtt2, int pAtt3) { this.Id = pId; this.Att1 = pAtt1; this.Att2 = pAtt2; this.Att3 = pAtt3; } public int Id { get; set; } public string Att1 { get; set; } public string Att2 { get; set; } public int Att3 { get; set; } } </script> <html> <head runat="server"> <title>Test</title> </head> <body> <ext:ResourceManager runat="server" /> <ext:Store ID="Store1" runat="server" OnReadData="Store1_ReadData"> <Proxy> <ext:PageProxy /> </Proxy> <Model> <ext:Model ID="Model1" runat="server" IDProperty="Id"> <Fields> <ext:ModelField Name="Id" Type="Int" /> <ext:ModelField Name="Att1" /> <ext:ModelField Name="Att2" /> <ext:ModelField Name="Att3" Type="Int" /> </Fields> </ext:Model> </Model> </ext:Store> <ext:TabPanel ID="TabPanel1" runat="server" DeferredRender="false"> <Items> <ext:Panel runat="server" Html="This is Tab A." Title="Tab A"> </ext:Panel> <ext:GridPanel ID="GridPanel1" runat="server" StoreID="Store1" Title="Tab B"> <ColumnModel ID="ColumnModel1" runat="server" > <Columns> <ext:Column ID="Column1" runat="server" Text="Att1" DataIndex="Att1" Width="100" /> <ext:Column ID="Column2" runat="server" Text="Att2" DataIndex="Att2" Width="100" /> <ext:Column ID="Column3" runat="server" Text="Att3" DataIndex="Att3" /> </Columns> </ColumnModel> <Features> <ext:Grouping runat="server"/> <ext:GridFilters ID="GridFilters1" runat="server" MenuFilterText="Filtros"> <Filters> <ext:StringFilter DataIndex="Att1" /> <ext:StringFilter DataIndex="Att2" /> <ext:NumericFilter DataIndex="Att3" /> </Filters> </ext:GridFilters> </Features> </ext:GridPanel> </Items> </ext:TabPanel> </body> </html>

Hope it helps.

Hi Dimitris, it works great!!

Thanks for your help!