[CLOSED] Nested Grid w/Remote Filter

  1. #1

    [CLOSED] Nested Grid w/Remote Filter

    Hello,
    First I am trying to find out if what I am looking to do is even possible, and if so then what is the best approach to accomplish it. I started with the nested grid example in the HasMany section https://examples2.ext.net/#/Associat...asMany/Simple/

    What I would like to do is add Remote Filtering to the second level grid, so I set the Store property and added a PageProxy, but as soon as you add the proxy an empty RequestFailure error is thrown when you expand the second grid. I presume this due to conflict between the events for the Proxy and ViewReady listener. It's also not a requirement to do 'on-demand' loading of the second grid.

    Again I want to find out if this is possible before I go too far down the rabbit hole, but if it is get some guidance on the proper method.
    I'm using V2.5.1, .NET 4.0 and VS2010.

    <%@ Page Language="C#" %>
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
    <script runat="server">
        protected void Page_Load(object sender, EventArgs e)
        {
            Store1.Data = this.Users;
        }
        public List<User> Users
        {
            get
            {
                return new List<User> 
                { 
                    new User(1, "User1", new List<Product>{
                        new Product(1, "Product1 of User1"),
                        new Product(2, "Product2 of User1"),
                        new Product(3, "Product3 of User1")
                    }),
                    new User(2, "User2", new List<Product>{
                        new Product(4, "Product1 of User2"),
                        new Product(5, "Product2 of User2"),
                        new Product(6, "Product3 of User2")
                    }),
                    new User(3, "User3", new List<Product>{
                        new Product(7, "Product1 of User3"),
                        new Product(8, "Product2 of User3"),
                        new Product(9, "Product3 of User3")
                    })
                };
            }
        }
        public class Product
        {
            public Product(int id, string name)
            {
                this.Id = id;
                this.Name = name;
            }
            public int Id
            {
                get;
                private set;
            }
            public string Name
            {
                get;
                private set;
            }
        }
        public class User
        {
            public User(int id, string name, List<Product> products)
            {
                this.Id = id;
                this.Name = name;
                this.Products = products;
            }
            public int Id
            {
                get;
                private set;
            }
            public string Name
            {
                get;
                private set;
            }
            public List<Product> Products
            {
                get;
                private set;
            }
        }
        protected void Store2_Refresh(object sender, StoreReadDataEventArgs e)
        {
            string s = e.Parameters[this.GridFilters1.ParamPrefix];
            
            // Filter Logic
        }
    </script>
    <!DOCTYPE html>
    <html>
    <head id="Head1" runat="server">
        <title>Simple HasMany Association - Ext.NET Examples</title>
    </head>
    <body>
        <ext:ResourceManager ID="ResourceManager1" runat="server" />
        <h1>Simple HasMany Association</h1>
        <ext:Model ID="Model1" runat="server" Name="Product" IDProperty="Id">
            <Fields>
                <ext:ModelField Name="Id" Type="Int" />
                <ext:ModelField Name="Name" Type="String" />
            </Fields>        
        </ext:Model>
        <ext:Store ID="Store1" runat="server">
            <Model>
                <ext:Model ID="Model2" runat="server" Name="User" IDProperty="Id">
                    <Fields>
                        <ext:ModelField Name="Id" Type="Int" />
                        <ext:ModelField Name="Name" Type="String" />
                    </Fields>        
                    <Associations>
                        <ext:HasManyAssociation Model="Product" Name="products" AssociationKey="Products"/>
                    </Associations>
                </ext:Model>
            </Model>
        </ext:Store>
        <ext:GridPanel ID="GridPanel2" 
            runat="server" 
            StoreID="Store1"
            Title="Users with RowExpander" 
            Width="500" 
            Height="250">                
            <ColumnModel>
                <Columns>
                    <ext:Column ID="Column3" runat="server" Text="Name" DataIndex="Name" Flex="1" />
                </Columns>            
            </ColumnModel>
            <Plugins>
                <ext:RowExpander ID="RowExpander1" runat="server" SingleExpand="false">
                    <Component>
                        <ext:GridPanel ID="GridPanel3" runat="server" Title="Products">
                            <Store>
                                <ext:Store ID="Store2" runat="server" ModelName="Product" RemoteFilter="true" OnReadData="Store2_Refresh">
                                    <Proxy>
                                        <ext:PageProxy />
                                    </Proxy>                                
                                </ext:Store> 
                            </Store>
                            <ColumnModel>
                                <Columns>
                                    <ext:Column ID="Column4" runat="server" Text="Name" DataIndex="Name" Flex="1" />
                                </Columns>            
                            </ColumnModel>
                            <Features>
                                <ext:GridFilters ID="GridFilters1" runat="server" Local="false">
                                    <Filters>
                                        <ext:StringFilter DataIndex="Name"></ext:StringFilter>
                                    </Filters>
                                </ext:GridFilters>
                            </Features>
                            <Listeners>
                                <ViewReady Handler="this.bindStore(this.record.products());" Delay="1" />
                            </Listeners>           
                        </ext:GridPanel>
                    </Component>
                </ext:RowExpander>
            </Plugins>           
        </ext:GridPanel>
    </body>
    </html>
    Thanks,
    JW
    Last edited by Daniil; Sep 25, 2014 at 7:43 AM. Reason: [CLOSED]
  2. #2
    Hi @jwhitmire36,

    I think it is possible and it should be not quite difficult to achieve that.

    Though, not with a PageProxy and a Store's OnReadData. A Store's OnReadData is a DirectEvent. As any control's DirectEvent it requires a control instance on the server side with the specific ID. Since you set SingleExpand="false", that leads to an individual Store for each row. Also, the Store's ID is just ignored on client side, because it should be unique.

    So, I recommend to use a PageProxy with a DirectFn or an AjaxProxy.
  3. #3
    Hi Daniil,
    Thanks for the response. I see how to use the PageProxy and DirectFn to call a DirectMethod to load the second grid. What I'm not figuring out is how to pass custom parameter to the DirectMethod. The overload method I always use 'App.direct.directMethod(parm1) causes a javascript error:
    Error: Ext.JSON.decode(): You're trying to decode an invalid JSON String: App.direct.Store2_Load(this.record.Id);
    And this i not a DirectEvent so there are no EventArgs to use. Can you provide further assistance?

    I'm also wondering how I will get the Filter Parameters once I get to that task.

    Here's my updated example:
    <%@ Page Language="C#" %>
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
    <script runat="server">
        protected void Page_Load(object sender, EventArgs e)
        {
            Store1.Data = this.Users;
        }
        public List<User> Users
        {
            get
            {
                return new List<User> 
                { 
                    new User(1, "User1", new List<Product>{
                        new Product(1, "Product1 of User1"),
                        new Product(2, "Product2 of User1"),
                        new Product(3, "Product3 of User1")
                    }),
                    new User(2, "User2", new List<Product>{
                        new Product(4, "Product1 of User2"),
                        new Product(5, "Product2 of User2"),
                        new Product(6, "Product3 of User2")
                    }),
                    new User(3, "User3", new List<Product>{
                        new Product(7, "Product1 of User3"),
                        new Product(8, "Product2 of User3"),
                        new Product(9, "Product3 of User3")
                    })
                };
            }
        }
        public class Product
        {
            public Product(int id, string name)
            {
                this.Id = id;
                this.Name = name;
            }
            public int Id
            {
                get;
                private set;
            }
            public string Name
            {
                get;
                private set;
            }
        }
        public class User
        {
            public User(int id, string name, List<Product> products)
            {
                this.Id = id;
                this.Name = name;
                this.Products = products;
            }
            public int Id
            {
                get;
                private set;
            }
            public string Name
            {
                get;
                private set;
            }
            public List<Product> Products
            {
                get;
                private set;
            }
        }
        [DirectMethod]
        public object Store2_Load(int id)
        {
            int Id = id;
            return this.Users[Id].Products;
        }
    </script>
    <!DOCTYPE html>
    <html>
    <head id="Head1" runat="server">
        <title>Simple HasMany Association - Ext.NET Examples</title>
    </head>
    <body>
        <ext:ResourceManager ID="ResourceManager1" runat="server" />
        <h1>Simple HasMany Association</h1>
        <ext:Model ID="Model1" runat="server" Name="Product" IDProperty="Id">
            <Fields>
                <ext:ModelField Name="Id" Type="Int" />
                <ext:ModelField Name="Name" Type="String" />
            </Fields>        
        </ext:Model>
        <ext:Store ID="Store1" runat="server">
            <Model>
                <ext:Model ID="Model2" runat="server" Name="User" IDProperty="Id">
                    <Fields>
                        <ext:ModelField Name="Id" Type="Int" />
                        <ext:ModelField Name="Name" Type="String" />
                    </Fields>        
                    <Associations>
                        <ext:HasManyAssociation Model="Product" Name="products" AssociationKey="Products"/>
                    </Associations>
                </ext:Model>
            </Model>
        </ext:Store>
        <ext:GridPanel ID="GridPanel2" 
            runat="server" 
            StoreID="Store1"
            Title="Users with RowExpander" 
            Width="500" 
            Height="250">                
            <ColumnModel>
                <Columns>
                    <ext:Column ID="Column3" runat="server" Text="Name" DataIndex="Name" Flex="1" />
                </Columns>            
            </ColumnModel>
            <Plugins>
                <ext:RowExpander ID="RowExpander1" runat="server" SingleExpand="false">
                    <Component>
                        <ext:GridPanel ID="GridPanel3" runat="server" Title="Products">
                            <Store>
                                <ext:Store ID="Store2" runat="server" ModelName="Product" RemoteFilter="true">
                                    <Proxy>
                                        <ext:PageProxy DirectFn="App.direct.Store2_Load(this.record.Id);">
                                        </ext:PageProxy>
                                    </Proxy>                                
                                </ext:Store> 
                            </Store>
                            <ColumnModel>
                                <Columns>
                                    <ext:Column ID="Column4" runat="server" Text="Name" DataIndex="Name" Flex="1" />
                                </Columns>            
                            </ColumnModel>
                            <Features>
                                <ext:GridFilters ID="GridFilters1" runat="server" Local="false">
                                    <Filters>
                                        <ext:StringFilter DataIndex="Name"></ext:StringFilter>
                                    </Filters>
                                </ext:GridFilters>
                            </Features>
    
                        </ext:GridPanel>
                    </Component>
                </ext:RowExpander>
            </Plugins>           
        </ext:GridPanel>
    </body>
    </html>
    Thanks
  4. #4
    If you define
    [DirectMethod]
    public object Store2_Load(string action, Dictionary<string, object> extraParams)
    then you can retrieve parameters from the extraParams Dictionary.
  5. #5
    Sorry been off work for a couple days, but I have this working now. Thanks for your help! You can close this thread.

    JW

Similar Threads

  1. [CLOSED] remote filter dose not be triggered?
    By hdsoso in forum 2.x Legacy Premium Help
    Replies: 19
    Last Post: Jan 17, 2014, 10:17 PM
  2. Replies: 6
    Last Post: Oct 15, 2012, 6:20 AM
  3. Remote filter for Header Filter
    By huzzy143 in forum 1.x Help
    Replies: 2
    Last Post: May 09, 2012, 3:43 PM
  4. Remote Filter with HttpProxy
    By mkshields9w57 in forum 1.x Help
    Replies: 1
    Last Post: Oct 24, 2011, 2:50 PM
  5. Remote Filter always empty with DataContext
    By JIGSAW in forum 1.x Help
    Replies: 0
    Last Post: Feb 25, 2011, 12:38 PM

Posting Permissions