| layout | post |
|---|---|
| title | CDN links for Syncfusion Essential JS widgets |
| description | Check out and learn here all about how to add CDN links for syncfusion essential js widgets and dependent scripts. |
| platform | js |
| control | Introduction |
| documentation | ug |
The CDN links are provided individually for all the scripts and style sheets of Syncfusion Essential JS components.
The basic syntax follows below,
http://cdn.syncfusion.com/js/assets/external/**[fileName]**
Example: http://cdn.syncfusion.com/js/assets/external/jquery-1.10.2.min.js
N> The first three script libraries listed below are mandatory to render any of the Syncfusion Essential JS widgets.
The CDN script files are maintained for each version of the Essential Studio individually. Refer the following syntax:
http://cdn.syncfusion.com/**[version]**/js/web/**[fileName]**
Example, to access the ej.web.all.min.js file in {{ site.releaseversion }} version – http://cdn.syncfusion.com/{{ site.releaseversion }}/js/web/ej.web.all.min.js
The KnockoutJS and AngularJS dependencies can be accessed through the following syntax,
http://cdn.syncfusion.com/**[version]**/js/common/**[fileName]**
Example, to access the ej.widget.angular.min.js file in {{ site.releaseversion }} version – http://cdn.syncfusion.com/{{ site.releaseversion }}/js/common/ej.widget.angular.min.js
The CDN links for all the CSS files are provided in the below table. Refer the following syntax:
http://cdn.syncfusion.com/**[version]**/js/web/**[fileName]** – Core
http://cdn.syncfusion.com/**[version]**/js/web/**[theme-name]**/**[fileName]** – Theme related
Below table provides the links for the Flat-Azure and Flat-Azure Dark themes . Likewise, you can refer for any of the 13 available themes just by referring the required ej.theme.min.css available under each of the theme folders along with the widget core file.
N> All the provided CDN links can be accessed either through http or https.
One of the major risk with CDN links is that – sometimes it may go down due to the network or connection problems. On such scenarios, we can refer the local scripts and CSS files dynamically in the application by checking if the scripts and CSS files loaded through CDN returns undefined as depicted below,
{% highlight html %}
<title>My first HTML page</title> // CDN LINK references <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.easing.1.3.min.js"></script> <script src="http://cdn.syncfusion.com/js/assets/external/jsrender.min.js"></script> <script src="http://cdn.syncfusion.com/{{ site.releaseversion }}/js/web/ej.web.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 below 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.easing.1.3.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/web/default-theme/ej.web.all.min.css" %3C/%3E'));
// Script reference from the local system path
document.write(decodeURIComponent('%3Cscript src="Scripts/ej/ej.web.all.min.js" %3E%3C/script%3E'));
}
</script>
{% endhighlight %}