This is a migrated thread and some comments may be shown as answers.

[Solved] Working with MasterPages

6 Answers 196 Views

General Discussions

This is a migrated thread and some comments may be shown as answers.

Rick asked on 20 May 2008, 08:45 PM

Hello All,

I'm new to the RadControls and AJAX in general, so please excuse my noob-ness.

I'm evaluating these controls with a rather simplistic web design using VS 2008 Web Developers Edition Express (C#) and SQL 2005 Express running on an XP box...simple enough.

In doing simple tests such as adding a menu bar (content comes from the database) and using the onClicked client side event to simply dump text to a text box, simple pages work with no issue. But when I create a page based on a MasterPage (the mp contains 2 simple sections: head and content), dump the javascript into the head section and the menu/textbox into the content scetion, the javascript returns an error that it cant find the textbox control.

The "dump" from simple to masterpage-based is literally a cut-and-paste of code from one aspx page to the other.

I'm not understandng why the javascript cant see the control. I'm sure its simple, but if someone can push me in the right direction, I'd appreciate it.

Thanks in advance,
Rick

6 Answers, 1 is accepted

answered on 21 May 2008, 01:34 PM

Paul,

Thank you for the quick response...here is the code that you requested...

MasterPage:

    
            <%@ Master Language="C#" AutoEventWireup="true" CodeFile="MasterPage01.master.cs" Inherits="MasterPage01" %> 
        
            <%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %> 
        
            <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
        
            <html xmlns="http://www.w3.org/1999/xhtml">  
        
            <head runat="server">  
        
                <title>Test</title> 
        
                <script type="text/javascript">  
        
                    function onClicked(sender, eventArgs)  
        
                    {  
        
                        var tb = $get("TextBox1");  
        
                        tb.value = eventArgs.get_item().get_text();  
        
                    }  
        
                </script> 
        
            </head> 
        
            <body> 
        
                <form id="form1" runat="server">  
        
                <div> 
        
                    <asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager> 
        
                    <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server"></telerik:RadAjaxManager> 
        
                    <asp:ContentPlaceHolder id="MainContent" runat="server"></asp:ContentPlaceHolder> 
        
                </div> 
        
                </form> 
        
            </body> 
        
            </html>

ContentPage:

    
            <%@ Page Language="C#" MasterPageFile="~/MasterPage01.master" AutoEventWireup="true" CodeFile="Default2.aspx.cs" Inherits="Default2" Title="Untitled Page" %> 
        
            <%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %> 
        
            <asp:Content ID="Content2" ContentPlaceHolderID="MainContent" Runat="Server">  
        
                <asp:SqlDataSource ID="MenuData" runat="server"   
        
                    ConnectionString="<%$ ConnectionStrings:DemoConnectionString %>"   
        
                    SelectCommand="SELECT [UID], [ParentID], [MenuText] FROM [Menu_ChartData] ORDER BY [ParentID], [ChildSortOrder]">  
        
                </asp:SqlDataSource> 
        
                <div id="menu" style="position:absolute; top:100px; left:240px; width:500px; z-index:3;">  
        
                    <telerik:RadMenu ID="ChartMenu" Runat="server" DataFieldID="UID"   
        
                        DataFieldParentID="ParentID" DataSourceID="MenuData" DataTextField="MenuText"   
        
                        Skin="Vista" OnClientItemClicked="onClicked">  
        
                        <CollapseAnimation Type="OutQuint" Duration="100"></CollapseAnimation> 
        
                    </telerik:RadMenu> 
        
                    <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox> 
        
                </div> 
        
            </asp:Content>

Using the $get method produces the error 'null' is null and not an object, using FindControl produces the error Object Expected.

I've been looking at the examples provided and cant seem to pick out what I'm doing wrong, although I'm sure its something so obvious that I dont see it.

Thank you in advance,
Rick

answered on 22 May 2008, 06:07 AM

Hello Rick,

Please find below your modified JS function that works as expected.

MasterPage.master

    
            <form id="form1" runat="server">  
        
                <script type="text/javascript">     
        
                function onClicked(sender, eventArgs)  
        
                {  
        
                    var tb = $get('<%= ((TextBox)ContentPlaceHolder1.FindControl("TextBox1")).ClientID %>');  
        
                    tb.value = eventArgs.get_item().get_text();  
        
                }  
        
                </script> 
        
                <asp:ScriptManager ID="ScriptManager1" runat="server">  
        
                </asp:ScriptManager> 
        
                <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">  
        
                </asp:ContentPlaceHolder> 
        
            </form>

Content Page:

    
            <%@ 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">  
        
                <div id="menu" style="position: absolute; top: 100px; left: 240px; width: 500px; z-index: 3;">  
        
                    <telerik:RadMenu ID="ChartMenu" runat="server" Skin="Vista" OnClientItemClicked="onClicked">  
        
                        <CollapseAnimation Type="OutQuint" Duration="100"></CollapseAnimation> 
        
                        <Items> 
        
                            <telerik:RadMenuItem runat="server" Text="Root RadMenuItem1">  
        
                                <Items> 
        
                                    <telerik:RadMenuItem runat="server" Text="Child RadMenuItem 1.1">  
        
                                    </telerik:RadMenuItem> 
        
                                </Items> 
        
                            </telerik:RadMenuItem> 
        
                            <telerik:RadMenuItem runat="server" Text="Root RadMenuItem2">  
        
                                <Items> 
        
                                    <telerik:RadMenuItem runat="server" Text="Child RadMenuItem 2.1">  
        
                                    </telerik:RadMenuItem> 
        
                                    <telerik:RadMenuItem runat="server" Text="Child RadMenuItem 2.2">  
        
                                    </telerik:RadMenuItem> 
        
                                </Items> 
        
                            </telerik:RadMenuItem> 
        
                        </Items> 
        
                    </telerik:RadMenu> 
        
                    <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox> 
        
                </div> 
        
            </asp:Content>

Kind regards,
Paul
the Telerik team

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