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

Outlook Navigation

Favorite Folders

  • Personal Folders
    • Deleted Items (6)
    • Drafts
    • Inbox (14)
      • Invoices
      • Tasks
      • Other
    • Junk E-mail
    • Outbox
    • Sent Items
    • Search Folders

All Mail Folders

  • Personal Folders
    • Deleted Items (6)
    • Drafts
    • Inbox (14)
      • Invoices
      • Tasks
      • Other
    • Junk E-mail
    • Outbox
    • Sent Items
    • Search Folders

Calendar

December 2024

  • Favourite Folders
  • All Mail Folders
  • Calendar
  • Others

This example illustrates how you can easily integrate RadPanelBar, RadMultiPage and RadTreeView to simulate Outlook navigation.

Drag a node from one RadTreeView and drop it onto another RadTreeView in a different pageview when hovering the panel item.

  • DefaultCS.aspx
  • DefaultCS.aspx.cs
  • scripts.js
  • styles.css
  • tree.xml
<%@ Page CodeFile="DefaultCS.aspx.cs" Language="c#" AutoEventWireup="true" Inherits="PanelBar.Examples.ApplicationScenarios.OutlookNavigation.DefaultCS" %>

<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>

<!DOCTYPE html>
<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" />
    <telerik:RadScriptBlock ID="RadScriptBlock1" runat="server">
        <script src="scripts.js" type="text/javascript"></script>
        <script type="text/javascript">
            //<![CDATA[
            Sys.Application.add_load(function myfunction() {
                demo.multipage = $find("<%= RadMultiPage1.ClientID %>");
            });
            //]]>
        </script>
    </telerik:RadScriptBlock>
    <div class="demo-container size-thin">
        <telerik:RadMultiPage ID="RadMultiPage1" runat="server" SelectedIndex="0" Height="355">
            <telerik:RadPageView ID="RadPageView1" runat="server">
                <h2>Favorite Folders</h2>
                <telerik:RadTreeView RenderMode="Lightweight" ID="RadTreeView1" runat="server" EnableDragAndDrop="true" OnClientNodeDragStart="BeforeDragHandler"
                    OnClientNodeDropping="BeforeDropHandler" MultipleSelect="True"
                    OnNodeDrop="TreeDrop" Height="325" OnLoad="OnTreeLoad">
                </telerik:RadTreeView>
            </telerik:RadPageView>
            <telerik:RadPageView ID="RadPageView2" runat="server">
                <h2>All Mail Folders</h2>
                <telerik:RadTreeView RenderMode="Lightweight" ID="RadTreeView2" runat="server" EnableDragAndDrop="true" OnClientNodeDragStart="BeforeDragHandler"
                    OnClientNodeDropping="BeforeDropHandler" MultipleSelect="True" OnNodeDrop="TreeDrop"
                    Height="325" OnLoad="OnTreeLoad">
                </telerik:RadTreeView>
            </telerik:RadPageView>
            <telerik:RadPageView ID="RadPageView3" runat="server" CssClass="calendar-page-view">
                <h2>Calendar</h2>
                <telerik:RadCalendar RenderMode="Lightweight" ID="RadCalendar2" runat="server" DayNameFormat="FirstLetter"
                    Width="100%">
                </telerik:RadCalendar>
            </telerik:RadPageView>
            <telerik:RadPageView ID="RadPageView4" runat="server">
                <h2>Others</h2>
                <ul class="qsfexOtherItems">
                    <li><span class="qsfexLinkImage">
                        <asp:Image ID="Image1" runat="server" ImageUrl="images/contactsItems.gif" AlternateText="My Contacts"></asp:Image></span><asp:HyperLink ID="HyperLink1" runat="server" NavigateUrl="#">My Contacts</asp:HyperLink></li>
                    <li><span class="qsfexLinkImage">
                        <asp:Image ID="Image2" runat="server" ImageUrl="images/tasksItems.gif" AlternateText="Tasks"></asp:Image></span><asp:HyperLink ID="HyperLink2" runat="server" NavigateUrl="#">Tasks</asp:HyperLink></li>
                    <li><span class="qsfexLinkImage">
                        <asp:Image ID="Image3" runat="server" ImageUrl="images/notesItems.gif" AlternateText="Notes"></asp:Image></span><asp:HyperLink ID="HyperLink3" runat="server" NavigateUrl="#">Notes</asp:HyperLink></li>
                </ul>
            </telerik:RadPageView>
        </telerik:RadMultiPage>
        <hr class="clear-float" />
        <telerik:RadPanelBar RenderMode="Lightweight" ID="RadPanelbar1" runat="server" ExpandMode="SingleExpandedItem"
            OnClientItemClicking="OnClientItemClicking" OnClientMouseOver="panelMouseOver"
            Width="100%">
            <Items>
                <telerik:RadPanelItem Text="Favourite Folders" Expanded="True" ImageUrl="images/mail.gif" />
                <telerik:RadPanelItem Text="All Mail Folders" ImageUrl="images/mail.gif" />
                <telerik:RadPanelItem Text="Calendar" ImageUrl="images/calendar.gif" />
                <telerik:RadPanelItem Text="Others" ImageUrl="images/contacts.gif" />
            </Items>
        </telerik:RadPanelBar>
    </div>
    </form>
</body>
</html>

Support & Learning Resources

Find Assistance