Home / Community & Support / Code Library / ASP.NET and ASP.NET AJAX > General and Integration Projects > RadListBox in RadComboBox Item Template

• Answer Telerik Admin Master

  Posted on Nov 5, 2009 (permalink)

  Requirements
  RadControls version	RadControls for ASP.NET AJAX Q1 2009+
  .NET version	2.0+
  Visual Studio version	2005/2008
  programming language	JavaScript
  browser support	all browsers supported by RadControls for ASP.NET AJAX

  
  PROJECT DESCRIPTION
  The projects shows how to combine a RadListBox inside a RadComboBox Item Template to achieve multiple selection drop down.

  
  

  <telerik:RadComboBox ID="RadComboBox1" runat="server" AllowCustomText="true">

      <Items>

      <telerik:RadComboBoxItem Text="" />

      </Items>

      <ItemTemplate>

      <div id="div1">

          <telerik:RadListBox ID="RadListBox1" runat="server" Width="100%" SelectionMode="Multiple"

          OnClientSelectedIndexChanged="onSelectedIndexChanged">

          <Items>

              <telerik:RadListBoxItem Text="Item 1" Value="1" />

              <telerik:RadListBoxItem Text="Item 2" Value="2" />

              <telerik:RadListBoxItem Text="Item 3" Value="3" />

          </Items>

          </telerik:RadListBox>

      </div>

   

      <script type="text/javascript">

          var div1 = document.getElementById("div1");

          div1.onclick = stopPropagation;

      </script>

   

      </ItemTemplate>

  </telerik:RadComboBox>

  
  

  The Text and Value of *all* selected Items are stored respectively as Text of the ComboBox and as Value of the *only* ComboBox Item. Each time an Item is selected/deselected in the ListBox, these two are updated to reflect the selection.

  
  

  function onSelectedIndexChanged(sender, eventArgs) {

      updateComboBox(sender);

  }

   

  function updateComboBox(listBox) {

      var text = "";

      var value = "";

      var items = listBox.get_selectedItems();

   

      for (var i = 0; i < items.length; i++) {

      var item = items[i];

   

      //Check whether the Item's 'selected' attribute is set to true.

      if (item.get_selected()) {

          text += item.get_text() + ", ";

          value += item.get_value() + ", ";

      }

      }

   

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

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

   

      var comboBox = $find("RadComboBox1");

       

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

      comboBox.set_text(text);

       

      //Set the value of the RadComboBox to values of the selected Items, separated by ','.

      comboBox.trackChanges();

      comboBox.get_items().getItem(0).set_value(value);

      comboBox.commitChanges();

  }

  
  

  Attached files

  • listboxincomboboxitemtemplate.zip

  Reply

Back to Top

Home / Community & Support / Code Library / ASP.NET and ASP.NET AJAX > General and Integration Projects > RadListBox in RadComboBox Item Template