GridPanel grouping feature problem

**gefran** · Jul 02, 2015, 7:46 PM

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>

**Dimitris** · Jul 06, 2015, 12:40 PM

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.

**gefran** · Jul 06, 2015, 5:44 PM

Hi Dimitris,

Thank you for your answer.

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

Thanks again !

**Dimitris** · Jul 08, 2015, 10:10 AM

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.

**gefran** · Jul 10, 2015, 11:16 PM

Hi Dimitris, it works great!!

Thanks for your help!

Thread: GridPanel grouping feature problem

Thread Tools

Search Thread

Display

GridPanel grouping feature problem

Similar Threads

[FIXED] [#431] [3.2.1] Ext.Net GridPanel with Grouping Feature sometimes hide groups appearing after the expanded group.

[CLOSED] v.3 Enable/Disable Grid Grouping Feature

Grouping Feature with Custom sorting

[CLOSED] Feature Grouping

[CLOSED] Gridpanel with grouping feature , issues with group checkbox.

Tags for this Thread

Posting Permissions

Sitemap

Downloads

Resources

Thread: GridPanel grouping feature problem

GridPanel grouping feature problem

Similar Threads

Tags for this Thread

Posting Permissions

Sitemap

Downloads

Resources

Stay connected with us