To display parent grid text box values into child grid combo box controls

  1. #1

    To display parent grid text box values into child grid combo box controls

    I have parent grid and Child grid control, If I entered value in Location field of the Parent grid then I need to display that values into the child grid combo box address field via store.

    The default Text is "Main Office" and value should be "0" in the location of the parent grid.

    Screens:
    Click image for larger version. 

Name:	Linked Screen.JPG 
Views:	6 
Size:	32.9 KB 
ID:	24240

    Issue:

    I just entered the Text "Russia" and "Singapore" on the Location Text box of the Parent Grid.

    I am able to see that all three values in the Address combo box of the Child grid.

    But I am not able to select values "Russia" and "Singapore", because I am getting "0 Value in the binding value of the

    combo box.

    How to add and bind increment value for "Russia" and "Singapore" ( Like values 1 & 2) in the Address Combo box

    How can I acheive this tasks.Please help me on this.

    I reproduce the sample test case and find the below code.

    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="TestLoadCombo.aspx.cs" Inherits="JobsPortal.TestLoadCombo" %>
    
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
    <%@ Import Namespace="System.Collections.Generic" %>
    
    
    <script runat="server">
        protected void Page_Load(object sender, EventArgs e)
        {
            this.storeAddress.DataSource = Address.GetAll();
            this.storeAddress.DataBind();
           
            
        }
    
        
        public class Address
        {
            public int ID { get; set; }
            public string Location { get; set; }
            public string Fax { get; set; }
    
            public static List<Address> GetAll()
            {
                return new List<Address>
                           {
                               new Address {ID = 0, Location = "Main Office",Fax="12345"}
                              
                           };
            }
        }
    </script>
    
    <!DOCTYPE html>
    
    <html>
    <head id="Head1" runat="server">
        <title>Retrieving Parent grid Text data into child grid combo box</title>
        <link href="/resources/css/examples.css" rel="stylesheet" />
    
        <script>
            var AddressRenderer = function (value) {
                
                var r = App.storeAddress.getById(value);
                
                if (Ext.isEmpty(r)) {
                    return "";
                }
                return r.data.Location;
            };
    
           
        </script>
    </head>
    <body>
        <form id="Form1" runat="server">
            <ext:ResourceManager ID="ResourceManager1" runat="server" />
            
             <ext:Store ID="storeAddress" runat="server">
                <Model>
                    <ext:Model ID="Model3" runat="server" IDProperty="ID">
                        <Fields>
                            <ext:ModelField Name="ID" Type="Int" />
                            <ext:ModelField Name="Location" />
                             <ext:ModelField Name="Fax" />
                        </Fields>
                    </ext:Model>
                </Model>
            </ext:Store>
    
         
            <ext:Store ID="StoreLocation" runat="server">
                        <Model>
                            <ext:Model ID="Model2" runat="server" IDProperty="ID">
                                <Fields>
                                    <ext:ModelField Name="ID" Type="Int" />
                                    <ext:ModelField Name="Name" />                            
                                    <ext:ModelField Name="AddressID" />
                                </Fields>
                            </ext:Model>
                        </Model>
             </ext:Store>
            
    
            <ext:Panel ID="Panel1" 
                runat="server" 
                Title="Parent Grid"
                Width="600" 
                Height="200"
                Layout="FitLayout">
                <Items>
              <ext:GridPanel ID="grdpnlEmployerProfile_Address" 
                Height="100"
                runat="server"
                Title="Address Parent Grid" 
                Icon="Application" StoreID="storeAddress">
                   <TopBar>
    				 <ext:Toolbar ID="tlbrEmployerProfile_Address" runat="server">
    					<Items>
    					<ext:Button ID="btnNewEmployerProfile_Address" runat="server" Icon="Add" Text="New">
    					<Listeners>  
                        <Click Handler="var grid1 = #{grdpnlEmployerProfile_Address},
                         store1 = grid1.store;                                                              
                         store1.insert(0, {                                                                                                                                   
    					});                                                                
    					#{grdpnlEmployerProfile_Address}.getView().refresh(false);
    					#{grdpnlEmployerProfile_Address}.getSelectionModel().select(0);
    					#{grdpnlEmployerProfile_Address}.getView().focusRow(0);
    					grid1.editingPlugin.startEdit(0, 1);" />  
                         </Listeners> 
                         </ext:Button>
    										        </Items>
    									        </ext:Toolbar>  
    								        </TopBar>
                                                                   
                              <ColumnModel ID="ColumnModel2" runat="server">
                    <Columns>
                         <ext:RowNumbererColumn ID="RowNumbererColumn2" runat="server" />	
                        <ext:Column ID="Column5" runat="server" Text="Location" DataIndex="Location" >
                        <Editor>
                        <ext:TextField ID="txtLocationName" runat="server" AllowBlank="False" MaxLength="20" MinWidth="5"></ext:TextField>
                        </Editor>
                        </ext:Column>
    
                        <ext:Column ID="Column6" runat="server" Text="Fax" DataIndex="Fax" >
                        <Editor>
                        <ext:TextField ID="txtFax" runat="server" AllowBlank="False" MaxLength="20" MinWidth="5"></ext:TextField>
                        </Editor>
                        </ext:Column>
                      
                        
                    </Columns>
                </ColumnModel>
                <Plugins>
                    <ext:CellEditing ID="CellEditing2" runat="server" />
                </Plugins>
            </ext:GridPanel>
                    </Items>
                </ext:Panel>
    
             <ext:Panel ID="Panel2" 
                runat="server" 
                Title="Child Grid"
                Width="600" 
                Height="200"
                Layout="FitLayout">
                <Items>
    
            <ext:GridPanel ID="grdpnLocation" 
                Height="100"
                runat="server"
                Title="Location Child Grid" 
                Icon="Application" StoreID="StoreLocation">
                 <TopBar>
    			<ext:Toolbar ID="Toolbar1" runat="server">
    				 <Items>
    				<ext:Button ID="Button1" runat="server" Icon="Add" Text="New">
    				 <Listeners>  
                    <Click Handler="var grid2 = #{grdpnLocation},
                     store2 = grid2.store;                                                              
                      store2.insert(0, {                                                                                                                                   
    				 });                                                                
    				 #{grdpnLocation}.getView().refresh(false);
    				#{grdpnLocation}.getSelectionModel().select(0);
    				#{grdpnLocation}.getView().focusRow(0);
    				grid2.editingPlugin.startEdit(0, 1);" />  
                     </Listeners> 
                     </ext:Button>
    				</Items>
    				</ext:Toolbar>  
    				</TopBar>
               
                <ColumnModel ID="ColumnModel1" runat="server">
                    <Columns>
                         <ext:RowNumbererColumn ID="RowNumbererColumn1" runat="server" />	                  
                        <ext:Column ID="Column2" runat="server" Text="NAME" DataIndex="Name" >  
                         <Editor>
                        <ext:TextField ID="TxtName" runat="server" AllowBlank="False" MaxLength="20" MinWidth="5"></ext:TextField>
                        </Editor>
                        </ext:Column>
                   
                        <ext:Column ID="Column4" runat="server" Text="ADDRESS" DataIndex="AddressID" Width="240">
             <Renderer Fn="AddressRenderer" />
                             
                            <Editor>
                                <ext:ComboBox ID="ComboBox1" 
                                    runat="server"     
                                    QueryMode="Local"   
                                    Editable="false"                     
                                    StoreID="storeAddress" 
                                    DisplayField="Location" 
                                    ValueField="ID"
                                    />
                            </Editor> 
                        </ext:Column>
                    </Columns>
                </ColumnModel>
                <Plugins>
                    <ext:CellEditing ID="CellEditing1" runat="server" />
                </Plugins>
            </ext:GridPanel>
                    </Items>
                 </ext:Panel>
        </form>
    </body>
    </html>
    Last edited by yenkarthi; Sep 21, 2015 at 11:04 AM. Reason: for alignment
  2. #2
    Hi @yenkarthi,

    You could try using a Model's idgen.
    <ext:Store ID="storeAddress" runat="server">
        <Model>
            <ext:Model ID="Model3" runat="server" IDProperty="ID">
                <Fields>
                    <ext:ModelField Name="ID" Type="Int" />
                    <ext:ModelField Name="Location" />
                        <ext:ModelField Name="Fax" />
                </Fields>
                <IDGen>
                    <ext:SequentialIdGenerator />
                </IDGen>
            </ext:Model>
        </Model>
    </ext:Store>
  3. #3
    It is working now, Thanks Daniil for your help and prompt response.

Similar Threads

  1. Replies: 1
    Last Post: Sep 09, 2014, 2:14 PM
  2. Replies: 1
    Last Post: May 22, 2014, 7:22 AM
  3. Replies: 0
    Last Post: May 13, 2011, 8:40 AM
  4. Replies: 0
    Last Post: May 13, 2011, 8:20 AM
  5. Replies: 0
    Last Post: Jun 23, 2010, 4:19 PM

Tags for this Thread

Posting Permissions