Combo box Multi Column gets the parameter value to another single combo box

6 posts, 0 answers
  1. huejiitech
    huejiitech avatar
    8 posts
    Member since:
    Aug 2013

    Posted 15 Sep 2013 Link to this post

    I have two RadComboBox

    1. Single Column Combo box
    2. Multi Column Combo box

    The scenario is when i pick a value from combobox1 that value will use as parameter
    for combobox2 whereas combobox2 is a multi column....to filter the items of combobox2 that are related to
    the value of combobox1

    ex.
    (combobox1 items)
    *apple
    *tuna
    *orange
    *berry

    (when i pick "tuna")

    then when i click the combox2 dropdown it will show all related data from the value of combobox1 where is "tuna"

    results of combobox2:
    ID Description Price Product
    ----------------------------------------------------------------------------
    12 Big 102222 tuna
    13 Small 100000 tuna
    14 Medium 111000 tuna
    15 Clean 345545 tuna


  2. David
    David avatar
    38 posts
    Member since:
    May 2013
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. huejiitech
    huejiitech avatar
    8 posts
    Member since:
    Aug 2013

    Posted 20 Sep 2013 Link to this post

    its not working.... my combobox2 is using sqlDatasorce
  5. Shinu
    Shinu avatar
    17764 posts
    Member since:
    Mar 2007

    Posted 21 Sep 2013 Link to this post

    Hi Huejii,

    Please have a look into the following full code I tried which works fine at my end.

    ASPX:
    <telerik:RadComboBox ID="RadComboBox1" runat="server" AutoPostBack="true" OnSelectedIndexChanged="RadComboBox1_SelectedIndexChanged">
        <Items>
            <telerik:RadComboBoxItem Text="Select" runat="server" />
            <telerik:RadComboBoxItem Text="India" runat="server" />
            <telerik:RadComboBoxItem Text="Australia" runat="server" />
        </Items>
    </telerik:RadComboBox>
    <telerik:RadComboBox runat="server" ID="RadComboBox2" Height="190px" Width="420px"
        EmptyMessage="Select">
        <HeaderTemplate>
            <ul>
                <li class="col1">City Name</li>
                <li class="col2">Country Name</li>
            </ul>
        </HeaderTemplate>
        <ItemTemplate>
            <ul>
                <li class="col1">
                    <%# DataBinder.Eval(Container.DataItem, "Cityname")%></li>
                <li class="col2">
                    <%# DataBinder.Eval(Container.DataItem, "Countryname")%></li>
            </ul>
        </ItemTemplate>
    </telerik:RadComboBox>
    <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString %>">
    </asp:SqlDataSource>

    CSS:
    <style type="text/css">
        .multipleRowsColumns .rcbItem, .multipleRowsColumns .rcbHovered
        {
            float: left;
            margin: 0 1px;
            min-height: 13px;
            overflow: hidden;
            padding: 2px 19px 2px 6px;
            width: 125px;
        }
        .col1, .col2
        {
            margin: 0;
            padding: 0 5px 0 0;
            width: 110px;
            line-height: 14px;
            float: left;
        }
    </style>

    C#:
    protected void RadComboBox1_SelectedIndexChanged(object sender, Telerik.Web.UI.RadComboBoxSelectedIndexChangedEventArgs e)
    {
        string selectedItem = RadComboBox1.SelectedItem.Text;
        if (selectedItem.Equals("Select"))
        {
            RadComboBox2.Items.Clear();
        }
        else
        {
            string selectquery = "select Cityname, Countryname FROM City where Countryname='" + selectedItem + "'";
            SqlDataSource1.SelectCommand = selectquery;
            RadComboBox2.DataSourceID = "SqlDataSource1";
            RadComboBox2.DataTextField = "Cityname";
            RadComboBox2.DataBind();
        }
    }

    Thanks,
    Shinu.
  6. huejiitech
    huejiitech avatar
    8 posts
    Member since:
    Aug 2013

    Posted 28 Sep 2013 Link to this post

    Hi Shinu,


    How to get the selected row from the multi column and pass it to a textboxes using client side  via javascript?



    from my example i selected records with ID: 14

    txtID = 14
    txtDescription Medium
    txtPrice = 111000
    txtProduct = tuna



    thanks regards,
  7. Shinu
    Shinu avatar
    17764 posts
    Member since:
    Mar 2007

    Posted 30 Sep 2013 Link to this post

    Hi huejiitech,

    Please try the following code snippet I tried to display the selected row values of a multicolumn RadComboBox in RadTextBox on OnClientSelectedIndexChanged event.

    ASPX:
    <asp:Label ID="Label1" runat="server" Text="City Name:">
    </asp:Label>
    <telerik:RadTextBox ID="RadTextBox1" runat="server">
    </telerik:RadTextBox>
    <br />
    <asp:Label ID="Label2" runat="server" Text="Country Name:">
    </asp:Label>
    <telerik:RadTextBox ID="RadTextBox2" runat="server">
    </telerik:RadTextBox>

    JavaScript:
    <script type="text/javascript">
        function OnClientSelectedIndexChanged1(sender, args) {
            var cityname = $find("<%=RadTextBox1.ClientID %>");
            var countryname = $find("<%=RadTextBox2.ClientID %>");
            var selecetditem = args.get_item().get_textElement().innerText;
            var selectedvalue = selecetditem.split(" ");
            cityname.set_value(selectedvalue[0]);
            countryname.set_value(selectedvalue[1]);
        }
    </script>

    Thanks,
    Shinu.
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017