Dock - Content

  Click for postback. Dock states will be preserved on postback.
Text property
  • Collapse
  • Close
For simple static texts you could use the designer to set the Text property
Text property
  • Collapse
  • Close
You could also use the code-behind to set the Text property:
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Curabitur euismod metus et arcu. Donec at velit eu massa vulputate condimentum. Duis pulvinar rutrum lectus. In ligula. In vel quam id odio aliquam viverra. Nullam aliquet nulla ac lectus. Integer ullamcorper nunc vel risus. Donec leo diam, lacinia molestie, semper vel, molestie tempor, risus. Nulla lobortis, dui non scelerisque imperdiet, leo leo viverra est, ac convallis velit metus id pede. Quisque libero leo, accumsan et, placerat sed, viverra sit amet, justo. Morbi sed massa. Etiam nec purus. Phasellus dignissim, pede eu venenatis faucibus, felis lorem feugiat ligula, vitae bibendum sapien dolor sed enim. Aenean eget turpis vitae est molestie porttitor. Duis quis lorem. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
ContentTemplate
  • Collapse
  • Close
You can put text and controls in the ContentTemplate.
You can also directly access the inner controls fromthe code-behind and set their properties!
December, 2016
ContentContainer
  • Collapse
  • Close
You should always add the controls because it is not persisted in the ViewState.
December, 2016
Isolate this demo as a stand-alone application
  • About this demo
  • C#
  • VB

There are three ways to customize the content of aRadDock control:

  • Create ContentTemplate—in design mode you can add controls to the ContentTemplate property and RadDock will automatically display them in run time. In addition, you could create a class which implements the ITemplate interface and then set its instance to the ContentTemplate property from the code-behind.
  • Add controls to the ContentContainer—this is the container control for the ContentTemplate. Instead of creating a class which implements ITemplate, you could directly add controls to the ContentContainer.Controls collection. This is slightly easier to implement, but you cannot easily reuse the template in other controls.
  • Set the Text property—if the RadDock control should display only plain text, you could set this property, instead of adding controls to the ContentTemplate or the ContentContainer.
  • DefaultCS.aspx
  • DefaultCS.aspx.cs
  • styles.css
<%@ Page Language="c#" AutoEventWireup="true" Inherits="Telerik.Web.Examples.Dock.Content.DefaultCS"CodeFile="DefaultCS.aspx.cs"  %>

<%@ Register TagPrefix="qsf" Namespace="Telerik.QuickStart" %>
<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
<!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>
    <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-container">
        <div style="padding-bottom: 10px;">
            <telerik:RadButton RenderMode="Lightweight" runat="server" ID="Button1" Text="Postback"></telerik:RadButton> &nbsp; Click for postback. Dock states will be preserved on postback.
        </div>
        <telerik:RadDockLayout runat="server" ID="RadDockLayout1">
            <telerik:RadDockZone runat="server" ID="RadDockZone1" Style="float: left; margin-right: 70px; margin-bottom: 20px; background: #f5f4e8;"
                Width="300" MinHeight="500">
                <telerik:RadDock RenderMode="Lightweight" runat="server" ID="RadDock1" Title="Text property" Text="For simple static texts you could use the designer to set the Text property" CssClass="higherZIndex">
                </telerik:RadDock>
                <telerik:RadDock RenderMode="Lightweight" runat="server" ID="RadDock2" Title="Text property" CssClass="higherZIndex">
                </telerik:RadDock>
            </telerik:RadDockZone>
            <telerik:RadDockZone runat="server" ID="RadDockZone2" Style="float: left; background: #d5f0fa; margin-bottom: 20px; margin-right: 70px;"
                Width="380" MinHeight="500">
                <telerik:RadDock RenderMode="Lightweight" runat="server" ID="RadDock3" Title="ContentTemplate" CssClass="higherZIndex">
                    <ContentTemplate>
                        <div style="margin: 10px;">
                            <asp:Label runat="server" ID="Label1">You can put text and controls in the ContentTemplate.</asp:Label><br />
                            <asp:Label runat="server" ID="Label2"></asp:Label>
                        </div>
                        <div style="margin: 10px;">
                            <telerik:RadCalendar RenderMode="Lightweight" runat="server" ID="calendar1" ></telerik:RadCalendar>
                        </div>
                    </ContentTemplate>
                </telerik:RadDock>
            </telerik:RadDockZone>
            <telerik:RadDockZone runat="server" ID="RadDockZone3" Style="float: left; background: #fff3c8; margin-bottom: 20px;"
                Width="380" MinHeight="500">
                <telerik:RadDock RenderMode="Lightweight" runat="server" ID="RadDock4" Title="ContentContainer" CssClass="higherZIndex">
                </telerik:RadDock>
            </telerik:RadDockZone>
        </telerik:RadDockLayout>
    </div>
    </form>
</body>
</html>

Find Assistance

Help Us Improve

Was this example helpful?