NavigationBar Item Client Side Event|UI Control for ASP.NET AJAX, C#, VB.NET

NavigationBar Item Client Side Event in ASP.NET

Home > How to > NavigationBar Items Client Event

With the purpose to help users have an easy interaction with the navigation bar in web browser, the PerNavigationBar control specifically offers users a set of easily- and flexibly- used client-side APIs. In this article, we will offer a brief introduction to each of these supported client-side events. Besides, we also write a sample javascript function to guide you how to use these events in aspx web page.

Available Client-side Events

Here we list the client-side events that are supported by the PerNavigationBar control. And you can use these events to design the behavior of the navigation bar.

OnMouseOver: this event is raised when the mouse pointer moves on anavigation bar item.
OnMouseOut: this event is raised when the mouse pointer moves off a navigation bar item.
OnClicking: this event is raised when the navigation bar is going to respond to the click that user just gives.
OnClicked: this event is triggered once the navigation bar responds to an item click.
OnExpand: this event is called once an item is expanded.
OnCollapse: this event is called once an item is collapsed.
OnFocus: this event occurs when an item gets focus.
OnBlur: this event is called when an item loses focus.

How to Use Client-side Events

If you want to use above events, you just need to write a javascript function that can be called when the event is triggered. After that, you can define the name of the javascript function as the value of the corresponding PerNavigationBar property

Here we attach an example to show you how to use these client-side events APIs in aspx web page.

<script type="text/javascript" language="javascript">
            function logEvent(message) {
                var eventLogConsole = $get("<%=EventLogConsole1.ClientID%>");
                eventLogConsole.innerHTML += message + "<br>";
            }
            function OnMouseOver(sender, eventArgs) {
                logEvent("Mouse over: " + eventArgs.get_item().get_text());
            }

            function OnMouseOut(sender, eventArgs) {
                logEvent("Mouse out: " + eventArgs.get_item().get_text());
            }

            function OnClicking(sender, eventArgs) {
                logEvent("On clicking: " + eventArgs.get_item().get_text());
            }

            function OnClicked(sender, eventArgs) {
                logEvent("On clicked: " + eventArgs.get_item().get_text());
            }

            function OnExpand(sender, eventArgs) {
                logEvent("On expand: " + eventArgs.get_item().get_text());
            }

            function OnCollapse(sender, eventArgs) {
                logEvent("On collapse: " + eventArgs.get_item().get_text());
            }

            function OnFocus(sender, eventArgs) {
                logEvent("On focus: " + eventArgs.get_item().get_text());
            }

            function OnBlur(sender, eventArgs) {
                logEvent("On blur: " + eventArgs.get_item().get_text());
            }
            function ClearEventsLog() {
                var eventLogConsole = $get("<%=EventLogConsole1.ClientID%>");
                eventLogConsole.innerHTML = "";
                return false;

            }

</script>

If you meet any problems in the testing process of above client side events, please feel free to contact us.

ASP.NET AJAX UI Controls

ASP.NET AJAX Chart UI Control ASP.NET AJAX Grid UI Control ASP.NET AJAX Barcode UI Control ASP.NET AJAX Button UI Control ASP.NET AJAX Calendar UI Control

ASP.NET AJAX NavigationBar UI Control

Overview Getting Started Elements Templates Features

Data Binding

ObjectDataSource Data Database Data XML Data

Client Prpgramming

Item Event

Server Programming