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

Save State

Left Pane

This summer... Reporting and Windows Forms from telerik

The June issue of MSDN is out earlier than planned and this gives me freedom to blog about some very important developments in the telerik product offering. If you are an MSDN subscriber and you do not completely disregard the product ads, you might have noticed that "telerik is growing" and our ASP.NET product line will be soon complemented by a set of Windows Forms components and a Reporting tool.

If you are interested in getting more information and seeing a preview of the Telerik Reporting and Windows Forms product lines, please stop by booth 819 at TechEd USA to meet with our team. Till TechEd comes, I will be posting on my blog additional information about our upcoming products.

I can only hope that telerik customers are as excited as our team. We have done a lot to come up with a set of compelling products that will further streamline your development and will be a nice addition to your toolbox.

I would like to throw in a quick note that all holders of an active Telerik UI subscription will get the Windows Forms and Reporting products at no cost as part of their subscriptions.


Top Pane
Change content URL

Pane1
Pane2

Pane1
Pane2

Left Pane - free size
Right Pane - free size

Left Pane - percent size - 20%
Right Pane - percent size - 80%

Left Pane - absolute size - 200px
Right Pane - free size

Left Pane - absolute size - 200px
Right Pane - absolute size - 100px

Left Pane - absolute size - 200px
Middle Pane - absolute size - 200px
Right Pane - free size

The state of the RadSplitter control is saved across postbacks. The following Pane properties are persisted:
  • Width
  • Height
  • MinWidth,MaxWidth and MinHeight,MaxHeight
  • Collapsed state
  • Locked
  • Scrollers positions - use the PersistScrollPosition property to control whether to persist the scroll position across postbacks.
  • ContentUrl - only if the pane displays external content and its ContentUrl property is set throught the client-side API

The following SlidingZone properties are persisted:
  • DockedPaneId
  • ExpandedPaneId
  • ClickToOpen

The following SlidingPane properties are persisted:

  • Width
  • Height
  • MinWidth,MaxWidth and MinHeight,MaxHeight
  • Title
  • EnableResize
  • EnableDock

Instructions

In the demo above you can examine different configurations of RadSplitter and how they behave when a PostBackis performed. Click on one of the "Postback" buttons to perform a postback.

  • DefaultCS.aspx
  • styles.css
<%@ Page Language="c#" AutoEventWireup="false"  %>

<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml'>
<head runat="server">
    <title>Telerik ASP.NET Example</title>
    <link href="styles.css" rel="stylesheet" />
</head>
<body>
    <form id="form1" runat="server">
    <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
    <telerik:RadSkinManager ID="RadSkinManager1" runat="server" ShowChooser="true" />
    <div class="demo-containers">
        <div class="demo-container size-thin">
            <telerik:RadSplitter RenderMode="Lightweight" ID="RadSplitter1" runat="server" Height="300" Width="300">
                <telerik:RadPane ID="RadPane1" runat="server" Width="50">
                    Left Pane
                </telerik:RadPane>
                <telerik:RadSplitBar ID="RadSplitbar1" runat="server" CollapseMode="Forward">
                </telerik:RadSplitBar>
                <telerik:RadPane ID="Radpane2" runat="server">
                    <h2>This summer... Reporting and Windows Forms from telerik
                    </h2>
                    <p>
                        The June issue of MSDN is out earlier than planned and this gives me freedom to
                            blog about some very important developments in the telerik product offering. If
                            you are an MSDN subscriber and you do not completely disregard the product ads,
                            you might have noticed that "telerik is growing" and our ASP.NET product line will
                            be soon complemented by a set of Windows Forms components and a Reporting tool.
                    </p>
                    <p>
                        If you are interested in getting more information and seeing a preview of the Telerik
                            Reporting and&nbsp;Windows Forms product lines, please stop by booth 819 at TechEd
                            USA&nbsp;to meet with our team. Till TechEd comes, I will be posting on my blog&nbsp;additional
                            information about our upcoming&nbsp;products.
                    </p>
                    <p>
                        I can only hope that telerik customers are as excited as our team. We have done
                            a lot to come up with a set of compelling products that will further streamline
                            your development and will be a nice addition to your toolbox.
                    </p>
                    <p>
                        I would like to throw in a quick note that all holders of an active Telerik
                            UI subscription will get the Windows Forms and Reporting products at no
                            cost as part of their subscriptions.
                    </p>
                </telerik:RadPane>
            </telerik:RadSplitter><br />
            <qsf:Button CssClass="button" runat="server" ID="Button1" Text="Postback"></qsf:Button>
        </div>

        <div class="demo-container size-thin">
            <telerik:RadSplitter RenderMode="Lightweight" ID="Radsplitter2" runat="server" Height="280" Width="300" Orientation="Horizontal">
                <telerik:RadPane ID="Radpane3" runat="server" Height="100">
                    Top Pane
                </telerik:RadPane>
                <telerik:RadSplitBar ID="Radsplitbar2" runat="server" CollapseMode="Forward">
                </telerik:RadSplitBar>
                <telerik:RadPane ID="Radpane4" runat="server" ContentUrl="http://www.bing.com">
                </telerik:RadPane>
            </telerik:RadSplitter>
            <a href="javascript:ChangePaneUrl()">Change content URL</a>
            <br />
            <br />
            <qsf:Button CssClass="button" runat="server" ID="Button3" Text="Postback"></qsf:Button>
        </div>

    </div>
    <div class="demo-containers">
        <div class="demo-container size-thin">
            <telerik:RadSplitter RenderMode="Lightweight" ID="Radsplitter9" runat="server" Height="300" Width="300">
                <telerik:RadPane ID="Radpane17" runat="server" Width="22" Scrolling="None">
                    <telerik:RadSlidingZone ID="SlidingZone1" runat="server" Width="22" ClickToOpen="true">
                        <telerik:RadSlidingPane ID="RadSlidingPane1" runat="server" Title="Pane1" Width="100">
                            SlidingPane1 - 100px
                        </telerik:RadSlidingPane>
                        <telerik:RadSlidingPane ID="Radslidingpane2" runat="server" Title="Pane2" Width="150">
                            SlidingPane2 - 150px
                        </telerik:RadSlidingPane>
                    </telerik:RadSlidingZone>
                </telerik:RadPane>
                <telerik:RadSplitBar ID="Radsplitbar9" runat="server" CollapseMode="Forward">
                </telerik:RadSplitBar>
                <telerik:RadPane ID="Radpane18" runat="server">
                </telerik:RadPane>
            </telerik:RadSplitter>
            <br />
            <qsf:Button CssClass="button" runat="server" ID="Button4" Text="Postback"></qsf:Button>
        </div>
        <div class="demo-container size-thin">
            <telerik:RadSplitter RenderMode="Lightweight" ID="Radsplitter10" runat="server" Height="300" Width="300">
                <telerik:RadPane ID="Radpane19" runat="server">
                </telerik:RadPane>
                <telerik:RadSplitBar ID="Radsplitbar10" runat="server" CollapseMode="Forward">
                </telerik:RadSplitBar>
                <telerik:RadPane ID="Radpane20" runat="server" Width="22" Scrolling="None">
                    <telerik:RadSlidingZone ID="Radslidingzone2" runat="server" Width="22" ClickToOpen="false"
                        DockedPaneId="Radslidingpane3" ExpandedPaneId="Radslidingpane4" SlideDirection="Left">
                        <telerik:RadSlidingPane ID="Radslidingpane3" runat="server" Title="Pane1" Width="100">
                            SlidingPane3 - 100px
                        </telerik:RadSlidingPane>
                        <telerik:RadSlidingPane ID="Radslidingpane4" runat="server" Title="Pane2" Width="150">
                            SlidingPane4 - 150px
                        </telerik:RadSlidingPane>
                    </telerik:RadSlidingZone>
                </telerik:RadPane>
            </telerik:RadSplitter>
            <br />
            <qsf:Button CssClass="button" runat="server" ID="Button5" Text="Postback"></qsf:Button>
        </div>
    </div>
    <div class="demo-containers">
        <div class="demo-container size-thin">
            <telerik:RadSplitter RenderMode="Lightweight" ID="Radsplitter3" runat="server" Height="300" Width="300">
                <telerik:RadPane ID="Radpane5" runat="server">
                    Left Pane - <b>free</b> size
                </telerik:RadPane>
                <telerik:RadSplitBar ID="Radsplitbar3" runat="server" CollapseMode="Forward">
                </telerik:RadSplitBar>
                <telerik:RadPane ID="Radpane6" runat="server">
                    Right Pane - <b>free</b> size
                </telerik:RadPane>
            </telerik:RadSplitter>
            <br />
            <qsf:Button CssClass="button" runat="server" ID="Button6" Text="Postback"></qsf:Button>
        </div>
        <div class="demo-container size-thin">
            <telerik:RadSplitter RenderMode="Lightweight" ID="Radsplitter4" runat="server" Height="300" Width="300">
                <telerik:RadPane ID="Radpane7" runat="server" Width="20%">
                    Left Pane - <b>percent</b> size - 20%
                </telerik:RadPane>
                <telerik:RadSplitBar ID="Radsplitbar4" runat="server" CollapseMode="Forward">
                </telerik:RadSplitBar>
                <telerik:RadPane ID="Radpane8" runat="server" Width="80%">
                    Right Pane - <b>percent</b> size - 80%
                </telerik:RadPane>
            </telerik:RadSplitter>
            <br />
            <qsf:Button CssClass="button" runat="server" ID="Button7" Text="Postback"></qsf:Button>
        </div>
    </div>
    <div class="demo-containers">
        <div class="demo-container size-thin">
            <telerik:RadSplitter RenderMode="Lightweight" ID="Radsplitter5" runat="server" Height="300" Width="300">
                <telerik:RadPane ID="Radpane9" runat="server" Width="200">
                    Left Pane - <b>absolute</b> size - 200px
                </telerik:RadPane>
                <telerik:RadSplitBar ID="Radsplitbar5" runat="server" CollapseMode="Forward">
                </telerik:RadSplitBar>
                <telerik:RadPane ID="Radpane10" runat="server">
                    Right Pane - <b>free</b> size
                </telerik:RadPane>
            </telerik:RadSplitter>
            <br />
            <qsf:Button CssClass="button" runat="server" ID="Button8" Text="Postback"></qsf:Button>
        </div>
        <div class="demo-container size-thin">
            <telerik:RadSplitter RenderMode="Lightweight" ID="Radsplitter6" runat="server" Height="300" Width="300">
                <telerik:RadPane ID="Radpane11" runat="server" Width="200">
                    Left Pane - <b>absolute</b> size - 200px
                </telerik:RadPane>
                <telerik:RadSplitBar ID="Radsplitbar6" runat="server" CollapseMode="Forward">
                </telerik:RadSplitBar>
                <telerik:RadPane ID="Radpane12" runat="server" Width="100">
                    Right Pane - <b>absolute</b> size - 100px
                </telerik:RadPane>
            </telerik:RadSplitter>
            <br />
            <qsf:Button CssClass="button" runat="server" ID="Button9" Text="Postback"></qsf:Button>
        </div>
    </div>
    <div class="demo-containers">
        <div class="demo-container size-medium">
            <telerik:RadSplitter RenderMode="Lightweight" ID="Radsplitter7" runat="server" Height="300" Width="595">
                <telerik:RadPane ID="Radpane13" runat="server" Width="200">
                    Left Pane - <b>absolute</b> size - 200px
                </telerik:RadPane>
                <telerik:RadSplitBar ID="Radsplitbar7" runat="server" CollapseMode="Forward">
                </telerik:RadSplitBar>
                <telerik:RadPane ID="Radpane14" runat="server" Scrolling="none">
                    <telerik:RadSplitter RenderMode="Lightweight" ID="Radsplitter8" runat="server">
                        <telerik:RadPane ID="Radpane15" runat="server" Width="200">
                            Middle Pane - <b>absolute</b> size - 200px
                        </telerik:RadPane>
                        <telerik:RadSplitBar ID="Radsplitbar8" runat="server" CollapseMode="Forward">
                        </telerik:RadSplitBar>
                        <telerik:RadPane ID="Radpane16" runat="server">
                            Right Pane - <b>free</b> size
                        </telerik:RadPane>
                    </telerik:RadSplitter>
                </telerik:RadPane>
            </telerik:RadSplitter>
            <br />
            <qsf:Button runat="server" ID="Button2" Text="Postback"></qsf:Button>
        </div>
    </div>

    <script type="text/javascript">
        //<![CDATA[
        function ChangePaneUrl() {
            $find("<%= Radsplitter2.ClientID%>").getPaneById("<%= Radpane4.ClientID%>").set_contentUrl("http://www.telerik.com/");
        }
        //]]>
    </script>
    </form>
</body>
</html>

Support & Learning Resources

Find Assistance