CDN
5 Jun 20234 minutes to read
The CDN links are provided individually for all the Scripts and Stylesheets that provide easier access to Syncfusion JavaScript components.
NOTE
All the provided CDN used either through http or https.
CDN Script links
External dependency libraries
The first three common script libraries listed in the following table are more essential and mandatory to render any of the Syncfusion widgets on the application module. The basic syntax is as follows,
http://cdn.syncfusion.com/js/assets/external/[file name]
Example: [https://cdn.syncfusion.com/js/assets/external/jquery-1.10.2.min.js](https://cdn.syncfusion.com/js/assets/external/jquery-1.10.2.min.js)Property Table
| Name | Details | CDN link |
| jQuery 2.1.4 | Common jQuery script to render any of the Syncfusion widgets. | <a href=http://cdn.syncfusion.com/js/assets/external/jquery-2.1.4.min.js>http://cdn.syncfusion.com/js/assets/external/jquery-2.1.4.min.js</a> |
| jsrender | Supports template rendering. | <a href=http://cdn.syncfusion.com/js/assets/external/jsrender.min.js>http://cdn.syncfusion.com/js/assets/external/jsrender.min.js</a> |
| jQuery.Globalize | Supports Globalization. | <a href=http://cdn.syncfusion.com/js/assets/external/jquery.globalize.min.js>http://cdn.syncfusion.com/js/assets/external/jquery.globalize.min.js</a> |
| Angular JS | Minified angular file to support custom directives. | <a href=http://cdn.syncfusion.com/js/assets/external/angular.min.js>http://cdn.syncfusion.com/js/assets/external/angular.min.js</a> |
| excanvas | To support canvas element rendering in IE8 browser. | <a href=http://cdn.syncfusion.com/js/assets/external/excanvas.min.js>http://cdn.syncfusion.com/js/assets/external/excanvas.min.js</a> |
| Knockout JS | Minified knockout file to support the observable binding. | <a href=http://cdn.syncfusion.com/js/assets/external/knockout.min.js>http://cdn.syncfusion.com/js/assets/external/knockout.min.js</a> |
| requireJS | Supports loading of required dependencies. | <a href=http://cdn.syncfusion.com/js/assets/external/require.min.js>http://cdn.syncfusion.com/js/assets/external/require.min.js</a> |
| jquery.validate | Supports client-side validation. | <a href=http://cdn.syncfusion.com/js/assets/external/jquery.validate.min.js>http://cdn.syncfusion.com/js/assets/external/jquery.validate.min.js</a> |
| Jquery.validate.unobtrusive | To enable unobtrusive validation options in data-* attributes. | <a href=http://cdn.syncfusion.com/js/assets/external/jquery.validate.unobtrusive.min.js>http://cdn.syncfusion.com/js/assets/external/jquery.validate.unobtrusive.min.js</a> |
Syncfusion Dependency Libraries - Based on latest build version
The CDN script files are maintained for each version of the Essential Studio individually. Refer to the following syntax.
http://cdn.syncfusion.com/[version]/js/mobile/[file name]
For example, to access the ej.mobile.all.min.js file in 14.1.0.46 version–
[https://cdn.syncfusion.com/14.1.0.46/js/mobile/ej.mobile.all.min.js]([https://cdn.syncfusion.com/14.1.0.46/js/mobile/ej.mobile.all.min.js](https://cdn.syncfusion.com/14.1.0.46/js/mobile/ej.mobile.all.min.js))Property Table
| Name | Details | CDN link |
| ej.mobile.all.min | Combined script file that includes the script of all the Syncfusion UI mobile widgets. | <a href=http://cdn.syncfusion.com/14.1.0.46/js/mobile/ej.mobile.all.min.js>http://cdn.syncfusion.com/14.1.0.46/js/mobile/ej.mobile.all.min.js</a> |
| ej.unobtrusive.min | Supports Syncfusion widgets to render in HTML5 format. | <a href=http://cdn.syncfusion.com/14.1.0.46/js/web/ej.unobtrusive.min.js>http://cdn.syncfusion.com/14.1.0.46/js/web/ej.unobtrusive.min.js</a> |
| ej.widget.angular.min | Provides complete support for Angular JS. | <a href=http://cdn.syncfusion.com/14.1.0.46/js/ej.widget.angular.min.js>http://cdn.syncfusion.com/14.1.0.46/js/ej.widget.angular.min.js</a> |
| ej.widget.ko.min | Provides complete support for Knockout JS. | <a href=http://cdn.syncfusion.com/14.1.0.46/js/ej.widget.ko.min.js>http://cdn.syncfusion.com/14.1.0.46/js/ej.widget.ko.min.js</a> |
The Knockout and angular dependencies can be accessed through the following syntax,
http://cdn.syncfusion.com/[version]/js/[file name]
For example, to access the ej.widget.angular.min.js file in 14.1.0.46 version–
[https://cdn.syncfusion.com/14.1.0.46/js/ej.widget.angular.min.js]([https://cdn.syncfusion.com/14.1.0.46/js/ej.widget.angular.min.js](https://cdn.syncfusion.com/14.1.0.46/js/ej.widget.angular.min.js))CDN Stylesheet links
The CDN links for all the CSS files (both core & theme related) are depicted together in the following table. Refer to the following syntax:
http://cdn.syncfusion.com/[version]/js/mobile/[file name]Property Table
| Name | Details | CDN link | |
| ej.mobile.all.min.css | Includes the CSS of all the themes combined in a single CSS file. | <a href=http://cdn.syncfusion.com/14.1.0.46/js/mobile/ej.mobile.all.min.css>http://cdn.syncfusion.com/14.1.0.46/js/mobile/ej.mobile.all.min.css</a> | |
Referring local Scripts & CSS, when CDN fails
Sometimes, CDN links may go down due to network or connection problems. On such scenarios, you can refer to the local scripts and CSS files dynamically in the application by checking if the scripts and CSS files loaded through CDN returns undefined. If it returns undefined, the local scripts get referred, else the CDN links work fine as illustrated in the following code example.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta id="viewport" name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0, user-scalable=no" />
<title>My first HTML page</title> <!-- CDN LINK references-->
<link href="http://cdn.syncfusion.com/14.1.0.46/js/mobile/ej.mobile.all.min.css" rel="stylesheet" />
<script src="http://cdn.syncfusion.com/js/assets/external/jquery-1.10.2.min.js"></script>
<script src="http://cdn.syncfusion.com/js/assets/external/jquery.globalize.min.js"></script>
<script src="http://cdn.syncfusion.com/js/assets/external/jsrender.min.js"></script>
<script src="http://cdn.syncfusion.com/14.1.0.46/js/mobile/ej.mobile.all.min.js"></script>
<script type="text/javascript">
if (typeof jQuery == "undefined") {
// If CDN fails, jQuery returns undefined
// Referring local scripts - Specify the path where the following files are located in your machine
document.write(decodeURIComponent('%3Cscript src="Scripts/jquery-1.10.2.min.js" %3E%3C/script%3E'));
document.write(decodeURIComponent('%3Cscript src="Scripts/jquery.globalize.min.js" %3E%3C/script%3E'));
document.write(decodeURIComponent('%3Cscript src="Scripts/jsrender.min.js" %3E%3C/script%3E'));
}
if (typeof ej == "undefined") {
// If CDN fails, ej returns undefined.
// So that, refer the Syncfusion stylesheets and scripts from the local path here
// StyleSheet reference from the local system path
document.write(decodeURIComponent('%3Clink rel="stylesheet" href="Content/ej/mobile/ej.mobile.all.min.css" %3C/%3E'));
// Script reference from the local system path
document.write(decodeURIComponent('%3Cscript src="Scripts/ej/ej.mobile.all.min.js" %3E%3C/script%3E'));
}
</script>
</head>
<body>
<div data-role="appview">
<!--Container for ejmDatePicker widget-->
<input id="startDate" data-role="ejmdatepicker" />
</div>
</body>
</html>