[CLOSED] [#144] GridPanel - Parent/Child

  1. #1

    [CLOSED] [#144] GridPanel - Parent/Child

    Do you have an example (MVC & Razor preferred) for configuring/populating a grid for parent/child hierarchy such as something like orders/order details?
    Last edited by Daniil; Feb 12, 2013 at 8:26 AM. Reason: [CLOSED] [#144]
  2. #2
    Hi,

    We have no such examples on Razor engine yet, but hope to implement soon.

    Here are the examples on WebForm engine.
    https://examples2.ext.net/#/GridPane...s/One-to-Many/
    https://examples2.ext.net/#/GridPane...etails_Window/
    https://examples2.ext.net/#/GridPane.../Form_Details/
  3. #3
    Ok, maybe I should rephrase. I am trying to create a hiearchal/nested/recursive grid. Something roughly like this:
    Click image for larger version. 

Name:	gridSample.GIF 
Views:	225 
Size:	13.9 KB 
ID:	4707
  4. #4
    I guess that TreeGrid can be useful in such scenario
    https://examples2.ext.net/#/TreePane...nced/TreeGrid/

    Also you can review RowExapander sample
    https://examples2.ext.net/#/GridPane...ic_GridPanels/
  5. #5
    Sorry to keep dragging this out. However, for both examples, is there any way to use binding and templating to configure the control to the model, or am I seeing that the output would need to be generated manually? Also, I need to be able to edit the data in my grid. Is that possible in these scenarios (tree/row expanded)?
  6. #6
    TreeGrid is just tree with columns. How do you want to bind model to the tree? All you need to provide root node with children or configure store to read data remotelly. If your model is Node then you can set it as Root node

    Can you provide links, for example on other toolkits, demonstrates bindign model to a tree? Or any mockup code? Just investigate what you expect to see

    Also, I need to be able to edit the data in my grid.
    TreeGrid supports editing plugins
  7. #7
    To be clear, I wasn't really looking for a tree. Instead, I was looking for a complex or parent/child grid. Since you asked for examples, here are some:
    (For simplicity, they are all ASPX, but most, if not all, include an MVC version too)

    http://demos.telerik.com/aspnet-ajax...defaultcs.aspx (For example, MVC - http://demos.telerik.com/aspnet-mvc/...rchyserverside)
    http://www.infragistics.com/products...cal-data-grid/
    http://demos.devexpress.com/ASPxGrid...terDetail.aspx
    http://www.obout.com/grid/aspnet_mas...ncallback.aspx
    http://aspnetajax.componentart.com/c.../WebForm1.aspx

    For most of these, you can mainipulate the header/footer of the child grids just like the parent. Sub-grids can have a single header, templated format, etc. Additionally, they are all (at least from my recollection) editable even though that isn't demonstrated with too many of the hierarchical grids. Of course some of the products have TREE grids as well, and even most of those are editable as well. (http://demos.telerik.com/aspnet-ajax...defaultcs.aspx)

    I am trying to replicate something of this nature. Hope this helps.
  8. #8
    Ext.Net grid has no built in detail view, it can be achieved via RowExpander but RowExpander is not related with the grid therefore all must be configured manually (what render to row expander, like in online sample)

    It is interesting feature, we will try to implement it after 2.1 release
  9. #9
    Created an Issue to track this feature request.
    https://github.com/extnet/Ext.NET/issues/144
  10. #10
    Parent/Child conception can be easly implemented with RowExpander and Associations

    One to one
    <%@ Page Language="C#" %>
    
    
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
    
    
    <script runat="server">
        protected void Page_Load(object sender, EventArgs e)
        {
            PersonsStore.Data = this.Persons;
        }
    
    
        public List<Person> Persons
        {
            get
            {
                return new List<Person> 
                { 
                    new Person(1, "John Smith", new Address(1, "1", "Cross Street 11/1", "Big City", "123456" )),
                    new Person(2, "Jane Brown", new Address(2, "2", "Cross Street 12/2", "Big City", "654321" )),
                    new Person(3, "Kevin Jones", new Address(3, "3", "Cross Street 13/3", "Big City", "321654" ))
                };
            }
        }
    
    
        public class Address
        {
            public Address(int id, string number, string street, string city, string zip)
            {
                this.Id = id;
                this.Number = number;
                this.Street = street;
                this.City = city;
                this.Zip = zip;
            }
            
            public int Id
            {
                get;
                private set;
            }
    
    
            public string Number
            {
                get;
                private set;
            }
    
    
            public string Street
            {
                get;
                private set;
            }
            
            public string City
            {
                get;
                private set;
            }
    
    
            public string Zip
            {
                get;
                private set;
            }
        }
    
    
        public class Person
        {
            public Person(int id, string name, Address address)
            {
                this.Id = id;
                this.Name = name;
                this.Address = address;
            }
    
    
            public int Id
            {
                get;
                private set;
            }
    
    
            public string Name
            {
                get;
                private set;
            }
            
            public Address Address
            {
                get;
                private set;
            }
        }
    </script>
    
    
    <!DOCTYPE html>
    
    
    <html>
    <head runat="server">
        <title>Simple HasOne Association - Ext.NET Examples</title>
        <link href="/resources/css/examples.css" rel="stylesheet" />    
    </head>
    <body>
        <ext:ResourceManager runat="server" />
        
        <h1>Simple HasOne Association</h1>
    
    
        <ext:Model runat="server" Name="Address" IDProperty="Id">
            <Fields>
                <ext:ModelField Name="Id" Type="Int" />
                <ext:ModelField Name="Number" />
                <ext:ModelField Name="Street" />
                <ext:ModelField Name="City" />
                <ext:ModelField Name="Zip" />
            </Fields>        
        </ext:Model>  
        
        <ext:Store ID="PersonsStore" runat="server">                        
            <Model>
                    <ext:Model runat="server" Name="Person" IDProperty="Id">
                    <Fields>
                        <ext:ModelField Name="Id" Type="Int" />
                        <ext:ModelField Name="Name" />
                    </Fields>
                    <Associations>
                        <ext:HasOneAssociation Model="Address" AssociationKey="Address" />
                    </Associations>
                </ext:Model>
            </Model>
        </ext:Store>
    
    
         <ext:GridPanel 
            runat="server" 
            StoreID="PersonsStore"
            Title="Persons with RowExpander" 
            Width="500" 
            Height="250">                
            <ColumnModel>
                <Columns>
                    <ext:Column runat="server" Text="Name" DataIndex="Name" Flex="1" />
                </Columns>            
            </ColumnModel>       
            <Plugins>
                <ext:RowExpander runat="server" SingleExpand="false">
                    <Component>
                        <ext:FormPanel 
                            runat="server" 
                            BodyPadding="5">                
                            <Items>
                                <ext:DisplayField runat="server" FieldLabel="ID" Name="Id" />
                                <ext:DisplayField runat="server" FieldLabel="Number" Name="Number" />
                                <ext:DisplayField runat="server" FieldLabel="Street" Name="Street" />
                                <ext:DisplayField runat="server" FieldLabel="City" Name="City" />
                                <ext:DisplayField runat="server" FieldLabel="Zip" Name="Zip" />
                            </Items>
                            <Listeners>
                                <AfterRender Handler="this.record.getAddress(function(address){this.getForm().loadRecord(address);}, this);" />    
                            </Listeners>
                        </ext:FormPanel>
                    </Component>
                </ext:RowExpander>
            </Plugins>               
        </ext:GridPanel>
    </body>
    </html>
    One to many
    <%@ 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;
            }
        }
    </script>
    
    
    <!DOCTYPE html>
    
    
    <html>
    <head runat="server">
        <title>Simple HasMany Association - Ext.NET Examples</title>
        <link href="/resources/css/examples.css" rel="stylesheet" />    
    </head>
    <body>
        <ext:ResourceManager runat="server" />
        
        <h1>Simple HasMany Association</h1>
    
    
        <ext:Model 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 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 
            runat="server" 
            StoreID="Store1"
            Title="Users with RowExpander" 
            Width="500" 
            Height="250">                
            <ColumnModel>
                <Columns>
                    <ext:Column runat="server" Text="Name" DataIndex="Name" Flex="1" />
                </Columns>            
            </ColumnModel>
            <Plugins>
                <ext:RowExpander runat="server" SingleExpand="false">
                    <Component>
                        <ext:GridPanel 
                            runat="server" 
                            Title="Products">
                            <Store>
                                <ext:Store runat="server" ModelName="Product" />                        
                            </Store>
                            <ColumnModel>
                                <Columns>
                                    <ext:Column runat="server" Text="Name" DataIndex="Name" Flex="1" />
                                </Columns>            
                            </ColumnModel>  
                            <Listeners>
                                <AfterRender Handler="this.bindStore(this.record.products());" />
                            </Listeners>                          
                        </ext:GridPanel>
                    </Component>
                </ext:RowExpander>
            </Plugins>           
        </ext:GridPanel>
    </body>
    </html>
    We updated Association examples in SVN to demonstrate associations with RowExpander

Similar Threads

  1. Replies: 1
    Last Post: May 29, 2012, 8:51 AM
  2. Replies: 5
    Last Post: Mar 29, 2012, 9:31 PM
  3. Replies: 6
    Last Post: Feb 01, 2010, 4:30 PM
  4. Treepanel - get child values of selected parent
    By Tbaseflug in forum 1.x Help
    Replies: 2
    Last Post: Nov 10, 2009, 11:28 AM
  5. display issue on Parent/Child window
    By egodoy in forum 1.x Help
    Replies: 1
    Last Post: Mar 24, 2009, 5:02 PM

Tags for this Thread

Posting Permissions