New to Telerik UI for ASP.NET AJAX? Download free 30-day trial

Client-side Events

Event log
  • Logged events

This demo review a number of client-side events that RadListBox control supports. They enable you to customize the behavior of the listbox.

RadListBox exposes the following client-side events:

  • OnClientDeleting - Raised when items are deleted. Can be cancelled.
  • OnClientDeleted - Raised after items are deleted.
  • OnClientDragStart - Raised when the user starts dragging items. Can be cancelled.
  • OnClientDragging - Raised when the user moves the mouse while dragging the items.
  • OnClientDropping - Raised when the user drops the dragged items. Can be cancelled.
  • OnClientDropped - Raised after the user drops the dragged items.
  • OnClientItemChecking - Raised when the user check an item. Can be cancelled.
  • OnClientItemChecked - Raised after the item has been checked.
  • OnClientLoad - Raised when the RadListBox client-side object is initialized on the client-side.
  • OnClientMouseOver - Raised when the user hovers an item with the mouse.
  • OnClientMouseOut - Raised the the user moves away the mouse from an item.
  • OnClientReordering - Raised when items are reordered. Can be cancelled.
  • OnClientReordered - Raised after items are reordered.
  • OnClientTransferring - Raised when items are transferred. Can be cancelled.
  • OnClientTransferred - Raised after items are transferred.
  • OnClientSelectedIndexChanged - Raised when the selected index of the listbox has changed after postback.
  • OnClientContextMenu - Raised when the user has right clicked on a menu item.
  • DefaultCS.aspx
  • DefaultCS.aspx.cs
  • scripts.js
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="DefaultCS.aspx.cs" Inherits="ListBox.Examples.ClientSide.ClientEvents.DefaultCS" %>

<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml'>
<head runat="server">
    <title>Telerik ASP.NET Example</title>
    <script src="scripts.js" type="text/javascript"></script>
</head>

<body>
    <form id="form1" runat="server">
    <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
    <telerik:RadSkinManager ID="RadSkinManager1" runat="server" ShowChooser="true" />
    <div class="demo-container size-medium">
        <telerik:RadListBox RenderMode="Lightweight" runat="server" ID="RadListBox1" DataSourceID="SqlDataSource1"
            DataValueField="ProductID" DataTextField="ProductName" AllowReorder="true" Height="290px"
            AllowTransfer="true" TransferToID="RadListBox2" CheckBoxes="true" Width="310px" ButtonSettings-AreaWidth="35px"
            AllowDelete="true" EnableDragAndDrop="true">
        </telerik:RadListBox>
        <telerik:RadListBox RenderMode="Lightweight" runat="server" ID="RadListBox2" Width="280px" Height="290px">
        </telerik:RadListBox>
    </div>

    <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:TelerikConnectionString %>"
        SelectCommand="SELECT [ProductID], [ProductName], [Price] FROM [Movies]" />

    <qsf:EventLogConsole ID="EventLogConsole1" runat="server" AllowClear="true" />

    <qsf:ConfiguratorPanel runat="server" ID="ConfigurationPanel1" Title="Logged events">
        <Views>
            <qsf:View>
                <qsf:ConfiguratorColumn runat="server" Size="Medium">
                    <ul class="fb-group">
                        <li>
                            <asp:checkbox id="LoadCheckBox" runat="server" text="OnClientLoad" autopostback="True" checked="True" />
                        </li>
                        <li>
                            <asp:checkbox id="TransferringCheckBox" runat="server" text="OnClientTransferring" autopostback="True" checked="True" />
                        </li>
                        <li>
                            <asp:checkbox id="TransferredCheckBox" runat="server" text="OnClientTransferred" autopostback="True" checked="True" />
                        </li>
                        <li>
                            <asp:checkbox id="SelectedIndexChangingCheckBox" runat="server" text="OnClientSelectedIndexChanging" autopostback="True" checked="True" />
                        </li>
                        <li>
                            <asp:checkbox id="SelectedIndexChangedCheckBox" runat="server" text="OnClientSelectedIndexChanged" autopostback="True" checked="True" />
                        </li>
                        <li>
                            <asp:checkbox id="ReorderingCheckBox" runat="server" text="OnClientReordering" autopostback="True" checked="True" />
                        </li>
                    </ul>
                </qsf:ConfiguratorColumn>
                <qsf:ConfiguratorColumn runat="server" Size="Narrow">
                    <ul class="fb-group">
                        <li>
                            <asp:checkbox id="ReorderedCheckBox" runat="server" text="OnClientReordered" autopostback="True" checked="True" />
                        </li>
                        <li>
                            <asp:checkbox id="MouseOverCheckBox" runat="server" text="OnClientMouseOver" autopostback="True" checked="True" />
                        </li>
                        <li>
                            <asp:checkbox id="MouseOutCheckBox" runat="server" text="OnClientMouseOut" autopostback="True" checked="True" />
                        </li>
                        <li>
                            <asp:checkbox id="DeletingCheckBox" runat="server" text="OnClientDeleting" autopostback="true" checked="true" />
                        </li>
                        <li>
                            <asp:checkbox id="DeletedCheckBox" runat="server" text="OnClientDeleted" autopostback="true" checked="true" />
                        </li>
                        <li>
                            <asp:checkbox id="DragStartCheckBox" runat="server" text="OnClientDragStart" autopostback="true" checked="true" />
                        </li>
                    </ul>
                </qsf:ConfiguratorColumn>
                <qsf:ConfiguratorColumn runat="server" Size="Narrow">
                    <ul class="fb-group">
                        <li>
                            <asp:checkbox id="DraggingCheckBox" runat="server" text="OnClientDragging" autopostback="true" checked="true" />
                        </li>
                        <li>
                            <asp:checkbox id="DroppingCheckBox" runat="server" text="OnClientDropping" autopostback="true" checked="true" />
                        </li>
                        <li>
                            <asp:checkbox id="DroppedCheckBox" runat="server" text="OnClientDropped" autopostback="true" checked="true" />
                        </li>
                        <li>
                            <asp:checkbox id="ItemCheckingCheckBox" runat="server" text="OnClientItemChecking" autopostback="True" checked="True" />
                        </li>
                        <li>
                            <asp:checkbox id="ItemCheckedCheckBox" runat="server" text="OnClientItemChecked" autopostback="True" checked="True" />
                        </li>
                        <li>
                            <asp:checkbox id="ClientContextMenu" runat="server" text="OnClientContextMenu" autopostback="True" checked="True" />
                        </li>
                    </ul>
                </qsf:ConfiguratorColumn>
            </qsf:View>
        </Views>
    </qsf:ConfiguratorPanel>
    </form>
</body>
</html>

Support & Learning Resources

Find Assistance