Introduction to the Grid control for JavaScript

By Yogesh R.

Introduction

The Grid control for JavaScript is a feature-rich control that provides extensive appearance customization options with support for grouped records. With the JavaScript Grid control, you can create a grid with a highly customizable look and feel. This grid is very useful for generating complex grid-based reports with rich formatting. It supports paging, sorting, grouping, filtering, and editing features.

 

Key Features

1. Paging

2. Sorting

3. Editing

4. Grouping

5. Filtering

6. Detail template

 

Getting Started

The basics for using the Grid control for JavaScript are provided in the sections below.

 

Grid Creation

1. Create an HTML file.

 

2. Paste the following template to the HTML file for the JavaScript Grid control.

 
<!DOCTYPE html>
<html>
<head>
<title>Getting Started with Essential JS</title>
<!-- Style sheet for default theme(flat azure). -->
<link href="http://cdn.syncfusion.com/js/flat-azure/ej.widgets.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> </head> <body> //Add the grid element here. </body> </html>






3. Add the div element for grid rendering.

<div id="Grid"></div>

4. Initialize the Grid control with local data in the script.

$(function () {// Document ready.
// Add data for grid here.
var data = [{ "OrderID": 10248, "CustomerID": "VINET", "EmployeeID": 5 },
{ "OrderID": 10249, "CustomerID": "TOMSP", "EmployeeID": 6 },
{ "OrderID": 10250, "CustomerID": "HANAR", "EmployeeID": 4 }];

// Simple control creation.

$("#Grid").ejGrid({
//array of json object
dataSource: data,
columns: [
{ field: "OrderID" },
{ field: "CustomerID" },
{ field: "EmployeeID" }
]
});
});

 

5. Output of above steps:

image

Data Binding

Remote Data

Control initialized with oData service.

 

$("#Grid").ejGrid(options);

 

options : <Object Literal>

Creates the control with the options provided.

 

Example:

$(function () {// Data for grid.
// Essential JS data manager for retrieving data from service
var dataManger = ej.DataManager({
url: "http://mvc.syncfusion.com/Services/Northwnd.svc/Orders/"
});

// Simple control creation.

$("#Grid").ejGrid({
dataSource: dataManager, // Essential JS data manager.
allowPaging: true,
columns: [
{ field: "OrderID" },
{ field: "CustomerID" },
{ field: "EmployeeID" }
]
});
});

 

Enabling basic features

 

Paging

Enable the paging feature after initializing.

$("#Grid").ejGrid("option", "allowPaging", true);
 



Sorting

Enable the sorting feature after initializing.

$("#Grid").ejGrid("option", "allowSorting", true);
 
Filtering

Enable the filtering feature after initializing.

$("#Grid").ejGrid("option", "allowFiltering", true);
 
Editing

Enable the editing feature at Grid initialize.

$("#Grid").ejGrid({
dataSource: data,
edit:{allowEditing:true},
columns: [
{ field: "OrderID",key:true },
{ field: "CustomerID" },
{ field: "EmployeeID" }
]
});

 

Wiring events

Events are important for providing notifications on the changes and actions that have happened in controls. The events can be wired the same way that jQuery events are bound. Event initialization of grid is as follows:

$("#Grid").ejGrid("model.eventName", <eventHandler>);

Or

$("#Grid").on("ejGrideventName”, <eventHandler>);

Bind the event "eventName" to control.

 

Example

$("#Grid").ejGrid({
dataSource: data,
queryCellInfo:function(args){
// event handler
},

columns: [
{ field: "OrderID" },
{ field: "CustomerID" },
{ field: "EmployeeID" }
]
});

$("#Grid").ejGrid("model.rowSelected", function () {
// event handler 
});

$("#Grid").on("ejGridrowSelected", function () {
// event handler 
});

 

Dependencies

Essential JS has dependency on the following libraries:

1. jQuery - 1.7.1 and above

2. JS Render - for templates

3. jQuery easing - for animation

4. jQuery Globalize - for globalization

You need to include all these references as script files in your projects.

 

Conclusion

In summary, you should be able to easily integrate Essential JS into your new or existing applications since it follows the same usage patterns as jQuery. We will also be posting blogs on our other JavaScript controls in the coming days.

For those who have not yet tried our Essential Studio for JavaScript, check out our complete list of controls, take a look at our online demos, or download a free evaluation today.

Loading