ASP.NET MVC ComboBox - Client-Side API - Events


Event logger:


The ComboBox control provides client-side events that allow you to detect when the end user performs a specific action with the control. The following client-side events are raised by the control:
  • OnSelectedIndexChanged - is raised when the selection is changed;
  • OnItemClick - is raised when an item is clicked (selection doesn't need to change);
  • OnOpen - is raised when the drop down menu is opened;
  • OnClose - is raised when the drop down menu is closed;
  • OnFocus - is raised when the control receives the focus;
  • OnBlur - is raised when the control loses the focus;

To set up event handlers for these events you need to use the ClientSideEvents property of the ComboBox.
View - Aspx

    <% Html.Obout(new OboutTextBox("OboutTextBox1")
    {   
         TextMode = TextBoxMode.MultiLine
    }); %>
    
    <% Html.Obout(new ComboBox("ComboBox1")
    {
        ClientSideEvents = new ComboBoxClientSideEvents() 
        {  
            OnSelectedIndexChanged = "ComboBox1_SelectedIndexChanged",
            OnItemClick = "ComboBox1_ItemClick",
            OnOpen = "ComboBox1_Open",
            OnClose = "ComboBox1_Close", 
            OnFocus = "ComboBox1_Focus",  
            OnBlur = "ComboBox1_Blur"
        }
    }); %>	   
    
    
View - Razor

    @Html.Obout(new OboutTextBox("OboutTextBox1")
    {   
         TextMode = TextBoxMode.MultiLine
    })
    
    @Html.Obout(new ComboBox("ComboBox1")
    {
        ClientSideEvents = new ComboBoxClientSideEvents() 
        {  
            OnSelectedIndexChanged = "ComboBox1_SelectedIndexChanged",
            OnItemClick = "ComboBox1_ItemClick",
            OnOpen = "ComboBox1_Open",
            OnClose = "ComboBox1_Close", 
            OnFocus = "ComboBox1_Focus",  
            OnBlur = "ComboBox1_Blur"
        }
    })
    
    
JavaScript

    function ComboBox1_SelectedIndexChanged(sender, selectedIndex) {
        var currentLogs = '\r\n' + OboutTextBox1.value();
        OboutTextBox1.value('SelectedIndexChanged was raised - new selected index: ' 
        + selectedIndex + currentLogs);
    }

    function ComboBox1_ItemClick(sender, selectedIndex) {
        var currentLogs = '\r\n' + OboutTextBox1.value();
        OboutTextBox1.value('ItemClick was raised - item with index ' + selectedIndex 
        + ' was clicked ' + currentLogs);
    }

    function ComboBox1_Open(sender) {
        var currentLogs = '\r\n' + OboutTextBox1.value();
        OboutTextBox1.value('Open was raised' + currentLogs);
    }

    function ComboBox1_Close(sender) {
        var currentLogs = '\r\n' + OboutTextBox1.value();
        OboutTextBox1.value('Close was raised' + currentLogs);
    }
    function ComboBox1_Focus(sender) {
        var currentLogs = '\r\n' + OboutTextBox1.value();
        OboutTextBox1.value('Focus was raised' + currentLogs);
    }
    function ComboBox1_Blur(sender) {
        var currentLogs = '\r\n' + OboutTextBox1.value();
        OboutTextBox1.value('Blur was raised' + currentLogs);
    }
    
    
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