Edit this page

Events Overview

The following table lists the client-side events for RadSplitter, RadPane, RadSlidingZone, and RadSlidingPane:

Event Applies to Description
OnClientLoad RadSplitter , RadSlidingZone Occurs when the control is first loaded on the client.
OnClientResizing RadSplitter , RadPane , RadSlidingPane Occurs before the control is resized.
OnClientResized RadSplitter , RadPane , RadSlidingPane Occurs when the control has just been resized.
OnClientCollapsing RadPane , RadSlidingPane Occurs when the pane is about to be collapsed.
OnClientCollapsed RadPane , RadSlidingPane Occurs when the pane has just been collapsed.
OnClientExpanding RadPane , RadSlidingPane Occurs when the pane is about to be expanded
OnClientExpanded RadPane , RadSlidingPane Occurs when the pane has just been expanded.
OnClientDocking RadSlidingPane Occurs when the pane is about to be docked.
OnClientDocked RadSlidingPane Occurs when the pane has just been docked.
OnClientUndocking RadSlidingPane Occurs when the pane is about to be undocked.
OnClientUndocked RadSlidingPane Occurs when the pane has just been undocked.
<script type="text/javascript">
    function confirmDock(sender, eventArgs)
    {
        if (!confirm("Are you sure you want to dock " + sender.get_title() + "?"))
            eventArgs.set_cancel(true);
    }
</script>
<telerik:RadSplitter RenderMode="Lightweight" runat="server" id="RadSplitter1">
 <telerik:RadPane runat="server" id="RadPane1">
 <telerik:RadSlidingZone runat="server" id="RadSlidingZone1">
   <telerik:RadSlidingPane runat="server" Title="Pane1" id="RadSlidingPane1" OnClientBeforeDock="confirmDock" >
     The content of Sliding Pane 1
   </telerik:RadSlidingPane>
   <telerik:RadSlidingPane runat="server" Title="Pane2" id="RadSlidingPane2" OnClientBeforeDock="confirmDock" >
     The content of sliding pane 2
   </telerik:RadSlidingPane>
 </telerik:RadSlidingZone>
 </telerik:RadPane>
 <telerik:RadSplitBar runat="server" id="RadSplitBar1" />
 <telerik:RadPane runat="server" id="RadPane2" >
 </telerik:RadPane>
</telerik:RadSplitter>\

You can also assign event handlers in client-side code. When using the client-side API, pass a reference to the event handler rather than its name. One advantage of using the client-side API is that you can attach multiple event handlers to one event using the standard MS AJAX convention:

function Handler1()
{
    alert("First handler called");
}
function Handler2()
{
    alert("Second handler called");
}

function pageLoad()
{
    var splitter = $find("<%=RadSplitter1.ClientID%>");
    splitter.add_resized(Handler1);
    splitter.add_resized(Handler2);
}       

Another advantage of the client-side API is that you can detach an event handler dynamically:

function removeHandler2()
{
    var splitter = $find("<%=RadSplitter1.ClientID%>");   
    splitter.remove_added(Handler2);
}

Note that on the client-side, the names of events are slightly different than on the server side. The following table shows the correspondence between client-side and server-side names:

Server-Side Name Client-SideName Methods to add and Remove
OnClientLoaded loaded add_loaded, remove_loaded
OnClientBeforeResize beforeResize add_beforeResize, remove_beforeResize
OnClientResized resized add_resized, remove_resized
OnClientBeforeCollapse beforeCollapse add_beforeCollapse, remove_beforeCollapse
OnClientCollapsed collapsed add_collapsed, remove_collapsed
OnClientBeforeExpand beforeExpand add_beforeExpand, remove_beforeExpand
OnClientExpanded expanded add_expanded, remove_expanded
OnClientBeforeDock beforeDock add_beforeDock, remove_beforeDock
OnClientDocked docked add_docked, remove_docked
OnClientBeforeUndock beforeUndock add_beforeUndock, remove_beforeUndock
OnClientUndocked undocked add_undocked, remove_undocked

See Also