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

ListBox Client Side Event in ASP.NET

Home > How to > ListBox Client Event

ListBox is a high performance ASP.NET AJAX UI control provided by Kettic. Designed with user experience in mind, this component can provide you with plenty of easy to use API in order to interact with listbox and freely customize it with flexible client side events.

In this guiding page, we will explain all the supported client side events for listbox customization, as well as corresponding Visual C# .NET sample codes for each of them. Examples will be demonstrated for listbox loading, deleting, dragging, dropping, item checking, requesting, reordering / sorting, transferring, mouse controlling, and so on.

Supported ListBox Client Side Events

onDeleting: Developers can use this API to delete an item, as this client side event only occurs when you are about to delete a single item or a batch of items from a listbox. Don't worry if you happen to delete one by mistake, because this event can be easily cancelled.

onDeleted: While the above API occurs before deleting an item, this client side event is fired after an item is successfully deleted from your listbox.

onDragStart: This is a client event that occurs when you start to drag an item. It is also reversible if you don't want it.

onDragging: This is a somewhat interactive client side event as it only occurs during the process of dragging an item. You can easily cancel this event as well.

onDropping: This client side event occurs when you are about to drop a single item or a batch of items. You can also cancel this event if you accidentally drop an item by mistake.

onDropped: This event only occurs after an item or batch items are dropped.

onTransferring: You can make use of this client side events before transferring a single item or a batch of it to a target listbox. You can also cancel this event later on.

onTranferred: Similarly this event occurs once you have successfully transferred a single item or batches of it to a target listbox.

onReordering: If you intend to change the order of your listbox items, you can simply apply this client side events. It can be cancelled later on.

onReordered: When you have applied the API above and changed the item order, this client side event occurs right after it.

onSelectedIndexChanging: As the name suggests, this client side event occurs before you make any change to a single item or batches of it. This event is also reversible.

onSelectedIndexChanged: One you have made changes to any of the listbox item, this client side event occurs after that.

onMouseOut: Users can apply this client side event when the mouse are about to pass out of an item from your Kettic listbox.

onMouseOver: You can use this client side event while the mouse cursor passing over an item from your Kettic listbox.

onItemChecked: Once you have already checked a single item or multiple items from a listbox, you can apply this client side event.

onItemChecking: This client side event is intended to occur as you select a single checkbox or multiple checkboxes with your keyboard or mouse. You can also cancel this event later on.

onContextMenu: This client side event is fired as you right click on a listbox so that a context menu will appear with plenty of options.

onLoad: This is the basic client event which occurs once the Kettic listbox is completely loaded on client side for initialization and customization.

ListBox Client Side Events Sample Codes

In the code tab below we have provided a complete demonstration of JavaScript codes for all the Kettic ListBox client side events introduced in the previous section. Please feel to copy to your UI project / application for evaluation.

<script type="text/javascript">
        function logEvent(eventInfo) {
            var EventLogConsole = $get("<%=EventLogConsole1.ClientID%>");
            EventLogConsole.innerHTML += eventInfo + "<br/>";
        }
        function onDeleting(sender, args) {
            logEvent("Deleting");
        }

        function onDeleted(sender, args) {
            logEvent("Deleted");
        }

        function onDragStart(sender, args) {
            logEvent("DragStart");
        }

        function onDragging(sender, args) {
            logEvent("Dragging");
        }

        function onDropping(sender, args) {
            logEvent("Dropping");
        }

        function onDropped(sender, args) {
            logEvent("Dropped");
        }

        function onTransferring(sender, args) {
            logEvent("Transferring");
        }

        function onTransferred(sender, args) {
            logEvent("Transferred");
        }

        function onReordering(sender, args) {
            logEvent("Reordering");
        }

        function onReordered(sender, args) {
            logEvent("Reordered");
        }

        function onSelectedIndexChanging(sender, args) {
            logEvent("Selected index changing");
        }

        function onSelectedIndexChanged(sender, args) {
            logEvent("Selected index changed");
        }

ASP.NET AJAX UI Controls

ASP.NET AJAX ListBox UI Control

Overview Getting Started Elements

Features

Reorder Transfer Drag and Drop Button Configuration CheckBoxes Load On Demand Templates

Data Binding

XML Data DataSource Data

Client Prpgramming

ListBox Event

Server Prpgramming

ListBox Event ASP.NET AJAX ListView UI Control ASP.NET AJAX ToolBar UI Control ASP.NET AJAX TabControl UI Control ASP.NET AJAX Menu UI Control ASP.NET AJAX ToolTip UI Control