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

Nesting RadPageLayout Elements

This article explains how to leverage the CompositeLayoutColumn functionality of RadPageLayout. In the example bellowyou will see how to define such a column, allowing you to have nested rows in your RadPageLayout declaration.

Nesting RadPageLayout Elements

As a variation of the standard layout columns, the composite columns have a content element for the column's own content and arows collection for nested rows. This allows you to easily alternate the orientation of the content in order to get the desired layout.Composite columns have the same attributes as the standard RadPageLayout columns.

Example 1 shows how a composite column is used to nest different RadPageLayout elements, would it be a custom content or nested rows.

Example 1: Nesting different layout elements.

<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<style type="text/css">
    .col, .row, .header, .footer {
        background-color: #78a6ab;
        border: 1px solid #cccccc;
        text-align: center;
        border-radius: 3px;
        margin: 5px 0;
        padding: 5px 10px;
        font: 14px/normal "Segoe UI", sans-serif;
    }

    .header, .footer {
        height: 50px;
    }

    .row {
        height: 70px;
    }

    .col {
        height: 150px;
    }
</style>

<telerik:RadPageLayout ID="RadPageLayout1" runat="server" GridType="Fluid" ShowGrid="false">
    <Rows>
        <telerik:LayoutRow>
            <Content>
                <div class="header">Header</div>
            </Content>
        </telerik:LayoutRow>
        <telerik:LayoutRow>
            <Columns>
                <telerik:LayoutColumn Span="3">
                    <div class="col">Sidebar</div>
                </telerik:LayoutColumn>
                <telerik:CompositeLayoutColumn Span="9">
                    <Content>
                        <div class="row">Top Content</div>
                    </Content>
                    <Rows>
                        <telerik:LayoutRow>
                            <Columns>
                                <telerik:LayoutColumn Span="12" CssClass="fix">
                                    <div class="row">Bottom Content</div>
                                </telerik:LayoutColumn>
                            </Columns>
                        </telerik:LayoutRow>
                    </Rows>
                </telerik:CompositeLayoutColumn>
            </Columns>
        </telerik:LayoutRow>
        <telerik:LayoutRow>
            <Content>
                <div class="footer">Footer</div>
            </Content>
        </telerik:LayoutRow>
    </Rows>
</telerik:RadPageLayout>

See Also

In this article