WebForms PageLayout Overview

The RadPageLayout control is a really simple and light-weight control for creating layouts. With the proper configuration it becomes a powerful layout tool that addresses both desktop and mobile device design. It is specially designed to help you adapt your page look good regardless of the device that you use – this includes extra large, large, medium, small or extra small devices.

Telerik UI for ASP.NET AJAX Ninja image

The Page Layout is part of Telerik UI for ASP.NET AJAX, a professional grade UI library with 120+ components for building modern and feature-rich applications. To try it out sign up for a free 30-day trial.

You must add the <meta name="viewport" content="width=device-width, initial-scale=1.0" /> tag to your page <head> to allow browsers to honor @media (max-width) rules. They are heavily used to create responsive layouts, and RadPageLayout also relies on them.

Elements

Modeled after a grid system, the RadPageLayout control has only two elements - rows and columns. Using those you can create grid-like wireframes that can then fill with content.

  • Rows - The rows are simple containers for columns. They also have an additional placeholder element (<Content>) for own content. A row has no own specific properties, only the standard ones.

  • Columns - The column is the structural unit of design. If you are not familiar with grid systems, you can view them as a sort of table cell (but not quite).

In addition to the standard properties, a column has few specific properties that are covered in the Columns help article.

The span attribute sets the size (or width) of a columns, measured grid units. The grid unit itself is an abstract unit and represents fraction of the total container width. In the case of this control, one grid unit equals 1/12 of the total width. Therefore the sum of the values for all spans in a single row can be up to 12 units .

Properties

RadPageLayout control provides two sets of properties:

  • Global properties that can be applied to the control container, rows and columns.

  • Specific properties that are applied only on the control container or columns.

Global properties are HtmlTag, visibility properties (see Responsive Layout topic for more details), StaticId, as well as inherited properties such as CssClass, ID etc. We use properties to extend the rendering of the control. For instance, the HtmlTag property, as the name suggests, changes the HTML element that is going to be rendered for that server-side control. The StaticId property specifies the actual rendered Id attribute and so on.

Putting it All Together

To jumpstart building layouts, you need only one attribute - the span attribute. It specify how wide a column is in terms of grid units. (See Grid Based Layout help topic for more details on grids and grid based layouts).

<head runat="server">
    <title></title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <style type="text/css">
        .borderCssClass div {
            border: 1px solid red;
        }
    </style>
</head>
<telerik:RadPageLayout ID="RadPageLayout1" runat="server" GridType="Fluid" CssClass="borderCssClass">
    <Rows>
        <telerik:LayoutRow >
                     <Columns>
                <telerik:LayoutColumn Span="8">
                    Main content here
                </telerik:LayoutColumn>
                <telerik:CompositeLayoutColumn Span="4">
                    <Rows>
                        <telerik:LayoutRow>
                            <Content>additional content 1</Content>
                        </telerik:LayoutRow>
                        <telerik:LayoutRow>
                            <Content> additional content 2</Content>
                        </telerik:LayoutRow>
                    </Rows>

                </telerik:CompositeLayoutColumn>
            </Columns>
        </telerik:LayoutRow>
   </Rows>
</telerik:RadPageLayout>    

Figure 1. RadPageLayout control

page-layout-structure

That is all you need to create a very simple layout.

See Also

In this article