GridPanel grouping feature problem

  1. #1

    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

    <%@ 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>
  2. #2
    Hello,

    Please, set the following GridFilters property:

    Local="true"
    The following example demonstrates:

    <%@ 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.
  3. #3
    Hi Dimitris,

    Thank you for your answer.

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

    Thanks again !
  4. #4
    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:

    <%@ 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.
  5. #5
    Hi Dimitris, it works great!!

    Thanks for your help!

Similar Threads

  1. Replies: 7
    Last Post: Jan 05, 2016, 11:35 PM
  2. [CLOSED] v.3 Enable/Disable Grid Grouping Feature
    By omazlov in forum 3.x Legacy Premium Help
    Replies: 2
    Last Post: May 19, 2015, 11:48 AM
  3. Grouping Feature with Custom sorting
    By glenh in forum 2.x Help
    Replies: 0
    Last Post: Jun 20, 2013, 5:44 AM
  4. [CLOSED] Feature Grouping
    By Akpenob in forum 2.x Legacy Premium Help
    Replies: 5
    Last Post: Apr 29, 2013, 4:51 AM
  5. Replies: 2
    Last Post: Mar 06, 2013, 3:45 PM

Tags for this Thread

Posting Permissions