[CLOSED] Selecting a ComboBox value and filling a GridPanel from the ComboBox...

  1. #1

    [CLOSED] Selecting a ComboBox value and filling a GridPanel from the ComboBox...



    I have a combo box on the page that drives the data displayed in my GridPanel. I can't seem to get the combo box to fill correctly on the page load. The combo box is blank by default and the grid panel is empty (instead of starting with ID=3 selected and the grid panel being filled with ParentID=3 items).

    How can I set the selected value of the combo box, and then reload the grid panel?


    <%@ Page Language="vb"%>
    <%@ Register Assembly="Coolite.Ext.Web" Namespace="Coolite.Ext.Web" TagPrefix="ext" %>
    <%@ Import Namespace="Helpers" %>
    
    
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head id="Head2" runat="server">    
        <script runat="server">   
            
            Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load            
                Dim cs As String = Connection.ConnectionString(Request.ServerVariables("SERVER_NAME"))
                SqlDataSourceParents.ConnectionString = cs
                SqlDataSourceChildren.ConnectionString = cs            
                
                'load the navigation menu
                If Not Page.IsPostBack Then
                    'get the ID of the page we are working on
                    Dim ID As Integer = 3
                    
                    'we want the 3rd item selected by default in the combo box
                    '   and we want the grid panel to fill with data from the 3rd item's ID
                    HiddenPageID.SetValue(ID)
                    cboParentID.SetValue(ID)
                End If
            End Sub
        </script>                    
    </head>
    <body>
        <form id="form1" runat="server">
        <ext:ScriptManager ID="ScriptManager1" runat="server" ScriptMode="Debug" InitScriptMode="Inline">
        </ext:ScriptManager>    
        
        <ext:Hidden runat="server" ID="HiddenPageID" Text="1"></ext:Hidden>      
        
        <asp:SqlDataSource ID="SqlDataSourceParents" 
                            runat="server"    
                            SelectCommand="_spGetSiblings" 
                            SelectCommandType="StoredProcedure" >          
            <SelectParameters>
                <asp:ControlParameter Name="PageID" ControlID="HiddenPageID" PropertyName="Value" />     
            </SelectParameters>        
        </asp:SqlDataSource>
        <ext:Store runat="server" ID="StoreParents" DataSourceID="SqlDataSourceParents" AutoLoad="false">
            <Reader>            
                <ext:JsonReader ReaderID="ID">              
                    <Fields>                
                        <ext:RecordField Name="ID" Type="Int"/>
                        <ext:RecordField Name="PageTitle" Type="String"/>
                    </Fields>            
                </ext:JsonReader>       
            </Reader>   
            <Listeners>
                <Load Handler="#{cboParentID}.setValue(#{HiddenPageID}.getValue());#{StoreChildren}.reload();" />
            </Listeners>
        </ext:Store>
        
        <asp:SqlDataSource ID="SqlDataSourceChildren" 
                            runat="server"    
                            SelectCommand="_spGetChildren" 
                            SelectCommandType="StoredProcedure" >          
            <SelectParameters>
                <asp:ControlParameter Name="PageID" ControlID="HiddenPageID" PropertyName="Value" />     
            </SelectParameters>        
        </asp:SqlDataSource>
        <ext:Store runat="server" ID="StoreChildren" DataSourceID="SqlDataSourceChildren" AutoLoad="TRUE">
            <Reader>            
                <ext:JsonReader ReaderID="ID">              
                    <Fields>                
                        <ext:RecordField Name="ID" Type="Int"/>
                        <ext:RecordField Name="PageTitle" Type="String"/>
                    </Fields>            
                </ext:JsonReader>       
            </Reader>   
        </ext:Store>
        
        <ext:ViewPort ID="ViewPort1" runat="server">
            <Body>
                <ext:Panel runat="server" id="Panel1" Border="true" Title="Page Properties" BodyStyle="padding:10px;" ButtonAlign="Center" Width="525">
                    <body>                                                                             
                     <ext:TableLayout ID="TableLayout1" runat="server" Columns="3">                                                        
                                <ext:Cell>
                                    <ext:Label runat="server" ID="Label4" Text="Parent Page:"></ext:Label>
                                </ext:Cell>
                                <ext:Cell ColSpan="2">
                                     <ext:ComboBox runat="server" ID="cboParentID" FieldLabel="Parent Page" StoreID="StoreParents" DisplayField="PageTitle" ValueField="ID">                                                    
                                        <Listeners>
                                            <Select Handler="#{HiddenPageID}.setValue(#{cboParentID}.getValue());#{StoreChildren}.reload();" />
                                        </Listeners>
                                    </ext:ComboBox>
                                </ext:Cell>
                                
                                <ext:Cell>
                                    <ext:Label runat="server" ID="Label5" Text="Children:"></ext:Label>
                                </ext:Cell>
                                <ext:Cell ColSpan="2">
                                    <ext:GridPanel runat="server" ID="GridPanelChildren" StoreID="StoreChildren" AutoHeight="true">
                                        <ColumnModel>
                                            <Columns> 
                                                <ext:Column DataIndex="PageTitle"></ext:Column>
                                            </Columns>
                                        </ColumnModel>
                                    </ext:GridPanel>
                                </ext:Cell>
                            </ext:TableLayout>                
                    </body>
                </ext:Panel>
            </Body>
       </ext:ViewPort>          
    </form>
    </body>
    </html>
    Here is the quick SQL scripts for my table and stored procedures
    SET ANSI_NULLS ON
    GO
    SET QUOTED_IDENTIFIER ON
    GO
    SET ANSI_PADDING ON
    GO
    CREATE TABLE [dbo].[_tblPages](
     [ID] [int] IDENTITY(1,1) NOT NULL,
     [PageTitle] [varchar](255),
     [ParentID] [int] NULL, 
     CONSTRAINT [PK__tblPages] PRIMARY KEY CLUSTERED 
    (
     [ID] ASC
    )WITH (PAD_INDEX  = OFF, STATISTICS_NORECOMPUTE  = OFF, IGNORE_DUP_KEY = OFF, ALLOW_ROW_LOCKS  = ON, ALLOW_PAGE_LOCKS  = ON) ON [PRIMARY]
    ) ON [PRIMARY]
    
    
    GO
    SET ANSI_PADDING OFF
    GO
    
    
    --add dummy data
    insert into _tblPages (PageTitle, Parentid) values ('Top Page 1', -1)
    insert into _tblPages (PageTitle, Parentid) values ('Top Page 2', -1)
    insert into _tblPages (PageTitle, Parentid) values ('Top Page 3', -1)
    insert into _tblPages (PageTitle, Parentid) values ('Sub Page 1-1', 1)
    insert into _tblPages (PageTitle, Parentid) values ('Sub Page 1-2', 1)
    insert into _tblPages (PageTitle, Parentid) values ('Sub Page 3-1', 3)
    insert into _tblPages (PageTitle, Parentid) values ('Sub Page 3-2', 3)
    ---------------------
    CREATE PROCEDURE [dbo].[_spGetChildren]
     @PageID int
    AS
    BEGIN
     SELECT ID, PageTitle FROM [_tblPages] where parentid = @pageid
    END
    GO
    
    
    CREATE PROCEDURE [dbo].[_spGetSiblings]
     @PageID int
    AS
    BEGIN
     SELECT ID, PageTitle FROM [_tblPages] where parentid = (select parentid from _tblPages where id = @pageid)
    END
    GO
    In my example:
    I want the
  2. #2

    RE: [CLOSED] Selecting a ComboBox value and filling a GridPanel from the ComboBox...

    Hi,

    Please see the following sample
    <%@ Page Language="C#" %>
    <%@ Import Namespace="System.Collections.Generic"%>
    
    <%@ Register Assembly="Coolite.Ext.Web" Namespace="Coolite.Ext.Web" TagPrefix="ext" %>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head id="Head1" runat="server">
        <title></title>
        
        <script runat="server">
            protected void Page_Load(object sender, EventArgs e)
            {
                if(!Ext.IsAjaxRequest)
                {
                    StoreParents.DataSource = new List<object>
                                                  {
                                                      new {ID = 1, PageTitle = "Title1"},
                                                      new {ID = 2, PageTitle = "Title2"},
                                                      new {ID = 3, PageTitle = "Title3"}
                                                  };
                    StoreParents.DataBind();
                    cboParentID.SelectedItem.Value = "3";
                    BindGrid("3");
                }
            }
            
            private void BindGrid(string id)
            {
                StoreChildren.DataSource = new List<object>
                                                  {
                                                      new {ID = 1, PageTitle = id+"_Title1"},
                                                      new {ID = 2, PageTitle = id+"_Title2"},
                                                      new {ID = 3, PageTitle = id+"_Title3"}
                                                  };
                StoreChildren.DataBind();
            }
            
            protected void GridRefresh(object sender, StoreRefreshDataEventArgs e)
            {
                BindGrid(cboParentID.SelectedItem.Value);
            }
        </script>
    </head>
    <body>
        <form id="form1" runat="server">
            <ext:ScriptManager ID="ScriptManager1" runat="server" ScriptMode="Debug" />
            
            <ext:Hidden runat="server" ID="HiddenPageID" Text="1"></ext:Hidden>      
            
            <ext:Store runat="server" ID="StoreParents">
                <Reader>            
                    <ext:JsonReader ReaderID="ID">              
                        <Fields>                
                            <ext:RecordField Name="ID" Type="Int"/>
                            <ext:RecordField Name="PageTitle" Type="String"/>
                        </Fields>            
                    </ext:JsonReader>       
                </Reader>               
            </ext:Store>
            
            <ext:Store runat="server" ID="StoreChildren" OnRefreshData="GridRefresh">
                <Reader>            
                    <ext:JsonReader ReaderID="ID">              
                        <Fields>                
                            <ext:RecordField Name="ID" Type="Int"/>
                            <ext:RecordField Name="PageTitle" Type="String"/>
                        </Fields>            
                    </ext:JsonReader>       
                </Reader>   
            </ext:Store>
            
            <ext:ViewPort ID="ViewPort1" runat="server">
                <Body>
                    <ext:Panel runat="server" id="Panel1" Border="true" Title="Page Properties" BodyStyle="padding:10px;" ButtonAlign="Center" Width="525">
                        <body>                                                                             
                         <ext:TableLayout ID="TableLayout1" runat="server" Columns="3">                                                        
                                    <ext:Cell>
                                        <ext:Label runat="server" ID="Label4" Text="Parent Page:"></ext:Label>
                                    </ext:Cell>
                                    <ext:Cell ColSpan="2">
                                         <ext:ComboBox runat="server" ID="cboParentID" 
                                                FieldLabel="Parent Page" 
                                                StoreID="StoreParents" 
                                                FireSelect&#111;nload="true"
                                                DisplayField="PageTitle" 
                                                ValueField="ID">                                                    
                                            <Listeners>
                                                <Select Handler="#{HiddenPageID}.setValue(#{cboParentID}.getValue());#{StoreChildren}.reload();" />
                                            </Listeners>
                                        </ext:ComboBox>
                                    </ext:Cell>
                                    
                                    <ext:Cell>
                                        <ext:Label runat="server" ID="Label5" Text="Children:"></ext:Label>
                                    </ext:Cell>
                                    <ext:Cell ColSpan="2">
                                        <ext:GridPanel runat="server" ID="GridPanelChildren" StoreID="StoreChildren" AutoHeight="true">
                                            <ColumnModel>
                                                <Columns> 
                                                    <ext:Column DataIndex="PageTitle"></ext:Column>
                                                </Columns>
                                            </ColumnModel>
                                            <LoadMask ShowMask="true" />
                                        </ext:GridPanel>
                                    </ext:Cell>
                                </ext:TableLayout>                
                        </body>
                    </ext:Panel>
                </Body>
            </ext:ViewPort>          
            
        </form>
    </body>
    </html>
  3. #3

    RE: [CLOSED] Selecting a ComboBox value and filling a GridPanel from the ComboBox...



    Great so far... the correct item in the ComboBox is selected on Page Load now... However, teh datagrid is still filled the incorrect items, It should somehow reload using the ID 3 that is set in the ComboBox.

    :)
  4. #4

    RE: [CLOSED] Selecting a ComboBox value and filling a GridPanel from the ComboBox...

     Hi,

    In my example GridPanel loads correctly (with prefix 3_)
    You can do it same


  5. #5

    RE: [CLOSED] Selecting a ComboBox value and filling a GridPanel from the ComboBox...



    I am getting the data for my GridPanel from a sql reader:

    <asp:SqlDataSource ID="SqlDataSourceChildren" 
                            runat="server"    
                            SelectCommand="_spGetChildren" 
                            SelectCommandType="StoredProcedure" >          
            <SelectParameters>
                <asp:ControlParameter Name="PageID" ControlID="HiddenPageID" PropertyName="Value" />     
            </SelectParameters>        
        </asp:SqlDataSource>
        <ext:Store runat="server" ID="StoreChildren" DataSourceID="SqlDataSourceChildren" AutoLoad="true" OnRefreshData="GridRefresh">
            <Reader>            
                <ext:JsonReader ReaderID="ID">              
                    <Fields>                
                        <ext:RecordField Name="ID" Type="Int"/>
                        <ext:RecordField Name="PageTitle" Type="String"/>
                    </Fields>            
                </ext:JsonReader>       
            </Reader>   
            <Listeners>
                <Load Handler="alert(#{HiddenPageID}.getValue());" />
            </Listeners>
        </ext:Store>
    In your example, you are building the data using the id as a prefix, however, I get the parameter for the PageID from the HiddenPageID value. I am trying to set that in the page load:

    Dim ID As Integer = 3
    HiddenPageID.SetValue(ID)
                    
    If Not Ext.IsAjaxRequest Then
           StoreParents.DataBind()
           cboParentID.SelectedItem.Value = ID
           BindGrid(ID)
    End If
  6. #6

    RE: [CLOSED] Selecting a ComboBox value and filling a GridPanel from the ComboBox...

    Hi,

    SetValue method using during AjaxEvent. In your case just set Value directly


    HiddenPageID.Value = 3; 
  7. #7

    RE: [CLOSED] Selecting a ComboBox value and filling a GridPanel from the ComboBox...



    It seems to work if I use HiddenPageID.text = 3 instead of HiddenPageID.SetValue(3). Please mark this as solved.

    -Thanks

Similar Threads

  1. Replies: 4
    Last Post: May 16, 2012, 8:14 AM
  2. Replies: 1
    Last Post: May 11, 2012, 3:46 AM
  3. Selecting value from ComboBox after binding
    By alexp in forum 1.x Help
    Replies: 0
    Last Post: Mar 30, 2011, 9:48 AM
  4. ComboBox Selecting Value using Text
    By speddi in forum 1.x Help
    Replies: 2
    Last Post: Apr 19, 2010, 3:11 AM
  5. combobox item selecting bug ! please help
    By relativ in forum 1.x Help
    Replies: 0
    Last Post: Nov 24, 2009, 4:31 AM

Posting Permissions