Hello.
I am using this demo as a guide: http://www.telerik.com/help/aspnet-ajax/panelbar-items-client-side-code.html and everything seems straightforward. The problem is that, regardless of what I do, I am getting an Uncaught ReferenceError: Telerik is not defined exception in my JavaScript code. Here are the details:
- ASP.NET MVC 4 application using the ASPX engine
- I have a master page, a page, and a partial view.
- The partial view is what contains the RadPanelBar and it is defined like this:
<%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl<ModuleMenu>" %>
<%@ Import namespace="HarleyDavidson.Hdds.Talon.Web.Models.Global" %>
<%@ Register assembly="Telerik.Web.UI" namespace="Telerik.Web.UI" tagprefix="telerik" %>
<telerik:RadScriptManager ID="RadScriptManager1" runat="server">
</telerik:RadScriptManager>
<telerik:RadPanelBar ID="radMenu" Runat="server" Skin="Black">
</telerik:RadPanelBar>
<script language="javascript" type="text/javascript">
debugger;
var panelBar = $find('<%=radMenu.ClientID %>');
var menuJson = JSON.parse('<%=Model.MenuItems %>');
for (var i = 0; i < menuJson.length; i++) {
var s = menuJson[i];
var rootItem = new Telerik.Web.UI.RadPanelItem();
rootItem.set_text(s.DisplayName);
if (s.ChildrenNodes != null) {
addItemsToRoot(s);
}
panelBar.trackChanges();
panelBar.get_items().add(rootItem);
//rootItem.get_items().add(childItem);
//panelBar.get_items().getItem(0).get_items().insert(0, firstChild);
panelBar.commitChanges();
}
function addItemsToRoot(rootItem) {
}
</script>
This is the line that is failing: var rootItem = new Telerik.Web.UI.RadPanelItem();
Per this document: http://www.telerik.com/help/aspnet-ajax/introduction-troubleshooting.html I checked out my web.config, but I have the following entries in my web.config:
<system.web>
...
<httpHandlers>
<add path="Telerik.Web.UI.WebResource.axd" type="Telerik.Web.UI.WebResource" verb="*" validate="false" />
</httpHandlers>
</system.web>
<system.webServer>
<handlers>
...
<add name="Telerik_Web_UI_WebResource_axd" verb="*" preCondition="integratedMode" path="Telerik.Web.UI.WebResource.axd" type="Telerik.Web.UI.WebResource" />
</handlers>
<system.webServer>
The entire rendered output of the page is:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>
Site
</title>
<link href="/favicon.ico" rel="shortcut icon" type="image/x-icon" />
<meta name="viewport" content="width=device-width" />
<link href="/Content/site.css" rel="stylesheet"/>
<script src="/Scripts/modernizr-2.6.2.js"></script>
<script src="/Scripts/jquery-1.8.2.js"></script>
<title>
</title></head>
<body>
<form method="post" action="./" id="form1">
<div class="aspNetHidden">
<input type="hidden" name="RadScriptManager1_TSM" id="RadScriptManager1_TSM" value="" />
<input type="hidden" name="__EVENTTARGET" id="__EVENTTARGET" value="" />
<input type="hidden" name="__EVENTARGUMENT" id="__EVENTARGUMENT" value="" />
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="ng15QNpcL+QMheDSxB7BclZEjyRZ/v1t5idEPeiJeYSPTRn/4byScB2vP0oW+2a7vFBCdCKd2gbSqonyKQox3iQobJtFN0DQvJyc9/Q//kuvEk5ZXjOsbPn1Bn5Ew52E" />
</div>
<script type="text/javascript">
//<![CDATA[
var theForm = document.forms['form1'];
if (!theForm) {
theForm = document.form1;
}
function __doPostBack(eventTarget, eventArgument) {
if (!theForm.onsubmit || (theForm.onsubmit() != false)) {
theForm.__EVENTTARGET.value = eventTarget;
theForm.__EVENTARGUMENT.value = eventArgument;
theForm.submit();
}
}
//]]>
</script>
<script src="/WebResource.axd?d=pynGkmcFUV13He1Qd6_TZJGlNwqpp6-nH7r5-E8vYTJkH7zSzodYcVW3jIzmw2y-aefQNjxKsZCGMmHrgHPSvA2&t=635328605200000000" type="text/javascript"></script>
<script src="/Telerik.Web.UI.WebResource.axd?_TSM_HiddenField_=RadScriptManager1_TSM&compress=1&_TSM_CombinedScripts_=%3b%3bSystem.Web.Extensions%2c+Version%3d4.0.0.0%2c+Culture%3dneutral%2c+PublicKeyToken%3d31bf3856ad364e35%3aen-US%3a509f92a1-e5fd-464f-a450-13846a6c973b%3aea597d4b%3ab25378d2" type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
if (typeof(Sys) === 'undefined') throw new Error('ASP.NET Ajax client-side framework failed to load.');
//]]>
</script>
<script type="text/javascript">
//<![CDATA[
Sys.WebForms.PageRequestManager._initialize('ctl00$RadScriptManager1', 'form1', [], [], [], 90, 'ctl00');
//]]>
</script>
<div id="page">
<header>
<div id="header_interactive_content">
<span class="interactive_content_header">Most Recent KBA's</span>
</div>
<div id="header_logo">
</div>
<div style="clear: both">
</div>
<div id="header_nav">
<div class="header_nav_left"></div>
<!-- Menu -->
<div class="header_nav_item_last"><span class="header_nav_item_span"></span></div>
<div class="header_nav_right"></div>
</div>
</header>
<div style="clear: both"></div>
<div id="body">
<div class="content_wrapper">
<div id="content_menu">
<div id="1_radMenu" class="RadPanelBar RadPanelBar_Black">
<!-- 2014.2.618.45 --><input id="1_radMenu_ClientState" name="1_radMenu_ClientState" type="hidden" />
</div>
<script language="javascript" type="text/javascript">
debugger;
var panelBar = $find('1_radMenu');
var menuJson = JSON.parse('[{"DisplayName":"User Dashboard","Url":"#","Module":"Dashboard","IsRootNode":true,"ChildrenNodes":null}]');
for (var i = 0; i < menuJson.length; i++) {
var s = menuJson[i];
var rootItem = new Telerik.Web.UI.RadPanelItem();
rootItem.set_text(s.DisplayName);
if (s.ChildrenNodes != null) {
addItemsToRoot(s);
}
panelBar.trackChanges();
panelBar.get_items().add(rootItem);
//rootItem.get_items().add(childItem);
//panelBar.get_items().getItem(0).get_items().insert(0, firstChild);
panelBar.commitChanges();
}
function addItemsToRoot(rootItem) {
}
</script>
</div>
<div id="content">
<section>
<b>The user Dashboard will go here. </b>
</section>
</div>
<div style="clear:both"></div>
</div>
</div>
<footer>
<div class="content_wrapper">
<div style="clear: both;"></div>
<div style="float: left; width: 100%; text-align: center;">
<br>
a href="/privacy.aspx">Privacy Policy</a> <a href="/Account/LogOff">Log Off</a>
</div>
</div>
</footer>
<div style="clear:both"></div>
</div>
<div class="aspNetHidden">
<input type="hidden" name="__VIEWSTATEGENERATOR" id="__VIEWSTATEGENERATOR" value="F124CA87" />
</div></form>
</body>
</html>
Any help that can be provided would be fantastic!
I am using this demo as a guide: http://www.telerik.com/help/aspnet-ajax/panelbar-items-client-side-code.html and everything seems straightforward. The problem is that, regardless of what I do, I am getting an Uncaught ReferenceError: Telerik is not defined exception in my JavaScript code. Here are the details:
- ASP.NET MVC 4 application using the ASPX engine
- I have a master page, a page, and a partial view.
- The partial view is what contains the RadPanelBar and it is defined like this:
<%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl<ModuleMenu>" %>
<%@ Import namespace="HarleyDavidson.Hdds.Talon.Web.Models.Global" %>
<%@ Register assembly="Telerik.Web.UI" namespace="Telerik.Web.UI" tagprefix="telerik" %>
<telerik:RadScriptManager ID="RadScriptManager1" runat="server">
</telerik:RadScriptManager>
<telerik:RadPanelBar ID="radMenu" Runat="server" Skin="Black">
</telerik:RadPanelBar>
<script language="javascript" type="text/javascript">
debugger;
var panelBar = $find('<%=radMenu.ClientID %>');
var menuJson = JSON.parse('<%=Model.MenuItems %>');
for (var i = 0; i < menuJson.length; i++) {
var s = menuJson[i];
var rootItem = new Telerik.Web.UI.RadPanelItem();
rootItem.set_text(s.DisplayName);
if (s.ChildrenNodes != null) {
addItemsToRoot(s);
}
panelBar.trackChanges();
panelBar.get_items().add(rootItem);
//rootItem.get_items().add(childItem);
//panelBar.get_items().getItem(0).get_items().insert(0, firstChild);
panelBar.commitChanges();
}
function addItemsToRoot(rootItem) {
}
</script>
This is the line that is failing: var rootItem = new Telerik.Web.UI.RadPanelItem();
Per this document: http://www.telerik.com/help/aspnet-ajax/introduction-troubleshooting.html I checked out my web.config, but I have the following entries in my web.config:
<system.web>
...
<httpHandlers>
<add path="Telerik.Web.UI.WebResource.axd" type="Telerik.Web.UI.WebResource" verb="*" validate="false" />
</httpHandlers>
</system.web>
<system.webServer>
<handlers>
...
<add name="Telerik_Web_UI_WebResource_axd" verb="*" preCondition="integratedMode" path="Telerik.Web.UI.WebResource.axd" type="Telerik.Web.UI.WebResource" />
</handlers>
<system.webServer>
The entire rendered output of the page is:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>
Site
</title>
<link href="/favicon.ico" rel="shortcut icon" type="image/x-icon" />
<meta name="viewport" content="width=device-width" />
<link href="/Content/site.css" rel="stylesheet"/>
<script src="/Scripts/modernizr-2.6.2.js"></script>
<script src="/Scripts/jquery-1.8.2.js"></script>
<title>
</title></head>
<body>
<form method="post" action="./" id="form1">
<div class="aspNetHidden">
<input type="hidden" name="RadScriptManager1_TSM" id="RadScriptManager1_TSM" value="" />
<input type="hidden" name="__EVENTTARGET" id="__EVENTTARGET" value="" />
<input type="hidden" name="__EVENTARGUMENT" id="__EVENTARGUMENT" value="" />
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="ng15QNpcL+QMheDSxB7BclZEjyRZ/v1t5idEPeiJeYSPTRn/4byScB2vP0oW+2a7vFBCdCKd2gbSqonyKQox3iQobJtFN0DQvJyc9/Q//kuvEk5ZXjOsbPn1Bn5Ew52E" />
</div>
<script type="text/javascript">
//<![CDATA[
var theForm = document.forms['form1'];
if (!theForm) {
theForm = document.form1;
}
function __doPostBack(eventTarget, eventArgument) {
if (!theForm.onsubmit || (theForm.onsubmit() != false)) {
theForm.__EVENTTARGET.value = eventTarget;
theForm.__EVENTARGUMENT.value = eventArgument;
theForm.submit();
}
}
//]]>
</script>
<script src="/WebResource.axd?d=pynGkmcFUV13He1Qd6_TZJGlNwqpp6-nH7r5-E8vYTJkH7zSzodYcVW3jIzmw2y-aefQNjxKsZCGMmHrgHPSvA2&t=635328605200000000" type="text/javascript"></script>
<script src="/Telerik.Web.UI.WebResource.axd?_TSM_HiddenField_=RadScriptManager1_TSM&compress=1&_TSM_CombinedScripts_=%3b%3bSystem.Web.Extensions%2c+Version%3d4.0.0.0%2c+Culture%3dneutral%2c+PublicKeyToken%3d31bf3856ad364e35%3aen-US%3a509f92a1-e5fd-464f-a450-13846a6c973b%3aea597d4b%3ab25378d2" type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
if (typeof(Sys) === 'undefined') throw new Error('ASP.NET Ajax client-side framework failed to load.');
//]]>
</script>
<script type="text/javascript">
//<![CDATA[
Sys.WebForms.PageRequestManager._initialize('ctl00$RadScriptManager1', 'form1', [], [], [], 90, 'ctl00');
//]]>
</script>
<div id="page">
<header>
<div id="header_interactive_content">
<span class="interactive_content_header">Most Recent KBA's</span>
</div>
<div id="header_logo">
</div>
<div style="clear: both">
</div>
<div id="header_nav">
<div class="header_nav_left"></div>
<!-- Menu -->
<div class="header_nav_item_last"><span class="header_nav_item_span"></span></div>
<div class="header_nav_right"></div>
</div>
</header>
<div style="clear: both"></div>
<div id="body">
<div class="content_wrapper">
<div id="content_menu">
<div id="1_radMenu" class="RadPanelBar RadPanelBar_Black">
<!-- 2014.2.618.45 --><input id="1_radMenu_ClientState" name="1_radMenu_ClientState" type="hidden" />
</div>
<script language="javascript" type="text/javascript">
debugger;
var panelBar = $find('1_radMenu');
var menuJson = JSON.parse('[{"DisplayName":"User Dashboard","Url":"#","Module":"Dashboard","IsRootNode":true,"ChildrenNodes":null}]');
for (var i = 0; i < menuJson.length; i++) {
var s = menuJson[i];
var rootItem = new Telerik.Web.UI.RadPanelItem();
rootItem.set_text(s.DisplayName);
if (s.ChildrenNodes != null) {
addItemsToRoot(s);
}
panelBar.trackChanges();
panelBar.get_items().add(rootItem);
//rootItem.get_items().add(childItem);
//panelBar.get_items().getItem(0).get_items().insert(0, firstChild);
panelBar.commitChanges();
}
function addItemsToRoot(rootItem) {
}
</script>
</div>
<div id="content">
<section>
<b>The user Dashboard will go here. </b>
</section>
</div>
<div style="clear:both"></div>
</div>
</div>
<footer>
<div class="content_wrapper">
<div style="clear: both;"></div>
<div style="float: left; width: 100%; text-align: center;">
<br>
a href="/privacy.aspx">Privacy Policy</a> <a href="/Account/LogOff">Log Off</a>
</div>
</div>
</footer>
<div style="clear:both"></div>
</div>
<div class="aspNetHidden">
<input type="hidden" name="__VIEWSTATEGENERATOR" id="__VIEWSTATEGENERATOR" value="F124CA87" />
</div></form>
</body>
</html>
Any help that can be provided would be fantastic!
6 Answers, 1 is accepted
0
Doug
Top achievements
Rank 1
Rank 1
answered on 07 Jul 2014, 01:51 AM
FYI:
I have also tried wrapping my JavaScript in both a RadScriptBlock and a RadCodeBlock but those had no effect.
I have also tried wrapping my JavaScript in both a RadScriptBlock and a RadCodeBlock but those had no effect.
0
Hi ,
Since the scripts is placed directly on the page and not in a specific event handler function, it is executed immediately after the page is parsed and by that time the Telerik scripts are not loaded yet. Please try to execute this script in the onClientLoad event of the RadPanelBar.
Regards,
Dimitar Terziev
Telerik
Since the scripts is placed directly on the page and not in a specific event handler function, it is executed immediately after the page is parsed and by that time the Telerik scripts are not loaded yet. Please try to execute this script in the onClientLoad event of the RadPanelBar.
Regards,
Dimitar Terziev
Telerik
Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.
0
Doug
Top achievements
Rank 1
Rank 1
answered on 07 Jul 2014, 04:15 PM
Thanks, Dimitar.
I will give it a shot.
I will give it a shot.
0
Doug
Top achievements
Rank 1
Rank 1
answered on 07 Jul 2014, 04:18 PM
Dimitar: could you also please edit my initial post to remove the company information from my Import statement? Thanks!
0
Doug
Top achievements
Rank 1
Rank 1
answered on 08 Jul 2014, 01:19 AM
Hi, Dimitar.
Unfortunately that didn't change anything. Here is my code:
<%@ Register assembly="Telerik.Web.UI" namespace="Telerik.Web.UI" tagprefix="telerik" %>
<telerik:radscriptmanager id="RadScriptManager1" runat="server">
</telerik:radscriptmanager>
<script type="text/javascript">
function BuildPanelBar(sender) {
debugger;
alert('foo');
var panelBar = sender;
var menuJson = JSON.parse('<%=Model.MenuItems %>');
for (var i = 0; i < menuJson.length; i++) {
var s = menuJson[i];
var rootItem = new Telerik.Web.UI.RadPanelItem();
rootItem.set_text(s.DisplayName);
if (s.ChildrenNodes != null) {
addItemsToRoot(s);
}
panelBar.trackChanges();
panelBar.get_items().add(rootItem);
//rootItem.get_items().add(childItem);
//panelBar.get_items().getItem(0).get_items().insert(0, firstChild);
panelBar.commitChanges();
}
}
function addItemsToRoot(rootItem) {
}
</script>
<telerik:radpanelbar id="radMenu" runat="server" skin="Black" onclientload="BuildPanelBar">
<Items>
<telerik:RadPanelItem runat="server" Text="Root RadPanelItem1">
</telerik:RadPanelItem>
</Items>
</telerik:radpanelbar>
I also tried changing onclientload="BuildPanelBar" to onclientload="BuildPanelBar(this)" no effect. I added the default node to the control just to get it to render on the screen, but I noticed that none of the Telerik styles are being loaded either. The control appears as a default HTML UL.
Just to see what happened, I copied the PanelBar from my UserControl onto my MasterPage (I left the PanelBar on my UserControl); when I ran my site both PanelBars appeared with the styles applied, and my JavaScript fired correctly. Is this a known issue / is there a workaround?
I have attached an image of what I am seeing. The top area is with just the PanelBar in my UserControl, and the bottom area is where I have a PanelBar on my MasterPage and one being included via the UserControl. Any help would be greatly appreciated!
Unfortunately that didn't change anything. Here is my code:
<%@ Register assembly="Telerik.Web.UI" namespace="Telerik.Web.UI" tagprefix="telerik" %>
<telerik:radscriptmanager id="RadScriptManager1" runat="server">
</telerik:radscriptmanager>
<script type="text/javascript">
function BuildPanelBar(sender) {
debugger;
alert('foo');
var panelBar = sender;
var menuJson = JSON.parse('<%=Model.MenuItems %>');
for (var i = 0; i < menuJson.length; i++) {
var s = menuJson[i];
var rootItem = new Telerik.Web.UI.RadPanelItem();
rootItem.set_text(s.DisplayName);
if (s.ChildrenNodes != null) {
addItemsToRoot(s);
}
panelBar.trackChanges();
panelBar.get_items().add(rootItem);
//rootItem.get_items().add(childItem);
//panelBar.get_items().getItem(0).get_items().insert(0, firstChild);
panelBar.commitChanges();
}
}
function addItemsToRoot(rootItem) {
}
</script>
<telerik:radpanelbar id="radMenu" runat="server" skin="Black" onclientload="BuildPanelBar">
<Items>
<telerik:RadPanelItem runat="server" Text="Root RadPanelItem1">
</telerik:RadPanelItem>
</Items>
</telerik:radpanelbar>
I also tried changing onclientload="BuildPanelBar" to onclientload="BuildPanelBar(this)" no effect. I added the default node to the control just to get it to render on the screen, but I noticed that none of the Telerik styles are being loaded either. The control appears as a default HTML UL.
Just to see what happened, I copied the PanelBar from my UserControl onto my MasterPage (I left the PanelBar on my UserControl); when I ran my site both PanelBars appeared with the styles applied, and my JavaScript fired correctly. Is this a known issue / is there a workaround?
I have attached an image of what I am seeing. The top area is with just the PanelBar in my UserControl, and the bottom area is where I have a PanelBar on my MasterPage and one being included via the UserControl. Any help would be greatly appreciated!
0
Doug
Top achievements
Rank 1
Rank 1
answered on 10 Jul 2014, 02:46 AM
To anyone that comes along and is having a similar problem, I have included a work around to this problem. Initially I tried leaving a "dummy" grid on my master page that lived inside an invisible div. While this caused my child panelbar to render with the correct styles, it would not react to my JavaScripts (e.g. items were not being added pragmatically.)
Ultimately my solution looked like this on my master page:
<div id="content_menu">
<% Html.RenderAction("InitializeModuleMenu", "Home"); %>
<telerik:radpanelbar id="radMenu" runat="server" skin="Black" onclientload="BuildPanelBar">
</telerik:radpanelbar>
</div>
The partial view is still necessary (in my case) since it generates a dynamic JavaScript that manipulates the radMenu based on what screen they are on. I don't know that there is anything "wrong" with this approach, but it feels clunky.
Ultimately my solution looked like this on my master page:
<div id="content_menu">
<% Html.RenderAction("InitializeModuleMenu", "Home"); %>
<telerik:radpanelbar id="radMenu" runat="server" skin="Black" onclientload="BuildPanelBar">
</telerik:radpanelbar>
</div>
The partial view is still necessary (in my case) since it generates a dynamic JavaScript that manipulates the radMenu based on what screen they are on. I don't know that there is anything "wrong" with this approach, but it feels clunky.