Live Chat Icon For mobile
Live Chat Icon
Popular Categories.NET  (143).NET Core  (22)Angular  (38)ASP.NET  (47)ASP.NET Core  (52)ASP.NET MVC  (83)Azure  (26)Blazor  (44)DocIO  (18)Essential JS 2  (64)Essential Studio  (159)Flutter  (46)JavaScript  (133)Microsoft  (96)PDF  (47)React  (29)Succinctly series  (118)Syncfusion  (382)TypeScript  (30)Uno Platform  (2)UWP  (4)Vue  (25)Webinar  (13)Windows Forms  (52)WPF  (85)Xamarin  (104)XlsIO  (20)Other CategoriesBarcode  (4)BI  (29)Bold BI  (3)Build conference  (6)Business intelligence  (53)Button  (4)C#  (97)Chart  (38)Cloud  (8)Company  (445)Dashboard  (4)Data Science  (3)Data Validation  (2)DataGrid  (27)Development  (232)Doc  (7)eBook  (89)Enterprise  (22)Entity Framework  (4)Essential Tools  (14)Excel  (11)Extensions  (6)File Manager  (3)Gantt  (6)Gauge  (4)Git  (3)Grid  (24)HTML  (8)Installer  (1)Knockout  (2)LINQPad  (1)Linux  (1)M-Commerce  (1)Metro Studio  (11)Mobile  (133)Mobile MVC  (9)OLAP server  (1)Orubase  (12)Partners  (20)PDF viewer  (15)Performance  (1)PHP  (1)PivotGrid  (4)Predictive Analytics  (6)Report Server  (3)Reporting  (10)Reporting / Back Office  (11)Rich Text Editor  (5)Road Map  (9)Scheduler  (13)SfDataGrid  (7)Silverlight  (21)Sneak Peek  (12)Solution Services  (2)Spreadsheet  (2)SQL  (3)Stock Chart  (1)Surface  (4)Tablets  (5)Theme  (8)Tips and Tricks  (12)UI  (55)Uncategorized  (68)Unix  (2)User interface  (42)Visual State Manager  (1)Visual Studio  (12)Visual Studio Code  (6)Web  (84)What's new  (53)Windows 8  (19)Windows App  (1)Windows Phone  (15)Windows Phone 7  (9)WinRT  (26)
Share on twitter
Share on facebook
Share on linkedin

Introduction to Essential JavaScript

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:

  1. Default templates
  2. Control creation
  3. Getting and setting properties
  4. Invoking functions
  5. Wiring events

 

Let me start by providing a sample of how to use a default template.

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>

	

      

Control creation

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
       });

Getting or setting properties

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());

Invoking Functions

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");

Wiring events

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
       }); 

Dependencies

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.

Syncfusion’s content delivery network

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.

Skin

CDN  Link

Flat Azure (default theme)

http://cdn.syncfusion.com/11.2/js/flat-azure/ej.widgets.all.min.css

Flat Azure Dark

http://cdn.syncfusion.com/11.2/js/flat-azure-dark/ej.widgets.all.min.css

Flat Lime

http://cdn.syncfusion.com/11.2/js/flat-lime/ej.widgets.all.min.css

Flat Lime Dark

http://cdn.syncfusion.com/11.2/js/flat-lime-dark/ej.widgets.all.min.css

Flat Saffron

http://cdn.syncfusion.com/11.2/js/flat-saffron/ej.widgets.all.min.css

Flat Saffron Dark

http://cdn.syncfusion.com/11.2/js/flat-saffron-dark/ej.widgets.all.min.css

Gradient Azure

http://cdn.syncfusion.com/11.2/js/gradient-azure/ej.widgets.all.min.css

Gradient Azure Dark

http://cdn.syncfusion.com/11.2/js/gradient-azure-dark/ej.widgets.all.min.css

Gradient Lime

http://cdn.syncfusion.com/11.2/js/gradient-lime/ej.widgets.all.min.css

Gradient Lime Dark

http://cdn.syncfusion.com/11.2/js/gradient-lime-dark/ej.widgets.all.min.css

Gradient Saffron

http://cdn.syncfusion.com/11.2/js/gradient-saffron/ej.widgets.all.min.css

Gradient Saffron Dark

http://cdn.syncfusion.com/11.2/js/gradient-saffron-dark/ej.widgets.all.min.css

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

Tags:

Share this post:

Share on twitter
Share on facebook
Share on linkedin

Leave a comment

Popular Now

Be the first to get updates

Subscribe RSS feed
Scroll To Top