ASP.NET Easy Menu - How To use the OnClientClick property

What is the OnClientClick property



The value of this property should specify a Javascript code to execute when the item is clicked:

<oem:EasyMenu id="Easymenu1" runat="server">
    <Components>
        <oem:MenuItem InnerHtml="test on client click" ID="menuItem1"
             OnClientClick="alert('this is a test message');" ></oem:MenuItem>
    </Components>
</oem:EasyMenu>

Hover this to test:
   

The Javascript code can make use of four parameter passed by Easy Menu to the executing function in OnClientClick:
    · targetEl - a reference to the element to which the menu is attached
    · menuObject - a reference to the menu item that was clicked
    · menuEvent - the event that triggered the item selection
    · easyMenu - the menu to containing the items that was clicked belongs to


Using the optional parameters of OnClientClick



<oem:EasyMenu id="Easymenu2" runat="server">
    <Components>
        <oem:MenuItem InnerHtml="Change to Red" ID="menuItem2"
             OnClientClick="targetEl.style.backgroundColor='red';"></oem:MenuItem>
        <oem:MenuItem InnerHtml="Change to Green" ID="menuItem3"
             OnClientClick="targetEl.style.backgroundColor='green';"></oem:MenuItem>
        <oem:MenuItem InnerHtml="Change to Blue" ID="menuItem4"
             OnClientClick="targetEl.style.backgroundColor='blue';"></oem:MenuItem>
        <oem:MenuSeparator ID="menuSeparator1"></oem:MenuSeparator>
        <oem:MenuItem InnerHtml="Change this text" ID="menuItem5"
             OnClientClick="menuObject.contentCell.innerHTML = prompt('Choose a new text', 'new text');"></oem:MenuItem>
        <oem:MenuSeparator ID="menuSeparator2"></oem:MenuSeparator>
        <oem:MenuItem InnerHtml="Show coords on click" ID="menuItem6"
             OnClientClick="alert('Left: ' + menuEvent.clientX + '\r\n' + 'Top: ' + menuEvent.clientY);"></oem:MenuItem>
        <oem:MenuSeparator ID="menuSeparator3"></oem:MenuSeparator>
        <oem:MenuItem InnerHtml="Don't hide this menu" ID="menuItem7" AutoHideMenu="False"></oem:MenuItem>
        <oem:MenuItem InnerHtml="Hide this menu" ID="menuItem8" AutoHideMenu="False"
             OnClientClick="easyMenu.hideMenu(null, null, true);"></oem:MenuItem>
    </Components>
</oem:EasyMenu>

The first three options will change the background color of the square that was right clicked, while the fourth will allow you to choose a text for the clicked item and the fifth will show you the coordonates of the mouse pointer upon the click on the item. The last item shows you how to hide the menu when the AutoHideMenu option is set to false. The item before it shows the default behavior if the AutoHideMenu is false and the menu isn't hidden by user code.

Hover these to test:
   
   
   
 
 


"Having used both Telerik and Component Art controls I can definitely say that the Obout Suite offers the most flexible and easy to implement controls about. And for the few problems I have had the support team have been most helpful, often providing showcase examples to help me understand things."

Tim Finch

Random testimonial   All testimonials

obout.com
obout.com Home
News
Easy Menu Home 
Easy Menu Home
Download
Site Map
Compare with Text Menu
Examples - 79
Appearance - 11
Live Styles
Horizontal Right To Left
Transparent - over flash
MSDN 2
With rounded corners
Keep Open New
Expand Animations New
Vertical 1
MS Vertical
Vertical Right To Left
Context Menu - 10
World Map
Default
Futura
VSNET
Windows
WindowsXP
Style 1
Style 2
Style 3
Right To Left
Tab Strip - 8
Tab Strip
Live Styles
Tab Strip - With postback New
Parent Child Tabstrip New
Tab Strip - Wizard
Tab Strip - Wizard 2
Add / Remove Tabs
Add / Remove Tabs 2
Time Picker - 1
Time Picker
Populating with data - 5
Binding to DataReader New
Binding to DataTable New
Binding to SqlDataSource New
Binding to ObjectDataSource New
Fast loading time
Multi Column Menu - 2
Multi Column Submenu New
Multi Column Submenu with Icons New
Multiple menus - 3
Multiple menus
Multiple menus 2
Horizontal menu and Tab Strip
Operations - 9
ShowEvent New
Add / Remove Items New
Hide / Show Items New
Menu item inner HTML New
Attach / Detach
Menu Events
OnClientClick
Menu item postback
Show menu New
Align/Position - 4
Align
Advanced Align
Menu Offsets
Position
Integration  - 14
TreeView - 5
Attach to TreeView
Dynamic Loading
Inside callback panel
Select the TreeView node New
TreeView inside Easy Menu
AJAX Page - 3
Inside AJAX Page panel
Inside MS AJAX panel
Add items server side
Grid - 2
Use With Grid
Inside DataGrid column
Inside WindowNew
Build from SiteMap
Over Java Applet
With Data Controls New
Other features - 12
AttachTo
Menu Icons
Menu Customize
Long vertical menus
Long menu items
Disabled menu item
Sub-menus
Dynamic Easy Menu Item
Full Easy Menu width
Hide menu with time delay
Custom sliding effect New
Custom Menu Content New
Knowledge Base - 1
Knowledge Base
Documentation - 4
Server side
Client side
Using the correct path
ChangeLog
Tutorials - 2
Using Database
Postback Persistance