RadSplitter for ASP.NET AJAX

RadControls for ASP.NET AJAX

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

 

Event

Applies to

Description

OnClientLoaded

RadSplitter, RadSlidingZone

Occurs when the control is first loaded on the client.

OnClientBeforeResize

RadSplitter, RadPane, RadSlidingPane

Occurs before the control is resized.

OnClientResized

RadSplitter, RadPane, RadSlidingPane

Occurs when the control has just been resized.

OnClientBeforeCollapse

RadPane, RadSlidingPane

Occurs when the pane is about to be collapsed.

OnClientCollapsed

RadPane, RadSlidingPane

Occurs when the pane has just been collapsed.

OnClientBeforeExpand

RadPane, RadSlidingPane

Occurs when the pane is about to be expanded

OnClientExpanded

RadPane, RadSlidingPane

Occurs when the pane has just been expanded.

OnClientBeforeDock

RadSlidingPane

Occurs when the pane is about to be docked.

OnClientDocked

RadSlidingPane

Occurs when the pane has just been docked.

OnClientBeforeUndock

RadSlidingPane

Occurs when the pane is about to be undocked.

OnClientUndocked

RadSlidingPane

Occurs when the pane has just been undocked.

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

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

CopyJavaScript
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 correspondance 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

Other Resources