Splitter - Client-side Events

Pane1
Pane2
Pane3

Event log

Isolate this demo as a stand-alone application
  • About this demo
  • C#
  • VB

RadSlidingZone client-side events:

  • OnClientLoad - raised when the initialization of the RadSlidingZone is complete.

RadSlidingPane client-side events:

  • OnClientCollapsing - raised before the RadPane is collapsed.
  • OnClientCollapsed - raised when the RadPane is collapsed.
  • OnClientExpanding - raised before the RadPane is expanded.
  • OnClientExpanded - raised when the RadPane is expanded.
  • OnClientResizing - raised before the RadPane is resized.
  • OnClientResized - raised when the RadPane is resized.
  • OnClientDocking - raised before the RadPane is docked.
  • OnClientDocked - raised when the RadPane is docked.
  • OnClientUndocking - raised before the RadPane is undocked.
  • OnClientUndocked - raised when the RadPane is undocked.

All client-side events take two parameters - sender and arguments:

function OnClientLoad(sender, args) {
    //sender represents the slidingZone that has fired the event
    //the code below obtains the id of the slidingZone that has fired the event
    var id = sender.get_id();
}

All events that end in "ing" (i.e. OnClientResizing)" can be cancelled. To do this you should call the set_cancel(true) method in the event handler:

function OnClientResizing(sender, args) {
    set_cancel(true);
}

Once, the OnClientResizing event is cancelled, the slidingPane cannot change its width and height.

  • DefaultCS.aspx
  • scripts.js
<%@ Page Language="c#" AutoEventWireup="false"  %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns='http://www.w3.org/1999/xhtml'>
<head runat="server">
    <title>Telerik ASP.NET Example</title>
    <script type="text/javascript" src="scripts.js"></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-wide">
        <telerik:RadSplitter RenderMode="Lightweight" ID="RadSplitter1" runat="server" Height="400" Width="800">
            <telerik:RadPane ID="LeftPane" runat="server" Width="22" Scrolling="None">
                <telerik:RadSlidingZone ID="SlidingZone1" runat="server" Width="22" OnClientLoad="OnClientLoad"
                    ClickToOpen="true">
                    <telerik:RadSlidingPane ID="Pane1" Title="Pane1" runat="server" Width="150" OnClientCollapsing="OnClientCollapsing" MinWidth="130"
                        OnClientCollapsed="OnClientCollapsed" OnClientExpanding="OnClientExpanding" OnClientExpanded="OnClientExpanded"
                        OnClientResizing="OnClientResizing" OnClientResized="OnClientResized" OnClientDocking="OnClientDocking"
                        OnClientDocked="OnClientDocked" OnClientUndocking="OnClientUndocking" OnClientUndocked="OnClientUndocked">
                        1
                    </telerik:RadSlidingPane>
                    <telerik:RadSlidingPane ID="Pane2" Title="Pane2" runat="server" Width="150" OnClientCollapsing="OnClientCollapsing" MinWidth="130"
                        OnClientCollapsed="OnClientCollapsed" OnClientExpanding="OnClientExpanding" OnClientExpanded="OnClientExpanded"
                        OnClientResizing="OnClientResizing" OnClientResized="OnClientResized" OnClientDocking="OnClientDocking"
                        OnClientDocked="OnClientDocked" OnClientUndocking="OnClientUndocking" OnClientUndocked="OnClientUndocked">
                        2
                    </telerik:RadSlidingPane>
                    <telerik:RadSlidingPane ID="Pane3" Title="Pane3" runat="server" Width="150" OnClientCollapsing="OnClientCollapsing" MinWidth="130"
                        OnClientCollapsed="OnClientCollapsed" OnClientExpanding="OnClientExpanding" OnClientExpanded="OnClientExpanded"
                        OnClientResizing="OnClientResizing" OnClientResized="OnClientResized" OnClientDocking="OnClientDocking"
                        OnClientDocked="OnClientDocked" OnClientUndocking="OnClientUndocking" OnClientUndocked="OnClientUndocked">
                        3
                    </telerik:RadSlidingPane>
                </telerik:RadSlidingZone>
            </telerik:RadPane>
            <telerik:RadSplitBar ID="RadSplitbar1" runat="server">
            </telerik:RadSplitBar>
            <telerik:RadPane ID="EndPane" runat="server">
            </telerik:RadPane>
        </telerik:RadSplitter>
    </div>
    <qsf:EventLogConsole ID="EventLogConsole1" runat="server" AllowClear="true"></qsf:EventLogConsole>
    </form>
</body>
</html>

Find Assistance

Help Us Improve

Was this example helpful?