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

RadWindow and MDI

  • Start
    • UI Components
      • Telerik UI for ASP.NET AJAX
      • Telerik UI for WinForms
      • Telerik UI for WPF
      • Telerik UI for Silverlight
      • Telerik UI for ASP.NET MVC
    • Data
      • Report Server
      • Reporting
    • Content Management
      • Sitefinity CMS
    • Automated Testing
      • WebUI Test Studio
    • Productivity
      • JustMock

Simulating Multiple Document Inteface with RadWindow and RadTabStrip for ASP.NET AJAX

You can use RadWindow and RadTabStrip for ASP.NET AJAX for scenarios which include MDI. In this example, RadTabStrip is used as a "MS Windows" - style taskbar for the RadWindows.

  • DefaultCS.aspx
  • scripts.js
  • styles.css
<%@ Page Language="C#"  %>

<!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" type="text/css" />
    <script src="scripts.js" type="text/javascript"></script>
</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 no-bg">
        <div class="monitor">
            <div id="RestrictionZone" class="restrictionZone"></div>
            <telerik:RadMenu RenderMode="Lightweight" ID="RadMenu1" runat="server" Skin="Web20" ClickToOpen="true" OnClientItemClicking="openNewWindow">
                <Items>
                    <telerik:RadMenuItem Text="Start">
                        <GroupSettings ExpandDirection="Up" Flow="Vertical"></GroupSettings>
                        <Items>
                            <telerik:RadMenuItem Text="UI Components">
                                <GroupSettings Flow="Vertical"></GroupSettings>
                                <Items>
                                    <telerik:RadMenuItem Text="Telerik UI for ASP.NET AJAX" ImageUrl="images/ajax.png"
                                        Value="https://docs.telerik.com/devtools/aspnet-ajax/introduction">
                                    </telerik:RadMenuItem>
                                    <telerik:RadMenuItem Text="Telerik UI for WinForms" ImageUrl="images/win.png" Value="https://docs.telerik.com/devtools/winforms/introduction">
                                    </telerik:RadMenuItem>
                                    <telerik:RadMenuItem Text="Telerik UI for WPF" ImageUrl="images/wpf.png" Value="https://docs.telerik.com/devtools/wpf/introduction">
                                    </telerik:RadMenuItem>
                                    <telerik:RadMenuItem Text="Telerik UI for Silverlight" ImageUrl="images/sl.png"
                                        Value="https://docs.telerik.com/devtools/silverlight/introduction">
                                    </telerik:RadMenuItem>
                                    <telerik:RadMenuItem Text="Telerik UI for ASP.NET MVC" ImageUrl="images/mvc.png"
                                        Value="https://docs.telerik.com/aspnet-mvc/introduction">
                                    </telerik:RadMenuItem>
                                </Items>
                            </telerik:RadMenuItem>
                            <telerik:RadMenuItem Text="Data">
                                <GroupSettings Flow="Vertical"></GroupSettings>
                                <Items>
                                    <telerik:RadMenuItem Text="Report Server" ImageUrl="images/orm.png" Value="https://docs.telerik.com/report-server/introduction">
                                    </telerik:RadMenuItem>
                                    <telerik:RadMenuItem Text="Reporting" ImageUrl="images/rep.png" Value="https://docs.telerik.com/reporting/overview">
                                    </telerik:RadMenuItem>
                                </Items>
                            </telerik:RadMenuItem>
                            <telerik:RadMenuItem Text="Content Management">
                                <Items>
                                    <telerik:RadMenuItem Text="Sitefinity CMS" ImageUrl="images/sitefinity.png" Value="https://www.progress.com/documentation/sitefinity-cms">
                                    </telerik:RadMenuItem>
                                </Items>
                            </telerik:RadMenuItem>
                            <telerik:RadMenuItem Text="Automated Testing">
                                <Items>
                                    <telerik:RadMenuItem Text="WebUI Test Studio" ImageUrl="images/test.png" Value="https://docs.telerik.com/teststudio/">
                                    </telerik:RadMenuItem>
                                </Items>
                            </telerik:RadMenuItem>
                            <telerik:RadMenuItem Text="Productivity">
                                <Items>
                                    <telerik:RadMenuItem Text="JustMock" ImageUrl="images/justcode.png" Value="http://docs.telerik.com/devtools/justmock/introduction.html">
                                    </telerik:RadMenuItem>
                                </Items>
                            </telerik:RadMenuItem>
                        </Items>
                    </telerik:RadMenuItem>
                </Items>
            </telerik:RadMenu>
            <telerik:RadTabStrip RenderMode="Lightweight" OnClientTabSelected="OnClientTabSelected" ID="RadTabStrip1"
                ScrollChildren="true" ScrollButtonsPosition="Middle" Width="730" CssClass="taskbar"
                Orientation="HorizontalBottom" runat="server" Skin="Web20" OnClientLoad="tabStrip_load">
                <Tabs>
                    <telerik:RadTab Style="display: none;"></telerik:RadTab>
                </Tabs>
            </telerik:RadTabStrip>
        </div>
    </div>
    <telerik:RadWindowManager RenderMode="Lightweight" ShowOnTopWhenMaximized="false" Skin="Web20" Width="590"
        Height="360" OnClientActivate="OnClientActivate" OnClientClose="OnClientClose"
        Behaviors="Close,Maximize,Minimize,Move,Reload,Resize" OnClientCommand="OnClientCommand"
        ID="RadWindowManager1" RestrictionZoneID="RestrictionZone" runat="server" EnableShadow="true">
    </telerik:RadWindowManager>
    </form>
</body>
</html>

Support & Learning Resources

Find Assistance