Cascading ComboBox

2 posts, 1 answers
  1. Allan
    Allan avatar
    121 posts
    Member since:
    Jun 2008

    Posted 26 Oct 2011 Link to this post


    I have followed the cascading combobox sample and everthing seems to work. I am including my code for both the ASPX and VB below.

    My issue is that when the initial value is selected in the third como box I want to use the RadComboBox3.DataValueField to update a SqlDataSource and is used to fill a Radgrid. This does not happen nor does selecting another value in RadComboBox3 cause the SqlDataSource to update the grid. Any help much appreciated.

    ASPX
    <%@ Page Language="VB" AutoEventWireup="TRUE" CodeFile="Default3.aspx.vb" Inherits="Default3" %>
    <%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
     
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
     
    <head id="Head1" runat="server">
     
        <title></title>
     
    </head>
    <body>
        <form id="form1" runat="server">
    <telerik:RadScriptManager ID="RadScriptManager1" runat="server">
            </telerik:RadScriptManager>
            <div id="qsfexWrapper">
                <br />
                <br />
                <table cellpadding="0" cellspacing="0" class="style1">
                    <tr>
                        <td style="padding: 3px">
                <asp:Label ID="Label1" runat="server" AssociatedControlID="RadComboBox1">Account:</asp:Label>
                        </td>
                        <td style="padding: 3px">
                <telerik:RadComboBox ID="RadComboBox1"
                    runat="server"
                    Width="300px"
                    OnClientSelectedIndexChanging="Loadterminals"
                    OnItemsRequested="RadComboBox1_ItemsRequested" />
                 
                        </td>
                    </tr>
                    <tr>
                        <td style="padding: 3px">
                 
                <asp:Label ID="Label2" runat="server" AssociatedControlID="RadComboBox2">Terminal:</asp:Label>
                        </td>
                        <td style="padding: 3px">
                <telerik:RadComboBox ID="RadComboBox2"
                    runat="server"
                    Width="186px"
                    OnClientSelectedIndexChanging="Loadfleets"
                    OnClientItemsRequested="ItemsLoaded"
                    OnItemsRequested="RadComboBox2_ItemsRequested" />
                 
                        </td>
                    </tr>
                    <tr>
                        <td style="padding: 3px">
                 
                <asp:Label ID="Label3" runat="server" AssociatedControlID="RadComboBox3">Fleet:</asp:Label>
                        </td>
                        <td style="padding: 3px">
                <telerik:RadComboBox ID="RadComboBox3"
                    runat="server"
                    Width="186px"
                    OnClientItemsRequested="ItemsLoaded"
                    OnItemsRequested="RadComboBox3_ItemsRequested" />
                        </td>
                    </tr>
                    <tr>
                        <td style="padding: 3px">
                             </td>
                        <td style="padding: 3px">
                             </td>
                    </tr>
                </table>
                <br />
                <telerik:RadGrid ID="RadGrid1" runat="server" DataSourceID="SqlDataSource1">
    <MasterTableView AutoGenerateColumns="False" DataKeyNames="IDVehicles"
                        DataSourceID="SqlDataSource1">
    <CommandItemSettings ExportToPdfText="Export to Pdf"></CommandItemSettings>
     
    <RowIndicatorColumn>
    <HeaderStyle Width="20px"></HeaderStyle>
    </RowIndicatorColumn>
     
    <ExpandCollapseColumn>
    <HeaderStyle Width="20px"></HeaderStyle>
    </ExpandCollapseColumn>
        <Columns>
            <telerik:GridBoundColumn DataField="IDVehicles" DataType="System.Guid"
                HeaderText="IDVehicles" ReadOnly="True" SortExpression="IDVehicles"
                UniqueName="IDVehicles">
            </telerik:GridBoundColumn>
            <telerik:GridBoundColumn DataField="IDProfileFleet" DataType="System.Int32"
                HeaderText="IDProfileFleet" SortExpression="IDProfileFleet"
                UniqueName="IDProfileFleet">
            </telerik:GridBoundColumn>
        </Columns>
    </MasterTableView>
                </telerik:RadGrid>
                <br />
                <br />
                <asp:SqlDataSource ID="SqlDataSource1" runat="server"
                    ConnectionString="<%$ ConnectionStrings:CF_SQL_Connection %>"
                    SelectCommand="SELECT [IDVehicles], [IDProfileFleet] FROM [CF_Vehicles] WHERE ([IDProfileFleet] = @IDProfileFleet)">
                    <SelectParameters>
                        <asp:ControlParameter ControlID="RadComboBox3" Name="IDProfileFleet"
                            PropertyName="SelectedValue" Type="Int32" />
                    </SelectParameters>
                </asp:SqlDataSource>
                <br />
            </div>
     
            <script type="text/javascript">
                 
                var terminalsCombo;
                var fleetsCombo;
     
                function pageLoad() {
                     
                    terminalsCombo = $find("<%= RadComboBox2.ClientID %>");
                    fleetsCombo = $find("<%= RadComboBox3.ClientID %>");
                }
     
                function Loadterminals(combo, eventArqs) {
                    var item = eventArqs.get_item();
                    terminalsCombo.set_text("Loading...");
                    fleetsCombo.clearSelection();
     
                     
                    if (item.get_index() > 0) {
                         
                        terminalsCombo.requestItems(item.get_value(), false);
                    }
                    else {
                         
                        terminalsCombo.set_text(" ");
                        terminalsCombo.clearItems();
     
                        fleetsCombo.set_text(" ");
                        fleetsCombo.clearItems();
                    }
                }
     
                function Loadfleets(combo, eventArqs) {
                    var item = eventArqs.get_item();
     
                    fleetsCombo.set_text("Loading...");
                      
                    fleetsCombo.requestItems(item.get_value(), false);
                }
     
                function ItemsLoaded(combo, eventArqs) {
                    if (combo.get_items().get_count() > 0) {
                         
                        combo.set_text(combo.get_items().getItem(0).get_text());
                        combo.get_items().getItem(0).highlight();
                    }
                    combo.showDropDown();
                }
     
            </script>
     
     
        </form>
    </body>
    </html>



    VB

    Imports System
    Imports System.Data
    Imports System.Data.SqlClient
    Imports System.Configuration
    Imports Telerik.Web.UI
     
    Partial Class Default3
        Inherits System.Web.UI.Page
     
        Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs)
            If Not Page.IsPostBack Then
     
                Loadaccounts()
            End If
        End Sub
     
        Protected Sub Loadaccounts()
            Dim connection As New SqlConnection(ConfigurationManager.ConnectionStrings("CF_SQL_Connection").ConnectionString)
     
            Dim adapter As New SqlDataAdapter("SELECT * FROM [CF_Profile_Account] ORDER BY [AccountName]", connection)
            Dim dt As New DataTable()
            adapter.Fill(dt)
     
            RadComboBox1.DataTextField = "AccountName"
            RadComboBox1.DataValueField = "IDProfileAccount"
            RadComboBox1.DataSource = dt
            RadComboBox1.DataBind()
     
            RadComboBox1.Items.Insert(0, New RadComboBoxItem("- Select Account -"))
     
        End Sub
     
        Protected Sub Loadterminals(ByVal IDProfileAccount As String)
            Dim connection As New SqlConnection(ConfigurationManager.ConnectionStrings("CF_SQL_Connection").ConnectionString)
     
     
            Dim adapter As New SqlDataAdapter("SELECT * FROM [CF_Profile_Terminal] WHERE ([IDProfileAccount] = @IDProfileAccount) ORDER BY [TerminalName]", connection)
            adapter.SelectCommand.Parameters.AddWithValue("@IDProfileAccount", IDProfileAccount)
     
            Dim dt As New DataTable()
            adapter.Fill(dt)
     
            RadComboBox2.DataTextField = "TerminalName"
            RadComboBox2.DataValueField = "IDProfileTerminal"
            RadComboBox2.DataSource = dt
            RadComboBox2.DataBind()
     
        End Sub
     
        Protected Sub Loadfleets(ByVal IDProfileTerminal As String)
            Dim connection As New SqlConnection(ConfigurationManager.ConnectionStrings("CF_SQL_Connection").ConnectionString)
     
     
            Dim adapter As New SqlDataAdapter("SELECT * FROM [CF_Profile_Fleet] WHERE ([IDProfileTerminal] = @IDProfileTerminal)", connection)
            adapter.SelectCommand.Parameters.AddWithValue("@IDProfileTerminal", IDProfileTerminal)
     
            Dim dt As New DataTable()
            adapter.Fill(dt)
     
            RadComboBox3.DataTextField = "FleetName"
            RadComboBox3.DataValueField = "IDProfileFleet"
            RadComboBox3.DataSource = dt
            RadComboBox3.DataBind()
     
        End Sub
     
        Protected Sub RadComboBox1_ItemsRequested(ByVal o As Object, ByVal e As RadComboBoxItemsRequestedEventArgs) Handles RadComboBox1.ItemsRequested
     
            Loadaccounts()
     
        End Sub
     
        Protected Sub RadComboBox2_ItemsRequested(ByVal o As Object, ByVal e As RadComboBoxItemsRequestedEventArgs) Handles RadComboBox2.ItemsRequested
     
            Loadterminals(e.Text)
     
        End Sub
     
        Protected Sub RadComboBox3_ItemsRequested(ByVal o As Object, ByVal e As RadComboBoxItemsRequestedEventArgs) Handles RadComboBox3.ItemsRequested
     
            Loadfleets(e.Text)
     
        End Sub
     
    End Class




  2. Answer
    Kevin
    Kevin avatar
    360 posts
    Member since:
    Jul 2012

    Posted 28 Oct 2011 Link to this post

    Hello Allan,

    The reason RadComboBox3 doesn't affect the SqlDataSource is the way you wrote your code. Your RadComboBox needs to postback, in order to update the SqlDataSource parameter. So if you set AutoPostback on RadComboBox3, when the user selects a value it should affect your grid.

    I hope that helps.
  3. UI for ASP.NET Ajax is Ready for VS 2017
Back to Top