Telerik is a leading vendor of ASP.NET AJAX, ASP.NET MVC, Silverlight, WinForms and WPF controls and components, as well as .NET Reporting, .NET ORM , .NET CMS, Code Analysis, Mocking, Team Productivity and Automated Testing Tools. Building on its expertise in interface development and Microsoft technologies, Telerik helps customers build applications with unparalleled richness, responsiveness and interactivity. Telerik products help thousands of companies to be more productive and deliver reliable applications under budget and on time.
Version Q2 2011 released 07/12/2011
select

ComboBox / Add/Remove/Disable Items

select
Event log:

  • RadComboBox for ASP.NET AJAX provides a client-side API for adding/deleting/updating of items.

    This example shows how to add/remove and disable items. The example also shows that all of the above changes are persisted after postback. Upon clicking the PostBack button and firing a postback on the page, all the changes that have been made to the combobox remain.

    To add an item simply type the text into the TextBox field and click the "Add New Item" button. The item will appear at the top of the list and will be shown in the combobox' input field. The follwoing It code is used to add an item:

    function AddNewItem()
    
    {
         //get the client-side combobox instance
         var combo = $find('<%=RadComboBox1.ClientID%>'); 
         //or simply $find('RadComboBox1'); if you know the exact ClientID of the combobox
         //create a new combobox item and set its text
         var comboItem = new Telerik.Web.UI.RadComboBoxItem();
         var inputtext = document.getElementById("TextBox1");
         comboItem.set_text(inputtext);
         //the method below indicates that client-changes are to be made
         combo.trackChanges();
         //add the newly created item to the Items collection of the combobox
         combo.get_items().add(comboItem); 
         //select the newly added item
         comboItem.select();
         //the methods below submits the client changes to the server so that these changes are persisted after postback
         combo.commitChanges();
    }
    To remove an item you can simply call the remove(item) method. A RadComboBoxItem is passed to this method:

    combo.trackChanges();
    
    combo.get_items().remove(comboItem);
    combo.commitChanges();

    To disable an item you should call the disable() method. No parameters are passed to this method:
    combo.trackChanges();
    comboItem.disable();
    combo.commitChanges();
    
    Client side changes are available on the server side after postback. You can use the ClientChanges property to access them:
    foreach (ClientOperation<RadComboBoxItem> operation in RadComboBox1.ClientChanges)
    {
    	RadComboBoxItem item = operation.Item;
    
    	switch (operation.Type)
    	{
    		case ClientOperationType.Insert:
    			break;
    		case ClientOperationType.Remove:
    			break;
    		case ClientOperationType.Update:
    			UpdateClientOperation<RadComboBoxItem> update = operation as UpdateClientOperation<RadComboBoxItem>;
    			break;
    		case ClientOperationType.Clear:
    			break;
    	}	
    }
    

Source Code

C# VB.NET
Show code in new window Demo isolation steps
  • <%@ Page AutoEventWireup="true" CodeFile="DefaultVB.aspx.vb" Inherits="Telerik.ComboboxExamplesVB.AddRemoveDisable.DefaultVB"
        Language="vb" %>

    <%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
    <%@ Register TagPrefix="qsf" TagName="Footer" Src="~/Common/Footer.ascx" %>
    <%@ Register TagPrefix="qsf" TagName="HeadTag" Src="~/Common/HeadTag.ascx" %>
    <%@ Register TagPrefix="qsf" TagName="Header" Src="~/Common/Header.ascx" %>
    <%@ Register TagPrefix="qsf" Namespace="Telerik.QuickStart" %>

    <!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 id="Head1" runat="server">
        <qsf:HeadTag runat="server" ID="Headtag1"></qsf:HeadTag>
        <style type="text/css">
            .qsfRightConfig,
            .qsfRightConfig .qsfConfig
            {
                width: 420px;
                float: right;
            }
            
            .qsfexAvailableActions
            {
                list-style-type: none;
                margin: 0;
                padding-left: 40px;
            }
            
            .qsfexAvailableActions li
            {
                margin: 8px 0 0 0;
            }
        </style>
    </head>
    <body class="BODY">

        <script type="text/javascript">
        //<![CDATA[
        function AddNewItem()
        {        
            var combo = $find("<%= RadComboBox1.ClientID %>");
            var intextput = document.getElementById("TextBox1").value;
            var comboItem = new Telerik.Web.UI.RadComboBoxItem();
            comboItem.set_text(intextput);
            combo.trackChanges();
            combo.get_items().add(comboItem);
            comboItem.select();
            combo.commitChanges();
            comboItem.scrollIntoView();
        }

        function RemoveItem()
        {
            var combo = $find("<%= RadComboBox1.ClientID %>");
            var comboItem = combo.get_selectedItem();
            if(comboItem)
            {
                combo.trackChanges();
                combo.get_items().remove(comboItem);
                combo.commitChanges();
            }
            
        }
        
        function DisableItem()
        {
            
            var combo = $find("<%= RadComboBox1.ClientID %>");
            var comboItem = combo.get_selectedItem();
            var nextIndex = "";
            var nextItem = "";
            if(comboItem)
            {
                nextIndex = comboItem.get_index()+ 1;
                nextItem = combo.get_items().getItem(nextIndex);
                
                combo.trackChanges();
                comboItem.disable();
                if(nextItem)
                {
                    nextItem.select();
                }
                combo.commitChanges();
            }
        }
        
        function EnableItems()
        {
            var combo = $find("<%= RadComboBox1.ClientID %>");
            var comboItems = combo.get_items();
            
            for (var i = 0; i < comboItems.get_count(); i++)
            {
                var item = comboItems.getItem(i);
                if( item && !item.get_enabled())
                {
                    combo.trackChanges();
                    item.enable();
                    combo.commitChanges();
                }
            }
        }
        
        function ToggleDropDown()
        {
         var combo = $find("<%= RadComboBox1.ClientID %>");
            combo.toggleDropDown();
        }
        //]]>
        </script>

        <form runat="server" id="mainForm" method="post">
            <telerik:RadScriptManager ID="RadScriptManager1" runat="server">
            </telerik:RadScriptManager>
            <qsf:Header runat="server" ID="Header1" NavigationLanguage="VB"></qsf:Header>
            <!-- content start -->
            <div style="overflow: hidden;">
                <qsf:ConfiguratorPanel runat="server" ID="ConfigurationPanel1" Title="Available actions" Orientation="Vertical" CssClass="qsfRightConfig" Expanded="true">
                 <ul class="qsfexAvailableActions">
                     <li>
                         <input class="qsfButtonBig" type="button" value="Open/Close drop down" onclick="ToggleDropDown()" /></li>
                     <li>
                         <input class="qsfButtonBig" type="button" value="Disable Selected Item" onclick="DisableItem()" /></li>
                     <li>
                         <input class="qsfButtonBig" type="button" value="Enable all items" onclick="EnableItems()" /></li>
                     <li>
                         <input class="qsfButtonBig" type="button" name="Text1" value="Delete Selected Item"
                             onclick="RemoveItem()" /></li>
                     <li>
    <asp:TextBox runat="server" ID="TextBox1" CssClass="textfield" Style="width: 220px;
    height: 20px; vertical-align: top; border: 1px solid #678892;"></asp:TextBox>

                         <input class="qsfButton" type="button" name="Text2" value="Add New Item" onclick="AddNewItem()" />
                     </li>
                     <li>
                         <asp:Button CssClass="qsfButton" ID="Button1" runat="server" Text="Postback" OnClick="Button1_Click" /></li>
                 </ul>
         </qsf:ConfiguratorPanel>
             <telerik:RadComboBox ID="RadComboBox1" runat="server" Height="140px" Width="210px"
                 CloseDropDownOnBlur="false" />
         </div>
            <!-- content end -->
            
            <qsf:EventLogConsole runat="server" ID="EventLogConsole1" Height="200px"/>
            <qsf:Footer runat="server" ID="Footer1"></qsf:Footer>
        </form>
    </body>
    </html>

Get more than expected!

 
 

Take your time to truly experience the power of RadControls for ASP.NET AJAX with a free 60-day trial backed up by Telerik’s unlimited dedicated support.

Download your RadControls for ASP.NET AJAX trial and jumpstart your development with the available Getting Started resources.

If you have any questions, do not hesitate to contact us at sales@telerik.com.

Copyright 2002-2024 © Telerik. All right reserved
Telerik Inc, 201 Jones Rd, Waltham, MA 02451