Skip to content

Commit b8e60f4

Browse files
JekataJekata
committed
docs(kendo): update the interoperability and compliance article with Kendo UI
1 parent cf01912 commit b8e60f4

File tree

2 files changed

+179
-115
lines changed

2 files changed

+179
-115
lines changed

‎controls/htmlchart/how-to/radhtmlchart-integration-with-kendoui-widgets.md

+169-115
Original file line numberDiff line numberDiff line change
@@ -8,9 +8,13 @@ published: True
88
position: 3
99
---
1010

11+
## Important Information
12+
13+
> **It is generally not recommended to use both Telerik UI for ASP.NET AJAX and Kendo UI for jQuery on the same page.** These suites use different versions of Kendo UI scripts, which may cause compatibility issues.
14+
1115
# RadHtmlChart Integration With KendoUI Widgets
1216

13-
This help article illustrates how to use the [ASP.NET AJAX Chart](https://www.telerik.com/products/aspnet-ajax/html-chart.aspx) control and a [Kendo UI Widget](https://docs.telerik.com/kendo-ui/introduction) on the same WebForms page. **RadHtmlChart** is an ASP.NET server-side wrapper of the Kendo UI charting widget and it already loads the chart specific scripts and jQuery. You can select either pattern below in order to avoid script conflicts in such a setup:
17+
This help article illustrates a workaround of how to use the [ASP.NET AJAX Chart](https://www.telerik.com/products/aspnet-ajax/html-chart.aspx) control and a [Kendo UI Widget](https://docs.telerik.com/kendo-ui/introduction) on the same WebForms page. **RadHtmlChart** is an ASP.NET server-side wrapper of the Kendo UI charting widget and it already loads the chart specific scripts and jQuery. You can select either pattern below in order to avoid script conflicts in such a setup:
1418

1519
* [Use External jQuery with RadScriptManager](#use-external-jquery-with-radscriptmanager)
1620

@@ -22,89 +26,134 @@ When you load an external jQuery on a page that has a RadHtmlChart instance you
2226

2327
You can easily handle that situation by configuring RadScriptManager to use the external jQuery as follows:
2428

25-
1. Add script references to the external jQuery library (**jQuery.js**) andKendo UI library (**kendo.all.min.js**) in the head tag.
29+
1. Reference jQuery and the Kendo UI stylesheet in the <head> section:
2630

27-
**ASP.NET**
28-
29-
<head runat="server">
30-
<title></title>
31-
<script type="text/javascript" src="../KendoUI/js/jquery.min.js"></script>
32-
<script type="text/javascript" src="../KendoUI/js/kendo.all.min.js"></script>
33-
</head>
31+
````ASP.NET
32+
<head runat="server">
33+
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
34+
</head>
35+
````
3436

37+
2. Configure the RadScriptManager as per the **Including external jQuery** section from the [Using jQuery]({%slug introduction/radcontrols-for-asp.net-ajax-fundamentals/using-jquery/using-jquery%}) article.
3538

36-
1. Configure the RadScriptManager as per the **Including external jQuery** section from the [Using jQuery]({%slug introduction/radcontrols-for-asp.net-ajax-fundamentals/using-jquery/using-jquery%}) article.
37-
38-
**ASP.NET**
39-
40-
<telerik:RadScriptManager ID="RadScriptManager1" runat="server" EnableEmbeddedjQuery="false">
39+
````ASP.NET
40+
<telerik:RadScriptManager EnableCdn="true" ID="RadScriptManager1" runat="server" EnableEmbeddedjQuery="false">
4141
<Scripts>
4242
<asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.Core.js" />
4343
<asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQueryExternal.js" />
4444
<asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQueryPlugins.js" />
4545
</Scripts>
4646
</telerik:RadScriptManager>
47-
47+
````
48+
49+
3. Add RadHtmlChart. Define the RadHtmlChart before loading Kendo UI scripts.
50+
51+
````ASP.NET
52+
<telerik:RadHtmlChart runat="server" ID="RadHtmlChart1" Width="600px" Height="400px">
53+
<PlotArea>
54+
<Series>
55+
<telerik:ColumnSeries Name="Product 1">
56+
<SeriesItems>
57+
<telerik:CategorySeriesItem Y="15000" />
58+
<telerik:CategorySeriesItem Y="23000" />
59+
<telerik:CategorySeriesItem Y="10000" />
60+
</SeriesItems>
61+
</telerik:ColumnSeries>
62+
</Series>
63+
<XAxis>
64+
<Items>
65+
<telerik:AxisItem LabelText="1" />
66+
<telerik:AxisItem LabelText="2" />
67+
<telerik:AxisItem LabelText="3" />
68+
</Items>
69+
</XAxis>
70+
</PlotArea>
71+
<ChartTitle Text="Product sales for 2011">
72+
</ChartTitle>
73+
<Legend>
74+
<Appearance Position="Bottom" />
75+
</Legend>
76+
</telerik:RadHtmlChart>
77+
````
78+
79+
4. Load Kendo UI Scripts After RadHtmlChart. Ensure that Kendo UI scripts load after RadHtmlChart:
80+
81+
````ASP.NET
82+
<%-- Load Kendo scripts after the AJAX Chart --%>
83+
<script src="https://kendo.cdn.telerik.com/2024.4.1112/js/kendo.all.min.js"></script>
84+
````
85+
86+
5. Initialize Kendo UI Widgets. After scripts are loaded, initialize Kendo UI widgets, such as Kendo Editor.
87+
88+
````ASP.NET
89+
<textarea id="kendoEditorTextArea" style="width: 600px; height: 400px;">some content in textarea</textarea>
90+
<script type="text/javascript">
91+
$(document).ready(function () {
92+
//Render kendo editor on document ready event
93+
$("#kendoEditorTextArea").kendoEditor();
94+
});
95+
</script>
96+
````
4897

4998
See **Example 1** for details.
5099

51100
>caption Example 1: RadHtmlChart and Kendo UI editor integration with external jQuery.
52101
53102
````ASP.NET
54-
<html xmlns="https://www.w3.org/1999/xhtml">
55-
<head id="Head1" runat="server">
56-
<title></title>
57-
<!--Kendo UI editor specific CSS -->
58-
<link href="../KendoUI/styles/kendo.common.min.css" rel="stylesheet" />
59-
<link href="../KendoUI/styles/kendo.default.min.css" rel="stylesheet" />
60-
<link href="../KendoUI/styles/kendo.dataviz.min.css" rel="stylesheet" />
61-
<link href="../KendoUI/styles/kendo.dataviz.default.min.css" rel="stylesheet" />
62-
<!--jQuery and Kendo UI JavaScript libraries-->
63-
<script type="text/javascript" src="../KendoUI/js/jquery.min.js"></script>
64-
<script type="text/javascript" src="../KendoUI/js/kendo.all.min.js"></script>
103+
<html xmlns="http://www.w3.org/1999/xhtml">
104+
<head runat="server">
105+
<title>RadControls</title>
106+
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
107+
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/themes/10.0.1/default/default-ocean-blue.css" />
108+
65109
</head>
66110
<body>
67-
<form id="form1" runat="server">
68-
<telerik:RadScriptManager ID="RadScriptManager1" runat="server" EnableEmbeddedjQuery="false">
69-
<Scripts>
70-
<asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.Core.js" />
71-
<asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQueryExternal.js" />
72-
<asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQueryPlugins.js" />
73-
</Scripts>
74-
</telerik:RadScriptManager>
75-
<telerik:RadHtmlChart runat="server" ID="RadHtmlChart1" Width="600px" Height="400px">
76-
<PlotArea>
77-
<Series>
78-
<telerik:ColumnSeries Name="Product 1">
79-
<SeriesItems>
80-
<telerik:CategorySeriesItem Y="15000" />
81-
<telerik:CategorySeriesItem Y="23000" />
82-
<telerik:CategorySeriesItem Y="10000" />
83-
</SeriesItems>
84-
</telerik:ColumnSeries>
85-
</Series>
86-
<XAxis>
87-
<Items>
88-
<telerik:AxisItem LabelText="1" />
89-
<telerik:AxisItem LabelText="2" />
90-
<telerik:AxisItem LabelText="3" />
91-
</Items>
92-
</XAxis>
93-
</PlotArea>
94-
<ChartTitle Text="Product sales for 2011">
95-
</ChartTitle>
96-
<Legend>
97-
<Appearance Position="Bottom" />
98-
</Legend>
99-
</telerik:RadHtmlChart>
100-
<textarea id="kendoEditorTextArea" style="width: 600px; height: 400px;">some content in textarea</textarea>
101-
<script type="text/javascript">
102-
$(document).ready(function () {
103-
//Render kendo editor on document ready event
104-
$("#kendoEditorTextArea").kendoEditor();
105-
});
106-
</script>
107-
</form>
111+
<form id="form1" runat="server">
112+
<telerik:RadScriptManager EnableCdn="true" ID="RadScriptManager1" runat="server" EnableEmbeddedjQuery="false">
113+
<Scripts>
114+
<asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.Core.js" />
115+
<asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQueryExternal.js" />
116+
<asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQueryPlugins.js" />
117+
</Scripts>
118+
</telerik:RadScriptManager>
119+
<telerik:RadHtmlChart runat="server" ID="RadHtmlChart1" Width="600px" Height="400px">
120+
<PlotArea>
121+
<Series>
122+
<telerik:ColumnSeries Name="Product 1">
123+
<SeriesItems>
124+
<telerik:CategorySeriesItem Y="15000" />
125+
<telerik:CategorySeriesItem Y="23000" />
126+
<telerik:CategorySeriesItem Y="10000" />
127+
</SeriesItems>
128+
</telerik:ColumnSeries>
129+
</Series>
130+
<XAxis>
131+
<Items>
132+
<telerik:AxisItem LabelText="1" />
133+
<telerik:AxisItem LabelText="2" />
134+
<telerik:AxisItem LabelText="3" />
135+
</Items>
136+
</XAxis>
137+
</PlotArea>
138+
<ChartTitle Text="Product sales for 2011">
139+
</ChartTitle>
140+
<Legend>
141+
<Appearance Position="Bottom" />
142+
</Legend>
143+
</telerik:RadHtmlChart>
144+
145+
<%-- Load Kendo scripts after the AJAX Chart --%>
146+
<script src="https://kendo.cdn.telerik.com/2024.4.1112/js/kendo.all.min.js"></script>
147+
148+
<textarea id="kendoEditorTextArea" style="width: 600px; height: 400px;">some content in textarea</textarea>
149+
<script type="text/javascript">
150+
$(document).ready(function () {
151+
//Render kendo editor on document ready event
152+
$("#kendoEditorTextArea").kendoEditor();
153+
});
154+
</script>
155+
156+
</form>
108157
</body>
109158
</html>
110159
````
@@ -128,54 +177,59 @@ This can be done by loading a single jQuery and considering the following script
128177
>caption Example2: RadHtmlChart and Kendo UI editor integration with disabling embedded resources of the chart.
129178
130179
````ASP.NET
131-
<!--Kendo UI editor specific CSS -->
132-
<link href="../KendoUI/styles/kendo.common.min.css" rel="stylesheet" />
133-
<link href="../KendoUI/styles/kendo.default.min.css" rel="stylesheet" />
134-
<link href="../KendoUI/styles/kendo.dataviz.min.css" rel="stylesheet" />
135-
<link href="../KendoUI/styles/kendo.dataviz.default.min.css" rel="stylesheet" />
136-
<!--Reference the following scripts in this specific order-->
137-
<telerik:RadScriptManager ID="RadScriptManager1" runat="server" EnableScriptCombine="false">
138-
<Scripts>
139-
<asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.Core.js" />
140-
<asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQuery.js" />
141-
<asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQueryInclude.js" />
142-
<asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQueryPlugins.js" />
143-
<asp:ScriptReference Path="../KendoUI/js/kendo.all.min.js" />
144-
<asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.HtmlChart.RadHtmlChart.js" />
145-
</Scripts>
146-
</telerik:RadScriptManager>
147-
<telerik:RadHtmlChart runat="server" ID="RadHtmlChart1" Width="600px" Height="400px" EnableEmbeddedScripts="false">
148-
<PlotArea>
149-
<Series>
150-
<telerik:ColumnSeries Name="Product 1">
151-
<SeriesItems>
152-
<telerik:CategorySeriesItem Y="15000" />
153-
<telerik:CategorySeriesItem Y="23000" />
154-
<telerik:CategorySeriesItem Y="10000" />
155-
</SeriesItems>
156-
</telerik:ColumnSeries>
157-
</Series>
158-
<XAxis>
159-
<Items>
160-
<telerik:AxisItem LabelText="1" />
161-
<telerik:AxisItem LabelText="2" />
162-
<telerik:AxisItem LabelText="3" />
163-
</Items>
164-
</XAxis>
165-
</PlotArea>
166-
<ChartTitle Text="Product sales for 2011">
167-
</ChartTitle>
168-
<Legend>
169-
<Appearance Position="Bottom" />
170-
</Legend>
171-
</telerik:RadHtmlChart>
172-
<textarea id="kendoEditorTextArea" style="width: 600px; height: 400px;">some content in textarea</textarea>
173-
<script type="text/javascript">
174-
$(document).ready(function () {
175-
//Render kendo editor on document ready event
176-
$("#kendoEditorTextArea").kendoEditor();
177-
});
178-
</script>
180+
<html xmlns="http://www.w3.org/1999/xhtml">
181+
<head runat="server">
182+
<title>RadControls</title>
183+
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/themes/10.2.0/default/default-ocean-blue.css" />
184+
</head>
185+
<body>
186+
<form id="form1" runat="server">
187+
<telerik:RadScriptManager ID="RadScriptManager1" runat="server" EnableScriptCombine="false">
188+
<Scripts>
189+
<asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.Core.js" />
190+
<asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQuery.js" />
191+
<asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQueryInclude.js" />
192+
<asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQueryPlugins.js" />
193+
<asp:ScriptReference Path="https://kendo.cdn.telerik.com/2025.1.227/js/kendo.all.min.js" />
194+
<asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.HtmlChart.RadHtmlChart.js" />
195+
</Scripts>
196+
</telerik:RadScriptManager>
197+
<telerik:RadHtmlChart runat="server" ID="RadHtmlChart1" Width="600px" Height="400px" EnableEmbeddedScripts="false">
198+
<PlotArea>
199+
<Series>
200+
<telerik:ColumnSeries Name="Product 1">
201+
<SeriesItems>
202+
<telerik:CategorySeriesItem Y="15000" />
203+
<telerik:CategorySeriesItem Y="23000" />
204+
<telerik:CategorySeriesItem Y="10000" />
205+
</SeriesItems>
206+
</telerik:ColumnSeries>
207+
</Series>
208+
<XAxis>
209+
<Items>
210+
<telerik:AxisItem LabelText="1" />
211+
<telerik:AxisItem LabelText="2" />
212+
<telerik:AxisItem LabelText="3" />
213+
</Items>
214+
</XAxis>
215+
</PlotArea>
216+
<ChartTitle Text="Product sales for 2011">
217+
</ChartTitle>
218+
<Legend>
219+
<Appearance Position="Bottom" />
220+
</Legend>
221+
</telerik:RadHtmlChart>
222+
223+
<textarea id="kendoEditorTextArea" style="width: 600px; height: 400px;">some content in textarea</textarea>
224+
<script type="text/javascript">
225+
$(document).ready(function () {
226+
//Render kendo editor on document ready event
227+
$("#kendoEditorTextArea").kendoEditor();
228+
});
229+
</script>
230+
</form>
231+
</body>
232+
</html>
179233
````
180234

181235

‎knowledge-base/integrating-telerik-controls-with-kendo-jquery-raises-issues.md

+10
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,9 @@ published: True
2121
</tbody>
2222
</table>
2323

24+
## Important Information
25+
> **It is generally not recommended to use both Telerik UI for ASP.NET AJAX and Kendo UI for jQuery on the same page.** These suites use different versions of Kendo UI scripts, which may cause compatibility issues.
26+
2427
## Description
2528

2629
When trying to integrate Telerik UI for ASP.NET AJAX controls with Kendo UI for jQuery widgets, issues occur.
@@ -35,14 +38,21 @@ To solve this issue, refer to the article on [integrating the HtmlChart with Ken
3538

3639
Also, the following list specifies the controls that are ASP.NET WebForms server-side wrappers of Kendo UI widgets:
3740

41+
* AIPrompt
42+
* Badge
3843
* Chat
44+
* Chip
45+
* ChipList
3946
* ClientDataSource
4047
* ClientExportManager
4148
* Diagram
49+
* Drawer
50+
* FloatingActionButton
4251
* Gantt
4352
* Gauge
4453
* HtmlChart
4554
* Map
4655
* MultiColumnComboBox
4756
* Spreadsheet
57+
* Timeline
4858
* TreeMap

0 commit comments

Comments
 (0)