All Telerik .NET tools and Kendo UI JavaScript components in one package. Now enhanced with:
New to Telerik UI for ASP.NET AJAX? Download free 30-day trial
RadSplitter provides a flexible client-side API that allows you to change easily the configuration in the browser.
Getting the RadSplitter client-side object:
var
splitter = $find(
"<%= RadSplitter1.ClientID %>"
);
Once you get the client-side object of RadSplitter, you can use the getPaneById method to get the instance of a particular pane. Example:
pane = splitter.getPaneById(
"<%= RadPane1.ClientID %>"
You can also use the getPaneByIndex method to get an instance of a pane. Example:
pane = splitter.getPaneByIndex(1);
or to get the collection of all panes in the splitter using the getPanes method:
panes = splitter.getPanes();
// get the panes collection
// loop the the collection
for
(
i=0; i < panes.length; i ++)
{
paneObj = panes[i];
// get instance of the RadPane
}
Using the client-side API you can collapse, expand, resize. Examples:
isCollapseSuccess = pane.collapse();
// collapse this pane
isExpandSuccess = pane.expand(pane);
// expand this pane
pane.resize(100);
// increase panes size with 100px
You can use the get_width, get_height methods to get the size of the splitter or panes. Example:
splitterWidth = splitter.get_width();
splitterHeight = splitter.get_height();
paneWidth = pane.get_width();
paneHeight = pane.get_height();
<%@ Page Language="vb" AutoEventWireup="false" %> <!DOCTYPE html> <html xmlns='http://www.w3.org/1999/xhtml'> <head runat="server"> <title>Telerik ASP.NET Example</title> </head> <body> <form id="form1" runat="server"> <telerik:RadScriptManager runat="server" ID="RadScriptManager1" /> <telerik:RadSkinManager ID="RadSkinManager1" runat="server" ShowChooser="true" /> <script src="scripts.js" type="text/javascript"></script> <telerik:RadScriptBlock ID="RadSCriptBlock1" runat="server"> <script type="text/javascript"> //<![CDATA[ $splitterClientApiDemo.ResizeModesListID = "<%=ResizeModesList.ClientID%>"; $splitterClientApiDemo.LeftPaneID = "<%=LeftPane.ClientID%>"; $splitterClientApiDemo.MiddlePaneID = "<%=MiddlePane.ClientID%>"; $splitterClientApiDemo.ExternalContentPane = "<%=ExternalContentPane.ClientID%>"; $splitterClientApiDemo.EndPaneID = "<%=EndPane.ClientID%>"; //]]> </script> </telerik:RadScriptBlock> <div class="demo-container size-medium"> <telerik:RadSplitter RenderMode="Lightweight" ID="RadSplitter1" runat="server" Height="200" Width="595" OnClientLoad="SplitterLoad"> <telerik:RadPane ID="LeftPane" runat="server" Width="120"> Left Pane - 120px<br /> Left Pane - 120px<br /> Left Pane - 120px<br /> Left Pane - 120px<br /> Left Pane - 120px<br /> Left Pane - 120px<br /> -----------------<br /> Left Pane - 120px<br /> Left Pane - 120px<br /> Left Pane - 120px<br /> Left Pane - 120px<br /> Left Pane - 120px<br /> Left Pane - 120px<br /> Left Pane - 120px<br /> Left Pane - 120px<br /> Left Pane - 120px<br /> Left Pane - 120px<br /> Left Pane - 120px<br /> Left Pane - 120px<br /> Left Pane - 120px<br /> Left Pane - 120px<br /> Left Pane - 120px<br /> Left Pane - 120px<br /> </telerik:RadPane> <telerik:RadSplitBar ID="RadSplitBar1" runat="server" CollapseMode="Both"> </telerik:RadSplitBar> <telerik:RadPane ID="MiddlePane" runat="server" Width="100"> Middle Pane1 - 100px </telerik:RadPane> <telerik:RadSplitBar ID="RadSplitBar2" runat="server" CollapseMode="Backward"> </telerik:RadSplitBar> <telerik:RadPane ID="ExternalContentPane" ContentUrl="http://www.telerik.com" runat="server" Width="300"> </telerik:RadPane> <telerik:RadSplitBar ID="Radsplitbar3" runat="server"> </telerik:RadSplitBar> <telerik:RadPane ID="EndPane" runat="server"> End Pane - free size </telerik:RadPane> </telerik:RadSplitter> </div> <qsf:ConfiguratorPanel ID="Configuratorpanel1" runat="server"> <Views> <qsf:View Title="Splitter"> <qsf:ConfiguratorColumn ID="ConfiguratorColumn1" runat="server" Title="Splitter's Resize mode" Size="Narrow"> <qsf:RadioButtonList ID="ResizeModesList" runat="server" AutoPostBack="false" onclick="ChangeSplitterResizeMode();"> <asp:ListItem Text="AdjacentPane" Selected="True"></asp:ListItem> <asp:ListItem Text="Proportional"></asp:ListItem> <asp:ListItem Text="EndPane"></asp:ListItem> </qsf:RadioButtonList> </qsf:ConfiguratorColumn> <qsf:ConfiguratorColumn ID="ConfiguratorColumn2" runat="server" Title="Collapsing" Size="Narrow"> <span class="checkbox"> <asp:CheckBox ID="CollapseLeftPane" Text="Collapse Left Pane" runat="server" onclick="ToggleCollapsePane('LeftPane')" /></span><br /> <span class="checkbox"> <asp:CheckBox ID="CollapseEndPane" Text="Collapse End Pane" runat="server" onclick="ToggleCollapsePane('EndPane')" /></span> </qsf:ConfiguratorColumn> <qsf:ConfiguratorColumn ID="ConfiguratorColumn3" runat="server" Title="Splitter's Size" Size="Narrow"> <qsf:CheckBoxList ID="IncreaseSizeList" runat="server" AutoPostBack="false" onclick="ResizeSplitter(100);"> <asp:ListItem Text="Increase Splitter size"></asp:ListItem> </qsf:CheckBoxList> </qsf:ConfiguratorColumn> </qsf:View> <qsf:View Title="Pane"> <qsf:ConfiguratorColumn ID="ConfiguratorColumn4" runat="server" Size="Narrow" Title="Pane's Size"> <span class="checkbox"> <asp:CheckBox ID="LockPaneChkbx" Text="Lock the 'Middle Pane' size" runat="server" onclick="TogglePaneLock('MiddlePane')" /></span> <span class="checkbox"> <asp:CheckBox ID="IncreaseSizeChkbx" Text="Increase 'Left Pane' size" runat="server" onclick="ResizePane(50, 'LeftPane')" /></span> </qsf:ConfiguratorColumn> <qsf:ConfiguratorColumn ID="ConfiguratorColumn5" runat="server" Title="External Content" Size="Medium"> <a href="http://www.stumbleupon.com/" target="<%=ExternalContentPane.ClientID%>">Set it via 'target' attribute</a><br /> <qsf:Button ID="ExtUrlBtn" runat="server" AutoPostBack="false" Text="Set it via client-side API" OnClientClicked="LoadExternalContent"></qsf:Button> </qsf:ConfiguratorColumn> <qsf:ConfiguratorColumn ID="ConfiguratorColumn6" runat="server" Size="Narrow" Title="Scrolling"> <asp:Label ID="ScrollingLabel" runat="server" Text="Scroll 'Left Pane' with 50px:" AssociatedControlID="ScrollingBtn"></asp:Label><br /> <qsf:Button ID="ScrollingBtn" runat="server" Text="Scroll" AutoPostBack="false" OnClientClicked="function(){ScrollPane('LeftPane', 0, 80);}"></qsf:Button> </qsf:ConfiguratorColumn> <qsf:ConfiguratorColumn ID="ConfiguratorColumn7" runat="server" Size="Medium" Title="JSON"> <asp:Label ID="GetJsonLabel" runat="server" Text="Get 'Left Pane' state as JSON string:" AssociatedControlID="GetJsonBtn"></asp:Label><br /> <qsf:Button ID="GetJsonBtn" runat="server" Text="Get JSON" AutoPostBack="false" OnClientClicked="function(){GetPaneState('LeftPane');}"></qsf:Button> </qsf:ConfiguratorColumn> </qsf:View> </Views> </qsf:ConfiguratorPanel> </form> </body> </html>