If you have a page with Telerik UI for ASP.NET AJAX RadHtmlChart and try to add Kendo UI for jQuery Notification to that page...
The JavaScript:
var notif = jqueryobject.kendoNotification({appendTo: "#appendto"}).data("kendoNotification");
You cannot call notif.show() because notif is undefined.
We added a kendoNotification to our skin and on pages that use Telerik UI for ASP.NET AJAX RadHtmlChart causes this problem. Other pages with other Telerik UI for ASP.NET AJAX controls work fine.
We have also seen this issue on one other Telerik UI for ASP.NET AJAX control: RadClientDataSource
Any work-around to get this working?
1 Answer, 1 is accepted
Hi David,
I have tested by creating a Kendo UI for jQuery Notification in a Telerik UI for ASP.NET AJAX with RadHtmlChart included. However, on my end the Notification is displayed as expected without any issue.
What I would suggest you to double-check is:
- if the jQuery and Kendo UI for jQuery scripts are included in the header
- if the embedded jQuery is disabled by setting the EnableEmbeddedjQuery to "false"
- ensure that the variable jqueryobject is correctly selecting the element and returns the kendo object
Below you will find a snippet from the aspx page where the RadHtmlChart and Kendo UI for jQuery Notification are initialized:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Kendo UI in ASP.NET WebForms</title>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script src="https://unpkg.com/jszip/dist/jszip.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2024.2.514/js/kendo.all.min.js"></script>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/themes/8.0.1/default/default-ocean-blue.css" />
</head>
<body>
<form id="form1" runat="server">
<telerik:RadScriptManager ID="RadScriptManager1" runat="server" EnableEmbeddedjQuery="false">
<Scripts>
<asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.Core.js" />
<asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQueryExternal.js" />
<asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQueryPlugins.js" />
</Scripts>
</telerik:RadScriptManager>
<telerik:RadHtmlChart ID="RadHtmlChart1" runat="server" Width="600px">
<PlotArea>
<Series>
<telerik:ColumnSeries DataFieldY="Q1"></telerik:ColumnSeries>
<telerik:ColumnSeries DataFieldY="Q2"></telerik:ColumnSeries>
<telerik:ColumnSeries DataFieldY="Q3"></telerik:ColumnSeries>
<telerik:ColumnSeries DataFieldY="Q4"></telerik:ColumnSeries>
</Series>
</PlotArea>
</telerik:RadHtmlChart>
<style>
#appendto {
width: 200px;
height: 2rem;
border: 1px solid #c0c0c0;
display: flex;
justify-content: center;
align-items: center;
margin: 2rem 0;
}
</style>
<span id="popupNotification"></span>
<span id="staticNotification"></span>
<div id="appendto"></div>
<button class="btnNotification">Show Kendo Notification</button>
<script>
$(document).ready(function () {
var jqueryobject = $("#staticNotification");
var notif = jqueryobject.kendoNotification({
appendTo: "#appendto"
}).data("kendoNotification");
$('.btnNotification').on('click', function (e) {
e.preventDefault();
notif.show('This is a Kendo Notification!');
})
});
</script>
</form>
</body>
</html>
Here is also an article regarding including external jQuery in Telerik UI for ASP.NET AJAX applications.
I hope this helps.
Regards,
Neli
Progress Telerik