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);
    }
    
    

"THANK YOU AGAIN!!!! IT WORKS!!!! Anyway, I don't know how much to thank you for your quick and efficient support. I've been computer developer for almost 8 years now, and I have never found a company with a support so fast and effective. My real compliment to you and your company."

Alessandra Monica

Random testimonial   All testimonials

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