How to get started easily with an example of creating Syncfusion Javascript (ES5) data grid/datatable?
This document explains you about, how to create the Essential JavaScript 2 Grid sample in JavaScript (ES5).
Dependencies
Following are the list of dependencies you need, to use the grid with all the features.
|-- @syncfusion/ej2-grids |-- @syncfusion/ej2-base |-- @syncfusion/ej2-data |-- @syncfusion/ej2-buttons |-- @syncfusion/ej2-popups |-- @syncfusion/ej2-navigations |-- @syncfusion/ej2-dropdowns |-- @syncfusion/ej2-lists |-- @syncfusion/ej2-inputs |-- @syncfusion/ej2-splitbuttons |-- @syncfusion/ej2-calendars |-- @syncfusion/ej2-excel-export |-- @syncfusion/ej2-pdf-export |-- @syncfusion/ej2-file-utils |-- @syncfusion/ej2-compression
Setup for local environment
Follow the below steps to setup your local environment.
- Create a root folder myapp for your application.
- Create myapp/resources folder to store local scripts and styles files.
- Create myapp/index.js and myapp/index.html files to initialize the Essential JS 2 Grid control.
Adding Syncfusion resources
The Essential JS 2 Grid control can be initialized by using either of the following methods.
- Using local script and style.
- Using CDN link for script and style.
Using local script and style
You can get the global scripts and styles from the Essential Studio JavaScript (Essential JS 2) build installed location.
After installing the Essential JS 2 product build, you can copy the grid and its dependencies script and style files into the resources/scripts and resources/styles folder.
Refer the following code to find the location of the grid script and style files.
Syntax:
Script: **(installed location)**/Syncfusion/Essential Studio/{RELEASE_VERSION}/Essential JS 2/{PACKAGE_NAME}/dist/global/{PACKAGE_NAME}.min.js
Styles: **(installed location)**/Syncfusion/Essential Studio/{RELEASE_VERSION}/Essential JS 2/{PACKAGE_NAME}/styles/material.css
Example:
Script: C:/Program Files (x86)/Syncfusion/Essential Studio/18.1.43/Essential JS 2/ej2-grids/dist/global/ej2-grids.min.js Styles: C:/Program Files (x86)/Syncfusion/Essential Studio/18.1.43/Essential JS 2/ej2-grids/styles/material.css
After copying the files, you can refer the grid scripts and styles into the index.html file. The following html code example shows the minimal dependency of grid.
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Essential JS 2 Grid</title> <!-- Essential JS 2 Grid's dependent material theme --> <link href="resources/base/styles/material.css" rel="stylesheet" type="text/css"/> <link href="resources/popups/styles/material.css" rel="stylesheet" type="text/css"/> <!-- Essential JS 2 material theme --> <link href="resources/grids/styles/material.css" rel="stylesheet" type="text/css"/> <!-- Essential JS 2 Grid's dependent scripts --> <script src="resources/scripts/ej2-base.min.js" type="text/javascript"></script> <script src="resources/scripts/ej2-data.min.js" type="text/javascript"></script> <script src="resources/scripts/ej2-popups.min.js" type="text/javascript"></script> <!-- Essential JS 2 Grid's global script --> <script src="resources/scripts/ej2-grids.min.js" type="text/javascript"></script> </head> <body> </body> </html>
Using CDN link for script and style
Using CDN link, you can directly refer the grid dependencies script and style into the index.html.
Refer the grid CDN links as shown below.
Syntax:
Script: http://cdn.syncfusion.com/ej2/{PACKAGE_NAME}/dist/global/{PACKAGE_NAME}.min.js
Styles: http://cdn.syncfusion.com/ej2/{PACKAGE_NAME}/styles/material.css
Example:
Script: http://cdn.syncfusion.com/ej2/ej2-grids/dist/global/ej2-grids.min.js Styles: http://cdn.syncfusion.com/ej2/ej2-grids/styles/material.css
The following html code example shows the minimal dependency of the grid.
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Essential JS 2 Grid</title> <!-- Essential JS 2 Grid's dependent material theme --> <link href="http://cdn.syncfusion.com/ej2/ej2-base/styles/material.css" rel="stylesheet" type="text/css"/> <link href="http://cdn.syncfusion.com/ej2/ej2-popups/styles/material.css" rel="stylesheet" type="text/css"/> <!-- Essential JS 2 material theme --> <link href="http://cdn.syncfusion.com/ej2/ej2-grids/styles/material.css" rel="stylesheet" type="text/css"/> <!-- Essential JS 2 Grid's dependent script --> <script src="http://cdn.syncfusion.com/ej2/ej2-base/dist/global/ej2-base.min.js" type="text/javascript"></script> <script src="http://cdn.syncfusion.com/ej2/ej2-data/dist/global/ej2-data.min.js" type="text/javascript"></script> <script src="http://cdn.syncfusion.com/ej2/ej2-popups/dist/global/ej2-popups.min.js" type="text/javascript"></script> <!-- Essential JS 2 Grid's global script --> <script src="http://cdn.syncfusion.com/ej2/ej2-grids/dist/global/ej2-grids.min.js" type="text/javascript"></script> </head> <body> </body> </html>
Adding Grid component
Now, you can add the Grid component in your application by adding a div element for the Grid in index.html. Then refer the index.js file into the index.html.
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Essential JS 2 Grid</title> <!-- Essential JS 2 Grid's dependent material theme --> <link href="http://cdn.syncfusion.com/ej2/ej2-base/styles/material.css" rel="stylesheet" type="text/css"/> <link href="http://cdn.syncfusion.com/ej2/ej2-popups/styles/material.css" rel="stylesheet" type="text/css"/> <!-- Essential JS 2 material theme --> <link href="http://cdn.syncfusion.com/ej2/ej2-grids/styles/material.css" rel="stylesheet" type="text/css"/> <!-- Essential JS 2 Grid's dependent script --> <script src="http://cdn.syncfusion.com/ej2/ej2-base/dist/global/ej2-base.min.js" type="text/javascript"></script> <script src="http://cdn.syncfusion.com/ej2/ej2-data/dist/global/ej2-data.min.js" type="text/javascript"></script> <script src="http://cdn.syncfusion.com/ej2/ej2-popups/dist/global/ej2-popups.min.js" type="text/javascript"></script> <!-- Essential JS 2 Grid's global script --> <script src="http://cdn.syncfusion.com/ej2/ej2-grids/dist/global/ej2-grids.min.js" type="text/javascript"></script> <!-- Sample data-source for Grid --> <script src="https://ej2.syncfusion.com/javascript/demos/grid/default/datasource.js" type="text/javascript"></script> </head> <body> <!-- Add the HTML <div> element for grid --> <div id="Grid"></div> <script src="index.js" type="text/javascript"></script> </body> </html>
Place the following grid code in the index.js.
ej.grids.Grid.Inject(ej.grids.Page);
var grid = new ej.grids.Grid({
dataSource: window.orderData,
columns: [
{ field: 'OrderID', headerText: 'Order ID', textAlign: 'Right', width: 120 },
{ field: 'CustomerID', width: 140, headerText: 'Customer ID', type: 'string' },
{ field: 'Freight', headerText: 'Freight', textAlign: 'Right', width: 120 },
{ field: 'ShipCountry', headerText: 'Ship Country', textAlign: 'Right', width: 120 }
],
allowPaging: true
});
Run the application
Now, run the index.html in web browser, it will render the Essential JS 2 Grid control.
The output will appear as follows
Demo
https://www.syncfusion.com/downloads/support/directtrac/general/ze/myapp-369233497.zip
