[CLOSED] Bind editor to nested class collection

  1. #1

    [CLOSED] Bind editor to nested class collection

    I have a class with a class collection as one of its properties. I would like to bind the main class to a gridpanel, and the class collection to an editor on in one of the grid columns. How do I do this? I started a sample to show what I'm trying to accomplish:

    <%@ Page Language="C#" %>
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
    <%@ Import Namespace="System.Collections.Generic" %>
    
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
    <script runat="server">
        protected void Page_Load(object sender, EventArgs e)
        {
            List<Customer> list = new List<Customer>(5);
     
            for (int i = 1; i <= 5; i++)
            {
                Customer customer = new Customer
                                        {
                                            ID = i,
                                            FirstName = ("FirstName" + i),
                                            LastName = ("LastName" + i),
                                            Company = ("Company" + i),
                                            Orders = new List<Order>()
                                        };
    
                for (int o = 1; o <= 3; o++)
                {
                    Order order = new Order
                                    {
                                        OrderId = i * o,
                                        ItemDescription = String.Format("Item {0}{1}", i, o)
                                    };
    
                    customer.Orders.Add(order);
                }
     
                list.Add(customer);
            }
     
            Store1.DataSource = list;
            Store1.DataBind();
        }
     
     
        public class Customer
        {
            public int ID { get; set; }
            public string FirstName { get; set; }
            public string LastName { get; set; }
            public string Company { get; set; }
            public List<Order> Orders { get; set; }
        }
     
        public class Order
        {
            public int OrderId { get; set; }
            public string ItemDescription { get; set; }
        }
    </script>
    
    <html xmlns="http://www.w3.org/1999/xhtml" >
    <head runat="server">
        <title></title>
    </head>
    <body>
        <form id="form1" runat="server">
            <ext:ResourceManager ID="ResourceManager1" runat="server" />
            
            <ext:Store runat="server" ID="Store1" AutoLoad="true">
                <Reader>
                    <ext:JsonReader>
                        <Fields>
                            <ext:RecordField Name="ID" Type="Int" />
                            <ext:RecordField Name="FirstName" />
                            <ext:RecordField Name="LastName" />
                            <ext:RecordField Name="Company" />
                            <ext:RecordField Name="Orders" IsComplex="true" />
                        </Fields>
                    </ext:JsonReader>
                </Reader>
            </ext:Store>
             
             <ext:GridPanel
                ID="GridPanel1"
                runat="server"
                Title="Customers"
                Height="300"
                StoreID="Store1">
                <ColumnModel ID="ColumnModel1" runat="server">
                    <Columns>
                        <ext:Column Header="ID" DataIndex="ID" />
                        <ext:Column Header="FirstName" DataIndex="FirstName"  />
                        <ext:Column Header="LastName" DataIndex="LastName" />
                        <ext:Column Header="Company" DataIndex="Company" />           
                        <ext:Column Header="Select Order">
                            <Editor>
                                <ext:ComboBox 
                                    ID="OrderSelection" 
                                    runat="server" 
                                    DisplayField="ItemDescription" 
                                    ValueField="OrderId" />
                            </Editor>
                        </ext:Column>
                    </Columns>
                </ColumnModel>
                <LoadMask ShowMask="true" />
            </ext:GridPanel> 
        </form>
    </body>
    </html>
    Last edited by Daniil; May 02, 2011 at 8:05 PM. Reason: [CLOSED]
  2. #2
    Hi,

    Please investigate the sample.

    Example
    <%@ Page Language="C#" %>
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
    <%@ Import Namespace="System.Collections.Generic" %>
     
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
     
    <script runat="server">
        protected void Page_Load(object sender, EventArgs e)
        {
            List<Customer> list = new List<Customer>(5);
      
            for (int i = 1; i <= 5; i++)
            {
                Customer customer = new Customer
                                        {
                                            ID = i,
                                            FirstName = ("FirstName" + i),
                                            LastName = ("LastName" + i),
                                            Company = ("Company" + i),
                                            Orders = new List<Order>(),
                                            CurrentOrder = i * 1
                                        };
     
                for (int o = 1; o <= 3; o++)
                {
                    Order order = new Order
                                    {
                                        OrderId = i * o,
                                        ItemDescription = String.Format("Item {0}{1}", i, o)
                                    };
     
                    customer.Orders.Add(order);
                }
      
                list.Add(customer);
            }
      
            Store1.DataSource = list;
            Store1.DataBind();
        }
      
      
        public class Customer
        {
            public int ID { get; set; }
            public string FirstName { get; set; }
            public string LastName { get; set; }
            public string Company { get; set; }
            public List<Order> Orders { get; set; }
            public int CurrentOrder { get; set; }
        }
      
        public class Order
        {
            public int OrderId { get; set; }
            public string ItemDescription { get; set; }
        }
    </script>
     
    <html xmlns="http://www.w3.org/1999/xhtml" >
    <head runat="server">
        <title>Ext.Net Example</title>
        
        <script type="text/javascript">
            var orderRenderer = function (value, metadata, record) {
                Ext.each(record.data.Orders, function (order) {
                    if (value === order.OrderId) {
                        value = order.ItemDescription;
                        return false;
                    }
                });
                return value;
            }
            
            var onBeforeStartEdit = function (editor, boundEl, value) {
                editor.field.store.loadData(editor.record.data.Orders);
            }
        </script>
    </head>
    <body>
        <form runat="server">
            <ext:ResourceManager runat="server" />
             
            <ext:Store ID="Store1" runat="server">
                <Reader>
                    <ext:JsonReader>
                        <Fields>
                            <ext:RecordField Name="ID" Type="Int" />
                            <ext:RecordField Name="FirstName" />
                            <ext:RecordField Name="LastName" />
                            <ext:RecordField Name="Company" />
                            <ext:RecordField Name="Orders" IsComplex="true" />
                            <ext:RecordField Name="CurrentOrder" Type="Int" />
                        </Fields>
                    </ext:JsonReader>
                </Reader>
            </ext:Store>
            
            <ext:Store ID="Store2" runat="server">
                <Reader>
                    <ext:JsonReader>
                        <Fields>
                            <ext:RecordField Name="OrderId" Type="Int" />
                            <ext:RecordField Name="ItemDescription" />
                        </Fields>
                    </ext:JsonReader>
                </Reader>
            </ext:Store>
              
             <ext:GridPanel
                runat="server"
                Title="Customers"
                Height="300"
                StoreID="Store1">
                <ColumnModel  runat="server">
                    <Columns>
                        <ext:Column Header="ID" DataIndex="ID" />
                        <ext:Column Header="FirstName" DataIndex="FirstName"  />
                        <ext:Column Header="LastName" DataIndex="LastName" />
                        <ext:Column Header="Company" DataIndex="Company" />           
                        <ext:Column Header="Select Order" DataIndex="CurrentOrder">
                            <Renderer Fn="orderRenderer" />
                            <Editor>
                                <ext:ComboBox
                                    ID="OrderSelection"
                                    runat="server"
                                    DisplayField="ItemDescription"
                                    ValueField="OrderId"
                                    StoreID="Store2"
                                    Mode="Local">
                                </ext:ComboBox>
                            </Editor>
                            <EditorOptions >
                                <Listeners>
                                    <BeforeStartEdit Fn="onBeforeStartEdit" />
                                </Listeners>
                            </EditorOptions>
                        </ext:Column>
                    </Columns>
                </ColumnModel>
                <LoadMask ShowMask="true" />
            </ext:GridPanel> 
        </form>
    </body>
    </html>
  3. #3
    Excellent! Thanks!

Similar Threads

  1. [CLOSED] Nested data in nested grids
    By FAS in forum 1.x Premium Help
    Replies: 16
    Last Post: Apr 19, 2012, 7:51 PM
  2. Replies: 0
    Last Post: Nov 20, 2009, 6:57 AM
  3. Replies: 0
    Last Post: Jun 15, 2009, 8:47 AM
  4. how to bind store with HashTable Collection
    By akash in forum 1.x Help
    Replies: 3
    Last Post: May 21, 2009, 2:11 AM
  5. Nested UpdatePanel + Tabs + Editor
    By ljcorreia in forum Bugs
    Replies: 2
    Last Post: Aug 15, 2008, 2:41 PM

Tags for this Thread

Posting Permissions