[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:

Code:

<%@ 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>

Hi,

Please investigate the sample.

Example

Code:

<%@ 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>

Excellent! Thanks!