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

    Client-side Events

    Event log
    • The listbox is loaded
    • 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