New to Telerik UI for ASP.NET AJAXStart a free 30-day trial

Events Overview

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

EventApplies toDescription
OnClientLoadRadSplitter , RadSlidingZoneOccurs when the control is first loaded on the client.
OnClientResizingRadSplitter , RadPane , RadSlidingPaneOccurs before the control is resized.
OnClientResizedRadSplitter , RadPane , RadSlidingPaneOccurs when the control has just been resized.
OnClientCollapsingRadPane , RadSlidingPaneOccurs when the pane is about to be collapsed.
OnClientCollapsedRadPane , RadSlidingPaneOccurs when the pane has just been collapsed.
OnClientExpandingRadPane , RadSlidingPaneOccurs when the pane is about to be expanded
OnClientExpandedRadPane , RadSlidingPaneOccurs when the pane has just been expanded.
OnClientDockingRadSlidingPaneOccurs when the pane is about to be docked.
OnClientDockedRadSlidingPaneOccurs when the pane has just been docked.
OnClientUndockingRadSlidingPaneOccurs when the pane is about to be undocked.
OnClientUndockedRadSlidingPaneOccurs when the pane has just been undocked.
ASP.NET
<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:

JavaScript
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:

JavaScript
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 NameClient-SideNameMethods to add and Remove
OnClientLoadedloadedadd_loaded, remove_loaded
OnClientBeforeResizebeforeResizeadd_beforeResize, remove_beforeResize
OnClientResizedresizedadd_resized, remove_resized
OnClientBeforeCollapsebeforeCollapseadd_beforeCollapse, remove_beforeCollapse
OnClientCollapsedcollapsedadd_collapsed, remove_collapsed
OnClientBeforeExpandbeforeExpandadd_beforeExpand, remove_beforeExpand
OnClientExpandedexpandedadd_expanded, remove_expanded
OnClientBeforeDockbeforeDockadd_beforeDock, remove_beforeDock
OnClientDockeddockedadd_docked, remove_docked
OnClientBeforeUndockbeforeUndockadd_beforeUndock, remove_beforeUndock
OnClientUndockedundockedadd_undocked, remove_undocked

See Also

In this article
See Also
Not finding the help you need?
Contact Support