Outlook Navigation Demo doesn't work in master page

[Grissom]

Hi,

I tired to implement Outlook Navigation demo in master page. But I found the following JS doesn't work.
var multipage=$find("RadMultiPage1");

The error message is that multipage is null.

Who can guide me to solve this problem?

Thanks
Grissom

[Paul]

Hello Grissom,

Please find below a sample code snippet that shows the needed approach.

<%@ Page Language="C#" MasterPageFile="~/MasterPage.master" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" Title="Untitled Page" %>

<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>
<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" runat="Server">

    <script type="text/javascript">
    //<!--
    var blnDragging = false;
            function OnClientItemClicking(sender, eventArgs)
            {
                var multipage=$find('<%= RadMultiPage1.ClientID %>');
                multipage.set_selectedIndex(eventArgs.get_item().get_index());
            }
            function BeforeDragHandler()
            {
                blnDragging = true;
            }

            function BeforeDropHandler()
            {
                blnDragging = false;
            }

        //-->
    </script>

    <script type="text/javascript">
    <!--
    function panelMouseOver(sender, eventArgs)
            {
                if (eventArgs.get_item().get_text().indexOf("Folders") != -1 && blnDragging)
                {
                    var multipage=$find("RadMultiPage1");
                    multipage.set_selectedIndex(eventArgs.get_item().get_index());
                }
            }
    -->
    </script>

    <div id="qsfexWrapper">
        <telerik:RadMultiPage ID="RadMultiPage1" runat="server" SelectedIndex="0" Height="240px" Width="198px" BackColor="White" BorderColor="#6593cf" BorderStyle="Solid" BorderWidth="1px">
            <telerik:RadPageView ID="RadPageView1" runat="server">
                <div class="qsfexHeader">
                    Favourite Folders</div>
                <telerik:RadTreeView ID="RadTreeView1" runat="server" EnableDragAndDrop="true" OnClientNodeDragStart="BeforeDragHandler" OnClientNodeDropping="BeforeDropHandler" MultipleSelect="True" OnNodeDrop="TreeDrop" Skin="Office2007" Height="213px" OnLoad="OnTreeLoad">
                </telerik:RadTreeView>
            </telerik:RadPageView>
            <telerik:RadPageView ID="RadPageView2" runat="server">
                <div class="qsfexHeader">
                    All Mail Folders</div>
                <telerik:RadTreeView ID="RadTreeView2" runat="server" EnableDragAndDrop="true" OnClientNodeDragStart="BeforeDragHandler" OnClientNodeDropping="BeforeDropHandler" MultipleSelect="True" OnNodeDrop="TreeDrop" Skin="Office2007" Height="213px" OnLoad="OnTreeLoad">
                </telerik:RadTreeView>
            </telerik:RadPageView>
            <telerik:RadPageView ID="RadPageView3" runat="server">
                <div class="qsfexHeader">
                    Calendar</div>
                <telerik:RadCalendar ID="RadCalendar2" runat="server" DayNameFormat="FirstLetter" Style="margin: 5px auto;" Skin="Office2007">
                </telerik:RadCalendar>
            </telerik:RadPageView>
            <telerik:RadPageView ID="RadPageView4" runat="server">
                <div class="qsfexHeader">
                    Others</div>
                <ul class="qsfexOtherItems">
                    <li><span class="qsfexLinkImage">
                        <asp:Image ID="Image1" runat="server" ImageUrl="Img/contactsItems.gif" AlternateText="My Contacts" /></span><asp:HyperLink ID="HyperLink1" runat="server" NavigateUrl="#">My Contacts</asp:HyperLink></li>
                    <li><span class="qsfexLinkImage">
                        <asp:Image ID="Image2" runat="server" ImageUrl="Img/tasksItems.gif" AlternateText="Tasks" /></span><asp:HyperLink ID="HyperLink2" runat="server" NavigateUrl="#">Tasks</asp:HyperLink></li>
                    <li><span class="qsfexLinkImage">
                        <asp:Image ID="Image3" runat="server" ImageUrl="Img/notesItems.gif" AlternateText="Notes" /></span><asp:HyperLink ID="HyperLink3" runat="server" NavigateUrl="#">Notes</asp:HyperLink></li>
                </ul>
            </telerik:RadPageView>
        </telerik:RadMultiPage>
        <div id="qsfexSeparator">
        </div>
        <telerik:RadPanelBar ID="RadPanelbar1" runat="server" ExpandMode="SingleExpandedItem" OnClientItemClicking="OnClientItemClicking" OnClientMouseOver="panelMouseOver" Skin="Office2007" Width="200px">
            <Items>
                <telerik:RadPanelItem Text="Favourite Folders" Expanded="True" ImageUrl="Img/mail.gif">
                </telerik:RadPanelItem>
                <telerik:RadPanelItem Text="All Mail Folders" ImageUrl="Img/mail.gif">
                </telerik:RadPanelItem>
                <telerik:RadPanelItem Text="Calendar" ImageUrl="Img/calendar.gif">
                </telerik:RadPanelItem>
                <telerik:RadPanelItem Text="Others" ImageUrl="Img/contacts.gif">
                </telerik:RadPanelItem>
            </Items>
        </telerik:RadPanelBar>
    </div>
</asp:Content>

Kind regards,
Paul
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center

[Grissom]

Hi Paul,

I tried your code. But it doesn't work. I got following error message.
 

Server Error in '/' Application.

---

The Controls collection cannot be modified because the control contains code blocks (i.e. <% ... %>).

Description: An unhandled exception occurred during the execution of the current web request. Please review the stack trace for more information about the error and where it originated in the code.

Exception Details: System.Web.HttpException: The Controls collection cannot be modified because the control contains code blocks (i.e. <% ... %>).

Do you know how to solve it?

Thanks
Grissom

[Paul]

Hello Grissom,

If you receive this exceptions you need to move the code block (i.e. <% ... %>) outside of the head tag or wrap it inside telerik:RadCodeBlock.

Code block in correct position

<head runat="server"></head>
<body>
    <telerik:RadCodeBlock id="RadCodeBlock1" runat="server">
        <script>
            var grid = $find(<%= RadGrid1.ClientID %>);
            ...
        </script>
    </telerik:RadCodeBlock>
</body>

or

<head runat="server">
<telerik:RadCodeBlock id="RadCodeBlock1" runat="server">
    <script>
        var grid = $find(<%= RadGrid1.ClientID %>);
        ...
    </script>
</telerik:RadCodeBlock>
</head>
<body>
...
</body>

Regards,
Paul
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center

[Grissom]

Hi Paul,

The problem is solved.  Million thanks for your effort.

Thanks
Grissom

[Mona]

Iam still facing the same error < 'null ' is null or not an object > 
when using this code in a master page and don't know the reason!

<%

@ Master Language="C#" AutoEventWireup="true" CodeFile="CRMMasterPage.master.cs" Inherits="CRMMasterPage" %>

<%

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

<

html xmlns="http://www.w3.org/1999/xhtml" >

<

head id="Head1" runat="server">

<title>Untitled Page</title>

</

head>

<telerik:RadCodeBlock id="RadCodeBlock1" runat="server">

<script type="text/javascript">

var blnDragging = false;

function OnClientItemClicking(sender, eventArgs)

{

var multipage=$find("RadMultiPage1");

multipage.set_selectedIndex(eventArgs.get_item().get_index());

}

function BeforeDragHandler()

{

blnDragging =

true;

}

function BeforeDropHandler()

{

blnDragging =

false;

}

function panelMouseOver(sender, eventArgs)

{

if (eventArgs.get_item().get_text().indexOf("Folders") != -1 && blnDragging)

{

var multipage=$find("RadMultiPage1");

multipage.set_selectedIndex(eventArgs.get_item().get_index());

}

}

</script>

</

telerik:RadCodeBlock>

 

<

body>

<form id="form1" runat="server">

<div style="height: 100%">

<asp:ScriptManager id="ScriptManager1" runat="server"></asp:ScriptManager>

<

div id="qsfexWrapper">

<telerik:RadMultiPage ID="RadMultiPage1" runat="server" SelectedIndex="0" Height="240px" Width="198px" BackColor="White" BorderColor="#6593cf" BorderStyle="Solid" BorderWidth="1px">

<telerik:RadPageView ID="RadPageView1" runat="server">

<div class="qsfexHeader">

Favourite Folders

</div>

<telerik:RadTreeView ID="RadTreeView1" runat="server" EnableDragAndDrop="true" OnClientNodeDragStart="BeforeDragHandler" OnClientNodeDropping="BeforeDropHandler" MultipleSelect="True" OnNodeDrop="TreeDrop" Skin="Office2007" Height="213px" OnLoad="OnTreeLoad">

</telerik:RadTreeView>

</telerik:RadPageView>

<telerik:RadPageView ID="RadPageView2" runat="server">

<div class="qsfexHeader">

All Mail Folders

</div>

<telerik:RadTreeView ID="RadTreeView2" runat="server" EnableDragAndDrop="true" OnClientNodeDragStart="BeforeDragHandler" OnClientNodeDropping="BeforeDropHandler" MultipleSelect="True" OnNodeDrop="TreeDrop" Skin="Office2007" Height="213px" OnLoad="OnTreeLoad">

</telerik:RadTreeView>

</telerik:RadPageView>

<telerik:RadPageView ID="RadPageView3" runat="server">

<div class="qsfexHeader">

Calendar

</div>

<telerik:RadCalendar ID="RadCalendar2" runat="server" DayNameFormat="FirstLetter" Style="margin: 5px auto;" Skin="Office2007">

</telerik:RadCalendar>

</telerik:RadPageView>

<telerik:RadPageView ID="RadPageView4" runat="server">

<div class="qsfexHeader">

Others

</div>

<ul class="qsfexOtherItems">

<li><span class="qsfexLinkImage">

<asp:Image ID="Image1" runat="server" ImageUrl="Img/contactsItems.gif" AlternateText="My Contacts" /></span><asp:HyperLink ID="HyperLink1" runat="server" NavigateUrl="#">My Contacts</asp:HyperLink></li>

<li><span class="qsfexLinkImage">

<asp:Image ID="Image2" runat="server" ImageUrl="Img/tasksItems.gif" AlternateText="Tasks" /></span><asp:HyperLink ID="HyperLink2" runat="server" NavigateUrl="#">Tasks</asp:HyperLink></li>

<li><span class="qsfexLinkImage">

<asp:Image ID="Image3" runat="server" ImageUrl="Img/notesItems.gif" AlternateText="Notes" /></span><asp:HyperLink ID="HyperLink3" runat="server" NavigateUrl="#">Notes</asp:HyperLink></li>

</ul>

</telerik:RadPageView>

</telerik:RadMultiPage>

<div id="qsfexSeparator">

</div>

<telerik:RadPanelBar ID="RadPanelbar1" runat="server" ExpandMode="SingleExpandedItem" OnClientItemClicking="OnClientItemClicking" OnClientMouseOver="panelMouseOver" Skin="Office2007" Width="200px">

<Items>

<telerik:RadPanelItem Text="Favourite Folders" Expanded="True">

</telerik:RadPanelItem>

<telerik:RadPanelItem Text="All Mail Folders">

</telerik:RadPanelItem>

<telerik:RadPanelItem Text="Calendar" >

</telerik:RadPanelItem>

<telerik:RadPanelItem Text="Others" >

</telerik:RadPanelItem>

</Items>

</telerik:RadPanelBar>

</div>

<asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server" >

</asp:ContentPlaceHolder>

</div>

</form>

</

body>

</

html>

 could anyone help me :(

[Paul]

Hi Mona ,

Please find below a modified code snippet that works fine on a masterpage.

<%@ Master Language="C#" AutoEventWireup="true" CodeFile="MasterPage.master.cs" Inherits="MasterPage" %>
<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title>Untitled Page</title>
    <link href="styles.css" rel="stylesheet" type="text/css" />
</head>

<script type="text/javascript">
var blnDragging = false;
function OnClientItemClicking(sender, eventArgs)
{
    var multipage=$find('<%= RadMultiPage1.ClientID %>');
    multipage.set_selectedIndex(eventArgs.get_item().get_index());
}
function BeforeDragHandler()
{
    blnDragging = true;
}

function BeforeDropHandler()
{
    blnDragging = false;
}
</script>

<body class="BODY">

    <script type="text/javascript">
    function panelMouseOver(sender, eventArgs)
    {
        if (eventArgs.get_item().get_text().indexOf("Folders") != -1 && blnDragging)
        {
            var multipage=$find('<%= RadMultiPage1.ClientID %>');
            multipage.set_selectedIndex(eventArgs.get_item().get_index());
        }
    }
    </script>

    <form runat="server" id="mainForm" method="post" style="width: 100%">
        <telerik:RadScriptManager ID="ScriptManager" runat="server" />
        <div id="qsfexWrapper">
            <telerik:RadMultiPage ID="RadMultiPage1" runat="server" SelectedIndex="0" Height="240px" Width="198px" BackColor="White" BorderColor="#6593cf" BorderStyle="Solid" BorderWidth="1px">
                <telerik:RadPageView ID="RadPageView1" runat="server">
                    <div class="qsfexHeader">
                        Favourite Folders</div>
                    <telerik:RadTreeView ID="RadTreeView1" runat="server" EnableDragAndDrop="true" OnClientNodeDragStart="BeforeDragHandler" OnClientNodeDropping="BeforeDropHandler" MultipleSelect="True" OnNodeDrop="TreeDrop" Skin="Office2007" Height="213px" OnLoad="OnTreeLoad">
                    </telerik:RadTreeView>
                </telerik:RadPageView>
                <telerik:RadPageView ID="RadPageView2" runat="server">
                    <div class="qsfexHeader">
                        All Mail Folders</div>
                    <telerik:RadTreeView ID="RadTreeView2" runat="server" EnableDragAndDrop="true" OnClientNodeDragStart="BeforeDragHandler" OnClientNodeDropping="BeforeDropHandler" MultipleSelect="True" OnNodeDrop="TreeDrop" Skin="Office2007" Height="213px" OnLoad="OnTreeLoad">
                    </telerik:RadTreeView>
                </telerik:RadPageView>
                <telerik:RadPageView ID="RadPageView3" runat="server">
                    <div class="qsfexHeader">
                        Calendar</div>
                    <telerik:RadCalendar ID="RadCalendar2" runat="server" DayNameFormat="FirstLetter" Style="margin: 5px auto;" Skin="Office2007">
                    </telerik:RadCalendar>
                </telerik:RadPageView>
                <telerik:RadPageView ID="RadPageView4" runat="server">
                    <div class="qsfexHeader">
                        Others</div>
                    <ul class="qsfexOtherItems">
                        <li><span class="qsfexLinkImage">
                            <asp:Image ID="Image1" runat="server" ImageUrl="Img/contactsItems.gif" AlternateText="My Contacts" /></span><asp:HyperLink ID="HyperLink1" runat="server" NavigateUrl="#">My Contacts</asp:HyperLink></li>
                        <li><span class="qsfexLinkImage">
                            <asp:Image ID="Image2" runat="server" ImageUrl="Img/tasksItems.gif" AlternateText="Tasks" /></span><asp:HyperLink ID="HyperLink2" runat="server" NavigateUrl="#">Tasks</asp:HyperLink></li>
                        <li><span class="qsfexLinkImage">
                            <asp:Image ID="Image3" runat="server" ImageUrl="Img/notesItems.gif" AlternateText="Notes" /></span><asp:HyperLink ID="HyperLink3" runat="server" NavigateUrl="#">Notes</asp:HyperLink></li>
                    </ul>
                </telerik:RadPageView>
            </telerik:RadMultiPage>
            <div id="qsfexSeparator">
            </div>
            <telerik:RadPanelBar ID="RadPanelbar1" runat="server" ExpandMode="SingleExpandedItem" OnClientItemClicking="OnClientItemClicking" OnClientMouseOver="panelMouseOver" Skin="Office2007" Width="200px">
                <Items>
                    <telerik:RadPanelItem Text="Favourite Folders" Expanded="True" ImageUrl="Img/mail.gif">
                    </telerik:RadPanelItem>
                    <telerik:RadPanelItem Text="All Mail Folders" ImageUrl="Img/mail.gif">
                    </telerik:RadPanelItem>
                    <telerik:RadPanelItem Text="Calendar" ImageUrl="Img/calendar.gif">
                    </telerik:RadPanelItem>
                    <telerik:RadPanelItem Text="Others" ImageUrl="Img/contacts.gif">
                    </telerik:RadPanelItem>
                </Items>
            </telerik:RadPanelBar>
        </div>
        <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
        </asp:ContentPlaceHolder>
    </form>
</body>
</html>

Best wishes,
Paul
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.