Bharath M
Essential Studio® for JavaScript provides a rich set of controls; all of which have been developed using the jQuery plug-in style, so the controls maintain jQuery-like chaining on every action.
For starters, let’s talk about the basics before getting into how to use any of our JavaScript controls. Here’s a list of what I’m going to discuss:
Let me start by providing a sample of how to use a default template.
This is the default template for Essential Studio® for JavaScript. The style sheet is set at the top. Flat Azure is the default theme.
<title>Getting Started Essential JS</title>
<!-- Style sheet for default theme (Flat Azure) -->
<link href="http://cdn.syncfusion.com/js/web/flat-azure/ej.web.all-latest.min.css" rel="stylesheet" />
<!--Scripts-->
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script src="http://borismoore.github.io/jsrender/jsrender.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/globalize/0.1.1/globalize.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script>
<script src="http://cdn.syncfusion.com/js/ej.widgets.all-latest.min.js"></script>
Controls can be created using following syntax in JavaScript:
$("jquery-selector").();
This creates a control with the default settings. Here’s an example:
$("#date-input").ejDatePicker();
To create a control with an option specified by you, use this syntax:
$("jquery-selector").(options);
options : <Object Literal>
Here’s an example:
$("#date-input").ejDatePicker({
;
persist: true
});
Properties are important to define a control’s behavior. They have been enabled in every control with an option to access or change their values dynamically. This is the syntax to get or set property values:
Getting properties
$("jquery-selector").("model.propertyName")
-Or-
$("jquery-selector").("option", "propertyName");
This returns the value of the property with propertyName. Here’s an example using the second syntax:
$("#date-input").ejDatePicker("option", "date");
Setting properties
$("jquery-selector").("model.propertyName", "value");
-Or-
$("jquery-selector").("option", "propertyName", "value");
-Or-
$("jquery-selector").({"propertyName": "value"});
This sets the value of a property according to the value give to propertyName. Here’s an example:
$("#date-input").ejDatePicker("option", "date", new Date());
Functions can be invoked the same way a property is accessed. Here’s the syntax for invoking functions:
$("jquery-selector").("functionName");
This calls the function with no parameter and returns returnValue if the function returns anything, or it will maintain the jQuery chain. Here’s an example:
$("#date-input").ejDatePicker("open");
The following syntax calls the function with parameter values “param1” and “param2”, and then it returns returnValue if the function returns anything, or it will maintain the jQuery chain.
$("jquery-selector").("functionName", "param1", "param2");
Here’s an example of this:
$("#date-input").ejDatePicker("option", "cssClass", "custom");
It is important to get a notification for an event whenever changes or actions happen in a control. Events can be wired the same way as jQuery events are bound. The syntax for this follows:
$("jquery-selector").("model.eventName", );
-Or-
$("jquery-selector").on("ej-plugin-nameeventName”, );
This binds the event’s “eventName” to the control. Here are examples of both types of syntax:
$("#date-input").ejDatePicker("model.destroy", function(){
// event handler
});
$("#date-input").on("ejDatePickerdestroy", function(){
// event handler
});
Essential Studio® for JavaScript has dependencies on the following libraries:
· jQuery: 1.7.1 and above.
· JsRender: For templates.
· jQuery Easing: For animation.
· jQuery Globalize: For globalization.
You need to add references to all these script files in your projects.
Essential Studio® for JavaScript libraries and themes are hosted on a content delivery network (CDN) server and are ready for use. Please refer to the following tables:
Script
| Name | CDN Link |
| ej.widgets.all | http://cdn.syncfusion.com/11.2/js/ej.widgets.all.min.js |
Themes
Essential Studio® for JavaScript supports 12 themes. They are listed in the following table with their CDN links.
Now you should be able to easily integrate Essential Studio® for JavaScript into a new or existing application since it follows the same usage patterns as JQuery. We will post a blog on how to get started using the framework controls shortly.
For those who haven’t tried Essential Studio® for JavaScript, simply check out the following links for more details:
List of controls: https://www.syncfusion.com/javascript-ui-controls
Online demo: http://js.syncfusion.com
Essential Studio® for JavaScript download: https://www.syncfusion.com/downloads/javascript