Multipule Selection for ComboBox loading on Demand

2 posts, 0 answers
  1. sumanth
    sumanth avatar
    11 posts
    Member since:
    Feb 2009

    Posted 25 Mar 2009 Link to this post

    Hi
    I Working on RAD ComboBox with Multiple Selection loading on Demand
    I am getting the Data from StoredProc.
    RadComboBox1 is getting values from 1StoredProc(CustomerNames);
    Problem
    RadComboBox2 to has to pop with ID on Demand(Just Like the Ex in Telerik Site)

    I used the Example BUT
    i unable to get that where i am going wrong
    for each and every click(on RadComboBox1) its adding the values(again and again) in RadComboBox2
    AND
    It is not working basing on CheckBoxs it is working basing the SelectedItem(Click on Item)
    plz help me
    Where i am going wrong

    My Default.CS File

     

    using

     

    System;

     

     

     

     

    using

     

    System.Collections.Generic;

     

     

     

     

    using

     

    System.Linq;

     

     

     

     

    using

     

    System.Web;

     

     

     

     

    using

     

    System.Web.UI;

     

     

     

     

    using

     

    System.Web.UI.WebControls;

     

     

     

     

    using

     

    System.Data;

     

     

     

     

    using

     

    System.Data.SqlClient;

     

     

     

     

    using

     

    Telerik.Web.UI;

     

     

     

     

    namespace

     

    Combotry

     

    {

     

    public partial class _Default : System.Web.UI.Page

     

     

     

     

     

    {

     

    protected void Page_Load(object sender, EventArgs e)

     

    {

     

     

    if (!Page.IsPostBack)

     

    {

     

     

    this.RadComboBox1.DataBind();

     

     

    this.RadComboBox1.Text = String.Empty;

     

     

    //fill the continents combo

     

     

     

     

     

    LoadCustomerName();

     

    this.Label4.Text = this.RadComboBox1.Text;

     

     

    }

    }

     

    protected void LoadCustomerName()

     

    {

     

    SqlConnection connection = new SqlConnection("Data Source=vijay;Initial Catalog=TRY;Integrated Security=True");

     

     

    SqlDataAdapter adapter = new SqlDataAdapter("usp_GetCustomers", connection);

     

     

    DataTable dt = new DataTable();

     

    adapter.Fill(dt);

    RadComboBox1.DataTextField =

    "customerName";

     

    RadComboBox1.DataValueField =

    "customerid";

     

    RadComboBox1.DataSource = dt;

    RadComboBox1.DataBind();

     

    //insert the first item

     

     

     

     

     

    RadComboBox1.Items.Insert(0,

    new RadComboBoxItem("- Select Customer -"));

     

     

    this.Label4.Text = this.RadComboBox1.Text;

     

     

    this.Label4.Text = this.comboValue.Value;

     

     

    }

     

    protected void LoadStoreID(string customerid)

     

    {

     

    this.Label4.Text = this.RadComboBox1.Text;

     

     

    this.Label4.Text = this.comboValue.Value;

     

     

    SqlCommand cmd = new SqlCommand("dbo.StoreID", new SqlConnection("Data Source=vijay;Initial Catalog=TRY;Integrated Security=True"));

     

     

    //select a StoreID based on the CustomerID

     

     

     

     

     

     

    //SqlDataAdapter adapter = new SqlDataAdapter("dbo.StoreID", cmd);

     

     

     

     

     

     

    SqlDataAdapter adapter = new SqlDataAdapter(cmd);

     

    cmd.CommandType =

    CommandType.StoredProcedure;

     

     

     

    //adapter.SelectCommand.Parameters.AddWithValue("@CustomerID", customerid);

     

     

     

     

     

    cmd.Parameters.Add(

    new SqlParameter("@CustomerID", customerid ));

     

     

    DataTable dt = new DataTable();

     

    adapter.Fill(dt);

    cmd.Connection.Open();

    RadComboBox2.DataTextField =

    "storeid";

     

    RadComboBox2.DataValueField =

    "storeid";

     

    RadComboBox2.DataSource = dt;

    RadComboBox2.DataBind();

     

    }

     

    protected void LoadStoreName(string storeid)

     

    {

     

    SqlConnection connection = new SqlConnection("Data Source=vijay;Initial Catalog=TRY;Integrated Security=True");

     

     

    //select a StoreID based on the CustomerID

     

     

     

     

     

     

    SqlDataAdapter adapter = new SqlDataAdapter("SELECT name FROM StoreMaster WHERE storeid=@storeid", connection);

     

    adapter.SelectCommand.Parameters.AddWithValue(

    "@storeid", storeid);

     

     

    DataTable dt = new DataTable();

     

    adapter.Fill(dt);

    RadComboBox3.DataTextField =

    "Name";

     

    RadComboBox3.DataValueField =

    "name";

     

    RadComboBox3.DataSource = dt;

    RadComboBox3.DataBind();

    }

     

    protected void RadComboBox1_ItemsRequested(object o, RadComboBoxItemsRequestedEventArgs e)

     

    {

    LoadCustomerName();

     

    }

     

    protected void RadComboBox2_ItemsRequested(object o, RadComboBoxItemsRequestedEventArgs e)

     

    {

     

    // e.Text is the first parameter of the requestItems method

     

     

     

     

     

     

    // invoked in LoadStoreID method

     

     

     

     

     

    LoadStoreID(e.Text );

     

     

    }

     

    protected void RadComboBox3_ItemsRequested(object o, RadComboBoxItemsRequestedEventArgs e)

     

    {

     

    // e.Text is the first parameter of the requestItems method

     

     

     

     

     

     

    // invoked in LoadStoreName method

     

     

     

     

     

    LoadStoreName(e.Text);

    }

     

    protected void RadComboBox1_SelectedIndexChanged(object o, RadComboBoxSelectedIndexChangedEventArgs e)

     

    {

    }

    }

    }

    My .ASPX File

    <%

    @ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="Combotry._Default" %>

     

    <%

    @ Register assembly="Telerik.Web.UI" namespace="Telerik.Web.UI" tagprefix="telerik" %>

     

    <!

     

    DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

     

    <

     

    html xmlns="http://www.w3.org/1999/xhtml">

     

    <

     

    head>

     

    <

     

    title = "ComboBox"></title>

     

    </

     

    head>

     

    <

     

    body >

     

     

    <form runat="server" id="mainForm" method="post" style="width: 100%">

     

     

    <telerik:RadScriptManager ID="RadScriptManager1" runat="server">

     

     

    </telerik:RadScriptManager>

     

     

    <script type="text/javascript">

     

     

    var supressDropDownClosing = false;

     

     

    function OnClientDropDownClosing(sender, eventArgs) {

     

    eventArgs.set_cancel(supressDropDownClosing);

    }

     

    function OnClientSelectedIndexChanging(sender, eventArgs) {

     

    eventArgs.set_cancel(supressDropDownClosing);

    }

     

    function OnClientDropDownOpening(sender, eventArgs) {

     

    supressDropDownClosing =

    true;

     

    }

     

    function OnClientBlur(sender) {

     

    supressDropDownClosing =

    false;

     

    sender.toggleDropDown();

    }

     

    function checkboxClick() {

     

    collectSelectedItems();

    }

     

    function getItemCheckBox(item) {

     

     

    //Get the 'div' representing the current RadComboBox Item.

     

     

    var itemDiv = item.get_element();

     

     

    //Get the collection of all 'input' elements in the 'div' (which are contained in the Item).

     

     

    var inputs = itemDiv.getElementsByTagName("input");

     

     

    for (var inputIndex = 0; inputIndex < inputs.length; inputIndex++) {

     

     

    var input = inputs[inputIndex];

     

     

    //Check the type of the current 'input' element.

     

     

    if (input.type == "checkbox") {

     

     

    return input;

     

    }

    }

     

    return null;

     

    }

     

    function collectSelectedItems() {

     

     

    var combo = $find("<%= RadComboBox1.ClientID %>");

     

     

    var items = combo.get_items();

     

     

    var selectedItemsTexts = "";

     

     

    var selectedItemsValues = "";

     

     

    var itemsCount = items.get_count();

     

     

    for (var itemIndex = 0; itemIndex < itemsCount; itemIndex++) {

     

     

    var item = items.getItem(itemIndex);

     

     

    var checkbox = getItemCheckBox(item);

     

     

    //Check whether the Item's CheckBox) is checked.

     

     

    if (checkbox.checked) {

     

    selectedItemsTexts += item.get_text() +

    ", ";

     

    selectedItemsValues += item.get_value() +

    ", ";

     

    }

    }

    selectedItemsTexts = selectedItemsTexts.substring(0, selectedItemsTexts.length - 2);

    selectedItemsValues = selectedItemsValues.substring(0, selectedItemsValues.length - 2);

     

    //Set the text of the RadComboBox with the texts of the selected Items, separated by ','.

     

    combo.set_text(selectedItemsTexts);

     

    //Set the comboValue hidden field value with values of the selected Items, separated by ','.

     

     

    //document.getElementById("comboValue").value = selectedItemsValues;

     

     

    //Clear the selection that RadComboBox has made internally.

     

     

    if (selectedItemsValues == "") {

     

    combo.clearSelection();

    }

    }

     

    </script>

     

     

     

    <div>

     

     

    <asp:Label ID="Label1" runat="server"

     

     

    style="z-index: 1; left: 162px; top: 38px; position: absolute; height: 20px; width: 112px">

     

    CustomerID

     

    </asp:Label>

     

     

    <input type="hidden" id="comboValue" value="" runat="server" />

     

     

    <telerik:RadComboBox ID="RadComboBox1"

     

     

    runat="server"

     

     

    OnClientSelectedIndexChanging="LoadCustomerName"

     

     

    OnItemsRequested="RadComboBox1_ItemsRequested"

     

     

    style="z-index: 1; left: 284px; top: 38px; position: absolute; height: 20px; width: 160px"

     

     

    AllowCustomText="True" HighlightTemplatedItems="True"

     

     

    onclientdropdownopening="OnClientDropDownOpening"

     

     

    OnClientDropDownClosing="OnClientDropDownClosing"

     

     

    OnClientBlur="OnClientBlur" DataTextField="CustomerName"

     

     

    DataValueField="CustomerID" Skin="Web20">

     

     

    <ItemTemplate>

     

     

    <asp:CheckBox runat="server" ID="CheckBox" onclick="checkboxClick();" Text='<%# DataBinder.Eval(Container, "Text") %>' />

     

     

    </ItemTemplate>

     

     

    <CollapseAnimation Type="OutQuint" Duration="200"></CollapseAnimation>

     

     

    </telerik:RadComboBox>

     

     

    <asp:SqlDataSource ID="DataSourceforCustomers" runat="server"

     

     

    ConnectionString="<%$ ConnectionStrings:ULTIMATE_NEWConnectionString %>"

     

     

    SelectCommand="usp_GetCustomers" SelectCommandType="StoredProcedure">

     

     

    </asp:SqlDataSource>

     

     

    <asp:Label ID="Label2" runat="server"

     

     

    style="z-index: 1; left: 537px; top: 38px; position: absolute; height: 20px; width: 83px">

     

    StoreID:

     

    </asp:Label>

     

     

    <telerik:RadComboBox ID="RadComboBox2"

     

     

    runat="server"

     

     

    Width="186px"

     

     

    OnClientSelectedIndexChanging="LoadStoreName"

     

     

    OnClientItemsRequested="ItemsLoaded"

     

     

    OnItemsRequested="RadComboBox2_ItemsRequested"

     

     

    style="z-index: 1; left: 634px; top: 38px; position: absolute; height: 20px; width: 160px"

     

     

    DataTextField="StoreID" DataValueField="StoreID" Skin="Web20">

     

     

    <ItemTemplate>

     

     

    <asp:CheckBox runat="server" ID="CheckBox" onclick="checkboxClick();" Text='<%# DataBinder.Eval(Container, "Text") %>' />

     

     

    </ItemTemplate>

     

    <

     

    CollapseAnimation Type="OutQuint" Duration="200"></CollapseAnimation>

     

     

    </telerik:RadComboBox>

     

     

    <asp:SqlDataSource ID="DataSourceforStoreID" runat="server"

     

     

    ConnectionString="<%$ ConnectionStrings:ULTIMATE_NEWConnectionString %>"

     

     

    SelectCommand="StoreID" SelectCommandType="StoredProcedure">

     

     

    <SelectParameters>

     

     

    <asp:ControlParameter ControlID="RadComboBox1" Name="CustomerID"

     

     

    PropertyName="SelectedValue" Type="String" />

     

     

    </SelectParameters>

     

     

    </asp:SqlDataSource>

     

     

    <asp:Label ID="Label3" runat="server"

     

     

    style="z-index: 1; left: 907px; top: 38px; position: absolute; height: 20px; width: 103px; right: 599px;">

     

    StoreName:

     

    </asp:Label>

     

     

    <telerik:RadComboBox ID="RadComboBox3"

     

     

    runat="server"

     

     

    Width="186px"

     

     

    OnClientItemsRequested="ItemsLoaded"

     

     

    OnItemsRequested="RadComboBox3_ItemsRequested"

     

     

    style="z-index: 1; left: 1024px; top: 38px; position: absolute; height: 20px; width: 160px" Skin="Web20">

     

    <

     

    CollapseAnimation Type="OutQuint" Duration="200"></CollapseAnimation>

     

     

    </telerik:RadComboBox>

     

     

    </div>

     

     

    <script type="text/javascript">

     

     

    //global variables for the countries and cities comboboxes

     

     

    var StoreIDCombo;

     

     

    var StoreNameCombo;

     

     

    function pageLoad() {

     

     

    // initialize the global variables

     

     

    // in this event all client objects

     

     

    // are already created and initialized

     

    StoreIDCombo = $find(

    "<%= RadComboBox2.ClientID %>");

     

    StoreNameCombo = $find(

    "<%= RadComboBox3.ClientID %>");

     

    }

     

     

    function LoadCustomerName(combo, eventArqs) {

     

     

    var item = eventArqs.get_item();

     

    StoreIDCombo.set_text(

    "Loading...");

     

    StoreNameCombo.clearSelection();

     

    // if a continent is selected

     

     

    if (item.get_index() > 0) {

     

     

    // this will fire the ItemsRequested event of the

     

     

    // StoreID combobox passing the CustomerName as a parameter

     

    StoreIDCombo.requestItems(item.get_value(), checkboxClick);

    }

     

    if (checkbox.checked) {

     

    selectedItemsTexts += item.get_text() +

    ", ";

     

    selectedItemsValues += item.get_value() +

    ", ";

     

    }

     

    }

     

    function LoadStoreName(combo, eventArqs) {

     

     

    var item = eventArqs.get_item();

     

    StoreNameCombo.set_text(

    "Loading...");

     

     

    // this will fire the ItemsRequested event of the

     

     

    // StoreName combobox passing the StoreID as a parameter

     

    StoreNameCombo.requestItems(item.get_value(),

    false );

     

    }

     

    function ItemsLoaded(combo, eventArqs) {

     

     

    if (combo.get_items().get_count() > 0) {

     

     

    // pre-select the first item

     

    combo.set_text(combo.get_items().getItem(0).get_text());

    combo.get_items().getItem(0).highlight();

    }

    combo.showDropDown();

    }

     

    function collectSelectedItems() {

     

     

    var combo =$find ("<%= RadComboBox1.ClientID %>");

     

     

    var items = combo.get_items();

     

     

    var selectedItemsTexts = "";

     

     

    var selectedItemsValues = "";

     

     

    var itemsCount = items.get_count();

     

     

    for (var itemIndex = 0; itemIndex < itemsCount; itemIndex++) {

     

     

    var item = items.getItem(itemIndex);

     

     

    var checkbox = getItemCheckBox(item);

     

     

    //Check whether the Item's CheckBox) is checked.

     

     

    if (checkbox.checked) {

     

    selectedItemsTexts += item.get_text() +

    ", ";

     

    selectedItemsValues += item.get_value() +

    ", ";

     

    }

    }

    selectedItemsTexts = selectedItemsTexts.substring(0, selectedItemsTexts.length - 2);

    selectedItemsValues = selectedItemsValues.substring(0, selectedItemsValues.length - 2);

     

    //Set the text of the RadComboBox with the texts of the selected Items, separated by ','.

     

    combo.set_text(selectedItemsTexts);

     

    //Set the comboValue hidden field value with values of the selected Items, separated by ','.

     

    }

     

    </script>

     

     

    <p>

     

     

    &nbsp;</p>

     

     

     

    <asp:Label ID="Label4" runat="server"

     

     

    style="z-index: 1; left: 10px; top: 95px; position: absolute; height: 149px; width: 418px"

     

     

    Text="Label"></asp:Label>

     

     

     

    </form>

     

    </

     

    body>

     

    </

     

    html>

     

  2. Test Test
    Test Test avatar
    3 posts
    Member since:
    Dec 2009

    Posted 11 Dec 2009 Link to this post

    Did you ever get an answer to this? I've got the same problem and can't figure it out...
  3. UI for ASP.NET Ajax is Ready for VS 2017
Back to Top