Material skin

Splitter - Tab View

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.

  • DefaultVB.aspx
<%@ Page Language="vb" AutoEventWireup="false"  %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "">
<html xmlns=''>
<head runat="server">
    <title>Telerik ASP.NET Example</title>
    <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"
                    <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 ID="Pane2" Title="Pane2" runat="server" Width="150" IconUrl="Pane2Icon.gif" MinWidth="130"
                        This pane has the <b>TabView</b> property set to <b>ImageOnly</b>.
                    <telerik:RadSlidingPane ID="Pane3" Title="Pane3" runat="server" Width="150" IconUrl="Pane3Icon.gif" MinWidth="130"
                        This pane has the <b>TabView</b> property set to <b>TextOnly</b>.
            <telerik:RadSplitBar ID="RadSplitbar1" runat="server">
            <telerik:RadPane ID="MainPane" runat="server">
                Main Pane

Find Assistance

Help Us Improve

Was this example helpful?