New to Telerik UI for ASP.NET AJAX? Download free 30-day trial

Tab View

Pane1Pane1
Pane2
Pane3
Main Pane

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.

  • DefaultVB.aspx
<%@ 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" />
    <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>

Support & Learning Resources

Find Assistance