RadPageLayout - Telerik ASP.NET PageLayout

Click on the devices below to see how the web content built with RadPageLayout will look like. Resize the window to see in action the responsive capabilities of the control.
desktop
tablet
phone
Isolate this demo as a stand-alone application
  • About this demo
  • C#
  • VB

About RadPageLayout for ASP.NET AJAX

The Page Layout allows you to quickly build your page layout on server-side. Using the control, you can add responsive capabilities to your sites and apps and ensure that their layouts will fit properly on either desktop or mobile devices. The control is also light-weight and could help you reduce the bandwidth of your sites and apps.

You can examine the Responsive Web Design sample application for more information on how to build responsive web sites using the responsive and adaptive capabilities of Telerik UI for ASP.NET AJAX.

RadPageLayout and 90+ other controls are part of UI for ASP.NET AJAX, a comprehensive toolset taking care of the common functionality of your application, while leaving you with more time to work on its business logic.

Key Features

  • Add Responsive Capabilities to your sites and apps
  • Reduce Bandwidth and Fluid Layouts
  • Improved Semantic With Mutable Rendering
  • Support for Fixed and Fluid Layouts
  • Quickly Build Page Layouts
  • Rapid Prototyping

More about RadPageLayout for ASP.NET AJAX
  • DefaultVB.aspx
    • DefaultVB.aspx
    • WindowContent.aspx
  • styles.css
    • styles.css
    • stylesWindow.css
<%@ Page AutoEventWireup="false" Language="vb"  %>

<%@ Register TagPrefix="qsf" Namespace="Telerik.QuickStart" %>
<!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 rel="stylesheet" type="text/css" href="styles.css" />
</head>
<body>
    <form id="form1" runat="server">
    <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
    <telerik:RadSkinManager ID="RadSkinManager1" runat="server" ShowChooser="true" />
    <qsf:MessageBox ID="MessageBox1" runat="server" Type="Info" Icon="Info">
         Click on the devices below to see how the web content built with RadPageLayout will look like. Resize the window to see in action the responsive capabilities of the control.
    </qsf:MessageBox>
    <div class="demo-container no-bg">
        <div class="device desktop">
            <img src="Images/desktop.png" alt="desktop" onclick="openUnderDesktop()" />
        </div>
        <div class="device tablet">
            <img src="Images/tablet.png" alt="tablet" onclick="openUnderTablet()" />
        </div>
        <div class="device phone">
            <img src="Images/phone.png" alt="phone" onclick="openUnderPhone()" />
        </div>

        <telerik:RadWindowManager RenderMode="Lightweight" runat="server" ID="RadWindowManager1">
            <Windows>
                <telerik:RadWindow RenderMode="Lightweight" Style="z-index: 100000" runat="server" Skin="Silk" Behaviors="Resize,Close,Move" NavigateUrl="WindowContent.aspx"></telerik:RadWindow>
            </Windows>
        </telerik:RadWindowManager>

        <script type="text/javascript">
            function openUnderTablet() {
                openDemoWindow(768, 500);
            }

            function openUnderDesktop() {
                openDemoWindow(1060, 768);
            }

            function openUnderPhone() {
                openDemoWindow(360, 720);
            }

            function openDemoWindow(width, height) {
                var windowManager = $find('<%= RadWindowManager1.ClientID%>');

                var demoWindow = windowManager.get_windows()[0];
                demoWindow.set_width(width);
                demoWindow.set_height(height);
                demoWindow.show();
            }
        </script>
    </div>
    </form>
</body>
</html>

Support & Learning Resources

Find Assistance

Help Us Improve

Was this example helpful?