Splitter - Tab View

Pane1Pane1
Pane2
Pane3
Main Pane
Isolate this demo as a stand-alone application
  • About this demo
  • C#
  • VB

The way the pane tabs are rendered is controlled by the TabView property of the RadSlidingPane. The TabView property uses the Telerik.Web.UI.RadSplitterSlidePaneTabView enumeration which has the following values:

  • TextAndImage (default) - both the Icon and Title are displayed in the tab
  • TextOnly - only the Title is displayed
  • ImageOnly - only the Icon is displayed

You can set the url of the icon using the IconUrl property. To set the title of the pane use the Title property.

  • DefaultCS.aspx
<%@ 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>
</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="RadSplitter1" runat="server" Height="300" Width="800">
            <telerik:RadPane ID="LeftPane" runat="server" Width="22" Scrolling="None">
                <telerik:RadSlidingZone enableclientdebug="false" ID="SlidingZone1" runat="server"
                    Width="22">
                    <telerik:RadSlidingPane ID="Pane1" Title="Pane1" runat="server" Width="150" IconUrl="Pane1Icon.gif" MinWidth="130">
                        This pane has the default setting of <b>TabView</b> property.<br />
                        It displays both the icon and the title of the pane.
                    </telerik:RadSlidingPane>
                    <telerik:RadSlidingPane ID="Pane2" Title="Pane2" runat="server" Width="150" IconUrl="Pane2Icon.gif" MinWidth="130"
                        TabView="ImageOnly">
                        This pane has the <b>TabView</b> property set to <b>ImageOnly</b>.
                    </telerik:RadSlidingPane>
                    <telerik:RadSlidingPane ID="Pane3" Title="Pane3" runat="server" Width="150" IconUrl="Pane3Icon.gif" MinWidth="130"
                        TabView="TextOnly">
                        This pane has the <b>TabView</b> property set to <b>TextOnly</b>.
                    </telerik:RadSlidingPane>
                </telerik:RadSlidingZone>
            </telerik:RadPane>
            <telerik:RadSplitBar ID="RadSplitbar1" runat="server">
            </telerik:RadSplitBar>
            <telerik:RadPane ID="MainPane" runat="server">
                Main Pane
            </telerik:RadPane>
        </telerik:RadSplitter>
    </div>
    </form>
</body>
</html>

Find Assistance

Help Us Improve

Was this example helpful?