ASP.NET MVC ComboBox - Client-Side API - Add/Delete Items


 
 
Add Item

Remove Item
The ComboBox control provides client-side methods for adding / removing items.

  • Use the add method of the options collection to add items to the list.

    Usage: ComboBox1.options.add(text [, value] [, index]);
    - text - the text of the new item;
    - value - the value of the new item (same as text if not specified);
    - index - the position in the list where the new item should be added
          (if not specified, the item will be added at the end of the list);

  • Use the remove method of the options collection to remove items to the list.

    Usage: ComboBox1.options.remove(index);
    - index - the index of the item to be removed;
View - Aspx

    <% Html.Obout(new ComboBox("ComboBox1")
    {
        Width = 250
    }); %>	 
    
    <% Html.Obout(new OboutTextBox("OboutTextBox1")
    {   
    }); %>
    
    <% Html.Obout(new OboutButton("OboutButton1")
    {   
         OnClientClick = "return addItem();"
    }); %>      
    
    
View - Razor

    @Html.Obout(new ComboBox("ComboBox1")
    {
        Width = 250
    })
    
    @Html.Obout(new OboutTextBox("OboutTextBox1")
    {   
    })
    
    @Html.Obout(new OboutButton("OboutButton1")
    {   
         OnClientClick = "return addItem();"
    })
    
    
JavaScript

    function addItem() {
        if (OboutTextBox1.value() != '') {
            ComboBox1.options.add(OboutTextBox1.value());
            OboutTextBox1.value('');
        } else {
            alert('Please type the text.');
        }

        return false;
    }

    function removeItem() {
        var selectedIndex = ComboBox1.selectedIndex();
        clearSelection();

        if (selectedIndex != -1) {
            ComboBox1.options.remove(selectedIndex);
        } else {
            alert('Please select an item.');

        }

        return false;
    }

    function clearSelection() {
        ComboBox1.selectedIndex(-1);
        ComboBox1.value('');
    }
    
    
obout.com 
obout.com Home 
News 
ASP.NET MVC ComboBox Home   
ASP.NET MVC ComboBox Home 
Examples - 53
Appearance - 1 
Live Styles 
Autocomplete & Filtering - 2 
Autocomplete  
Filtering  
Load on Demand - 7 
Load Items on Demand 
Load Items on Demand with Paging  
Virtual Scrolling  
Initial Text  
Initial Text on Client-Side  
Load Items on Button Click  
Load Items with MinChars  
Multi-Columns - 4 
Grid-like Multi-Columns  
Grid-like Multi-Columns & Tooltips  
Multiple Rows and Columns  
State Selector  
Items with Icons - 3 
Items with Icons  
Grid-like Multi-Columns with Icons  
Multiple Rows and Columns with Icons  
Templates - 3 
Item Templates  
Header Templates  
Populating with Data - 1 
Populate with Data  
Item Selection - 6 
Single Item Selection  
Multi Item Selection  
Get Selected Item  
Get Selected Items  
Set Selected Item  
Set Selected Items  
Mode - 2 
ComboBox  
TextBox  
Master/Detail - 3 
Master/Detail  
Unlimited Detail Levels  
Cascading ComboBoxes  
Integration - 3 
Items with ASP.NET CheckBoxes  
Items with Obout CheckBoxes  
RadioButtons inside ComboBox  
Settings - 8 
AllowCustomText  
AllowEdit  
AutoPostback  
AutoValidate  
Height  
MenuWidth  
OpenOnFocus  
Width  
Server-Side API - 2 
Server-Side Events  
Enable / Disable  
Client-Side API - 8 
Client-Side Events  
Add / Remove Items  
Add Multi-Column Items  
Enable / Disable  
Get Selected Item  
Reset Selection  
Select / Deselect All Items  
Move Items  
Documentation - 1 
ChangeLog