Telerik Forums / UI for ASP.NET AJAX
This is a migrated thread and some comments may be shown as answers.

Outlook Navigation Demo doesn't work in master page

6 Answers 109 Views
PanelBar
This is a migrated thread and some comments may be shown as answers.
Grissom
Top achievements
Rank 1
Grissom asked on 16 Jul 2008, 02:56 PM
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

6 Answers, 1 is accepted

Sort by
0
Paul
Telerik team
answered on 17 Jul 2008, 01:45 PM
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
0
Grissom
Top achievements
Rank 1
answered on 18 Jul 2008, 12:30 AM
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
0
Accepted
Paul
Telerik team
answered on 18 Jul 2008, 07:23 AM
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
0
Grissom
Top achievements
Rank 1
answered on 21 Jul 2008, 07:49 AM
Hi Paul,

The problem is solved.  Million thanks for your effort.

Thanks
Grissom
0
Mona
Top achievements
Rank 1
answered on 29 Sep 2008, 11:38 PM
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 :(

0
Paul
Telerik team
answered on 06 Oct 2008, 11:09 AM
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.
Tags
PanelBar
Asked by
Grissom
Top achievements
Rank 1
Answers by
Paul
Telerik team
Grissom
Top achievements
Rank 1
Mona
Top achievements
Rank 1
Share this question
or