Splitter - Client-side Events

Top Pane
Bottom Pane
Right Pane

Event log

Isolate this demo as a stand-alone application
  • About this demo
  • C#
  • VB
RadSplitter client-side events:
  • OnClientLoad - raised when the initialization of the RadSplitter is complete.
  • OnClientResizing - raised before the RadSplitter resizes.
  • OnClientResized - raised when the RadSplitter resizes.

RadPane 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.

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

function OnClientLoad(sender, args) {
    //sender represents the splitter that has fired the event
    //the code below obtains the id of the splitter 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 splitter/pane cannot change its width and height.

Instructions

Collapse/Resize the vertical splitter to see how the client-side events are raised.

  • 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="OuterSplitter" runat="server" Height="200" Width="800" OnClientLoad="SplitterLoad">
            <telerik:RadPane ID="MainPane" runat="server" Width="300" Scrolling="None" OnClientCollapsing="PaneCollapsing"
                OnClientCollapsed="PaneCollapsed" OnClientResizing="PaneResizing" OnClientExpanding="PaneExpanding"
                OnClientExpanded="PaneExpanded" OnClientResized="PaneResized">
                <telerik:RadSplitter RenderMode="Lightweight" ID="NestedSplitter" runat="server" Orientation="Horizontal"
                    OnClientLoad="SplitterLoad" OnClientResizing="SplitterResizing" OnClientResized="SplitterResized">
                    <telerik:RadPane ID="TopPane" runat="server" OnClientCollapsing="PaneCollapsing"
                        OnClientCollapsed="PaneCollapsed" OnClientResizing="PaneResizing" OnClientExpanding="PaneExpanding"
                        OnClientExpanded="PaneExpanded" OnClientResized="PaneResized">
                        Top Pane
                    </telerik:RadPane>
                    <telerik:RadSplitBar ID="RadSplitbar2" runat="server" CollapseMode="Forward">
                    </telerik:RadSplitBar>
                    <telerik:RadPane ID="BottomPane" runat="server" OnClientCollapsing="PaneCollapsing"
                        OnClientCollapsed="PaneCollapsed" OnClientResizing="PaneResizing" OnClientExpanding="PaneExpanding"
                        OnClientExpanded="PaneExpanded" OnClientResized="PaneResized">
                        Bottom Pane
                    </telerik:RadPane>
                </telerik:RadSplitter>
            </telerik:RadPane>
            <telerik:RadSplitBar ID="RadSplitbar1" runat="server" CollapseMode="Backward">
            </telerik:RadSplitBar>
            <telerik:RadPane ID="RightPane" runat="server" OnClientExpanding="PaneExpanding"
                OnClientCollapsing="PaneCollapsing" OnClientResizing="PaneResizing" OnClientExpanded="PaneExpanded"
                OnClientCollapsed="PaneCollapsed" OnClientResized="PaneResized">
                Right Pane
            </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?