Data binding in EJ2 JavaScript Grid control
7 May 202524 minutes to read
Data binding is a fundamental technique that empowers the Grid control to integrate data into its interface, enabling the creation of dynamic and interactive grid views. This feature is particularly valuable when working with large datasets or when data needs to be fetched remotely.
The Syncfusion® Grid utilizes the DataManager, which supports both local binding with JavaScript object arrays and remote binding with RESTful JSON data services. The key property, dataSource, can be assigned to a DataManager instance or a collection of JavaScript object arrays.
It supports two kinds of data binding methods:
- Local data
- Remote data
Loading indicator
The Syncfusion® EJ2 JavaScript Grid offers a loading animation feature, which makes it easy to identify when data is being loaded or refreshed. This feature provides a clear understanding of the grid’s current state and actions, such as sorting, filtering, grouping, and more.
To achieve this, you can utilize the loadingIndicator.indicatorType property of the grid, which supports two types of indicators:
- Spinner (default indicator)
- Shimmer
The following example demonstrates how to set the loadingIndicator.indicatorType property based on changing the dropdown value using the change event of the DropDownList control. The refreshColumns method is used to apply the changes and display the updated loading indicator type.
var data = new ej.data.DataManager({
url: 'https://services.syncfusion.com/js/production/api/Orders',
adaptor: new ej.data.UrlAdaptor
});
var grid = new ej.grids.Grid({
dataSource: data,
allowPaging: true,
allowSorting: true,
allowFiltering: true,
pageSettings: { pageCount: 3 },
loadingIndicator: { indicatorType: 'Spinner' },
columns: [
{ field: 'EmployeeID', headerText: 'Employee ID', width: 130, textAlign: 'Right' },
{ field: 'Employees', headerText: 'Employee Name', width: 145 },
{ field: 'Designation', headerText: 'Designation', width: 130 },
{ field: 'CurrentSalary', headerText: 'Current Salary', format:'C2', width: 140, textAlign: 'Right' },
],
height: 315
});
grid.appendTo('#Grid');
var dropdownData = [
{ id: 'Spinner', value: 'Spinner' },
{ id: 'Shimmer', value: 'Shimmer' }
];
var dropdownList = new ej.dropdowns.DropDownList({
index: 0,
width: 120,
fields: { text: 'value', value: 'id' },
dataSource: dropdownData,
change: valueChange,
});
dropdownList.appendTo('#dropdown');
function valueChange() {
if (dropdownList.value === 'Shimmer') {
grid.loadingIndicator.indicatorType = 'Shimmer';
grid.refreshColumns();
} else {
grid.loadingIndicator.indicatorType = 'Spinner';
grid.refreshColumns();
}
}<!DOCTYPE html><html lang="en">
<head>
<title>EJ2 Grid</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Typescript Grid Control">
<meta name="author" content="Syncfusion">
<link href="index.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/29.2.4/ej2-base/styles/bootstrap5.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/29.2.4/ej2-buttons/styles/bootstrap5.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/29.2.4/ej2-popups/styles/bootstrap5.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/29.2.4/ej2-navigations/styles/bootstrap5.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/29.2.4/ej2-dropdowns/styles/bootstrap5.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/29.2.4/ej2-lists/styles/bootstrap5.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/29.2.4/ej2-inputs/styles/bootstrap5.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/29.2.4/ej2-calendars/styles/bootstrap5.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/29.2.4/ej2-splitbuttons/styles/bootstrap5.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/29.2.4/ej2-grids/styles/bootstrap5.css" rel="stylesheet">
<script src="https://cdn.syncfusion.com/ej2/29.2.4/dist/ej2.min.js" type="text/javascript"></script>
<script src="es5-datasource.js" type="text/javascript"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
<div id="container">
<label style="padding: 10px 10px 26px 0" > Change the loading indicator type:</label>
<input type="text" id="dropdown" />
<div style="padding: 10px 10px" id="Grid"></div>
</div>
<script>
var ele = document.getElementById('container');
if(ele) {
ele.style.visibility = "visible";
}
</script>
<script src="index.js" type="text/javascript"></script>
</body></html>Refresh the datasource using property
Refreshing the data source in a Syncfusion® Grid involves updating the data that the grid displays dynamically. This operation is Essential® when you need to reflect changes in the underlying data without reloading the entire page or control.
To achieve this, you can make use of the datasource property in conjunction with the setProperties method. This ensures that the grid reflects the changes in the data source without requiring a complete page or control reload.
For example, if you add or delete data source records, follow these steps:
Step 1: Add/delete the datasource record by using the following code.
grid.dataSource.unshift(data); // Add a new record.
grid.dataSource.splice(selectedRow, 1); // Delete a record.Step 2: Refresh the datasource after changes by invoking the setProperties method.
grid.setProperties({dataSource: grid.dataSource});The following example demonstrates adding a new record to the data source through an external button:
var grid = new ej.grids.Grid({
dataSource: data,
columns: [
{ field: 'OrderID', headerText: 'OrderID', textAlign: 'Right', width: 90 },
{ field: 'CustomerID', headerText: 'Customer ID', width: 120 },
{ field: 'Freight', headerText: 'Freight', textAlign: 'Right', format:'C2', width: 90 },
{ field: 'ShipCity', headerText: 'Ship City', width: 120 },
],
height: 280
});
grid.appendTo('#Grid');
var button = new ej.buttons.Button();
button.appendTo('#sample');
document.getElementById('sample').addEventListener('click', function () {
changeDatasource();
});
function changeDatasource() {
for (var i = 0; i < 5; i++) {
var newRecord = {
OrderID: generateOrderId(),
CustomerID: generateCustomerId(),
ShipCity: generateShipCity(),
Freight: generateFreight(),
ShipName: generateShipName()
};
grid.dataSource.unshift(newRecord);
grid.setProperties({dataSource: grid.dataSource});
}
}
// Generate a random OrderID
function generateOrderId() {
return Math.floor(10000 + Math.random() * 90000);
}
// Generate a random CustomerID
function generateCustomerId() {
var characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
var result = '';
for (var i = 0; i < 5; i++) {
result += characters.charAt(Math.floor(Math.random() * characters.length));
}
return result;
}
// Generate a random ShipCity
function generateShipCity() {
var cities = ['London', 'Paris', 'New York', 'Tokyo', 'Berlin'];
return cities[Math.floor(Math.random() * cities.length)];
}
// Generate a random Freight value
function generateFreight() {
return Math.random() * 100;
}
// Generate a random ShipName
function generateShipName() {
var names = ['Que Delícia', 'Bueno Foods', 'Island Trading', 'Laughing Bacchus Winecellars'];
return names[Math.floor(Math.random() * names.length)];
}<!DOCTYPE html><html lang="en">
<head>
<title>EJ2 Grid</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Typescript Grid Control">
<meta name="author" content="Syncfusion">
<link href="index.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/29.2.4/ej2-base/styles/bootstrap5.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/29.2.4/ej2-buttons/styles/bootstrap5.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/29.2.4/ej2-popups/styles/bootstrap5.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/29.2.4/ej2-navigations/styles/bootstrap5.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/29.2.4/ej2-dropdowns/styles/bootstrap5.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/29.2.4/ej2-lists/styles/bootstrap5.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/29.2.4/ej2-inputs/styles/bootstrap5.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/29.2.4/ej2-calendars/styles/bootstrap5.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/29.2.4/ej2-splitbuttons/styles/bootstrap5.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/29.2.4/ej2-grids/styles/bootstrap5.css" rel="stylesheet">
<script src="https://cdn.syncfusion.com/ej2/29.2.4/dist/ej2.min.js" type="text/javascript"></script>
<script src="es5-datasource.js" type="text/javascript"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
<div id="container">
<button id="sample">Refresh Datasource</button>
<div style="padding: 10px 10px" id="Grid"></div>
</div>
<script>
var ele = document.getElementById('container');
if(ele) {
ele.style.visibility = "visible";
}
</script>
<script src="index.js" type="text/javascript"></script>
</body></html>Dynamically change the datasource or columns or both
The Grid control in Syncfusion® allows dynamic modification of the data source, columns, or both . This feature is particularly valuable when you need to refresh the grid’s content and structure without requiring a complete page reload.
To achieve dynamic changes, you can utilize the changeDataSource method. This method enables you to update the data source, columns, or both, based on your application’s requirements. However, it is important to note that during the changing process for the data source and columns, the grid’s existing actions such as sorting, filtering, grouping, aggregation, and searching will be reset. The changeDataSource method has two optional arguments: the first argument represents the data source, and the second argument represents the columns. The various uses of the changeDataSource method are explained in the following topic.
1. Change both data source and columns:
To modify both the existing columns and the data source, you need to pass the both arguments to the changeDataSource method. The following example demonstrates how to change both the data source and columns.
You can assign a JavaScript object array to the dataSource property to bind local data to the grid. The code below provides an example of how to create a data source for the grid.
export let data: Object[] = [
{
OrderID: 10248, CustomerID: 'VINET', Freight: 32.38,
ShipCity: 'Reims'
},
{
OrderID: 10249, CustomerID: 'TOMSP', Freight: 11.61,
ShipCity: 'Münster'
},
{
OrderID: 10250, CustomerID: 'HANAR', Freight: 61.34,
ShipCity: 'Rio de Janeiro'
}];The following code demonstrates how to create the columns for the grid, which are based on the provided grid data source.
public newColumn: ColumnModel[] = [
{ field: 'OrderID', headerText: 'Order ID', textAlign: 'Right', width: 125 },
{ field: 'CustomerID', headerText: 'Customer ID', width: 125 },
];The following code demonstrates updating the data source and columns defined above using the changeDataSource method.
gridInstance.changeDataSource(data, newColumn);2. Modify only the existing columns:
To modify the existing columns in a grid, you can either add or remove columns or change the entire set of columns using the changeDataSource method. To use this method, you should set the first parameter to null and provide the new columns as the second parameter. However, please note that if a column field is not specified in the data source, its corresponding column values will be empty. The following example illustrates how to modify existing columns.
The following code demonstrates how to add new columns with existing grid columns (‘newColumn’) by using changeDataSource method.
public newColumn1: ColumnModel[] = [
{ field: 'Freight', headerText: 'Freight', textAlign: 'Right', width: 125 },
{ field: 'ShipCity', headerText: 'ShipCity', width: 125 },
];
let column: any = newColumn.push(newColumn1);
gridInstance.changeDataSource(null, column);3. Modify only the data source:
You can change the entire data source in the grid using the changeDataSource method. To use this method, you should provide the data source as the first argument, and the second argument which is optional can be used to specify new columns for the grid. If you are not specifying the columns, the grid will generate the columns automatically based on the data source. The following example demonstrates how to modify the data source.
You can assign a JavaScript object array to the dataSource property to bind local data to the grid. The code below provides an example of how to create a new data source for the grid.
export let employeeData: Object[] = [
{
FirstName: 'Nancy', City: 'Seattle', Region: 'WA',
Country: 'USA'
},
{
FirstName: 'Andrew', City: 'London', Region: null,
Country: 'UK',
},
{
FirstName: 'Janet', City: 'Kirkland', Region: 'WA',
Country: 'USA'
}];The following code demonstrates, how to use the changeDataSource method to bind the new employeeData to the grid.
gridInstance.changeDataSource(employeeData);var count = 0;
var grid = new ej.grids.Grid({
dataSource: data,
allowPaging: true,
pageSettings: { pageSize: 5, pageCount: 3 },
columns: [
{ field: 'OrderID', headerText: 'OrderID', textAlign: 'Right', width: 120 },
{ field: 'CustomerID', headerText: 'Customer ID', textAlign: 'Right', width: 120 },
{ field: 'Freight', headerText: 'Freight', textAlign: 'Right', width: 120 }
],
height: 280
});
grid.appendTo('#Grid');
var newColumn = [
{ field: 'OrderID', headerText: 'Order ID', textAlign: 'Right', width: 125 },
{ field: 'CustomerName', headerText: 'Customer Name', width: 125 },
{ field: 'OrderDate', headerText: 'Order Date', width: 130, format: 'yMd', textAlign: 'Right'},
{ field: 'Freight', headerText: 'Freight', width: 120, textAlign: 'Right'},
];
var button = new ej.buttons.Button();
button.appendTo('#changebutton');
document.getElementById('changebutton').addEventListener('click', function () {
count = count + 100;
grid.changeDataSource(data.slice(0, count + 100), newColumn);
});<!DOCTYPE html><html lang="en">
<head>
<title>EJ2 Grid</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Typescript Grid Control">
<meta name="author" content="Syncfusion">
<link href="index.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/29.2.4/ej2-base/styles/bootstrap5.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/29.2.4/ej2-buttons/styles/bootstrap5.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/29.2.4/ej2-popups/styles/bootstrap5.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/29.2.4/ej2-navigations/styles/bootstrap5.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/29.2.4/ej2-dropdowns/styles/bootstrap5.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/29.2.4/ej2-lists/styles/bootstrap5.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/29.2.4/ej2-inputs/styles/bootstrap5.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/29.2.4/ej2-calendars/styles/bootstrap5.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/29.2.4/ej2-splitbuttons/styles/bootstrap5.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/29.2.4/ej2-grids/styles/bootstrap5.css" rel="stylesheet">
<script src="https://cdn.syncfusion.com/ej2/29.2.4/dist/ej2.min.js" type="text/javascript"></script>
<script src="es5-datasource.js" type="text/javascript"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
<div id="container">
<button id="changebutton">Change datasource and column</button>
<div style="padding: 10px 10px" id="Grid"></div>
</div>
<script>
var ele = document.getElementById('container');
if(ele) {
ele.style.visibility = "visible";
}
</script>
<script src="index.js" type="text/javascript"></script>
</body></html>
- The Grid state persistence feature does not support the
changeDataSourcemethod.- In this document, the above sample uses the local data for
changeDataSourcemethod. For those using a remote data source, refer to the FlexibleData resource.
Prevent to convert local time zone format for date column
By default, Syncfusion® EJ2 JavaScript Grid automatically converts date values to the local time zone of the client system. However, in some scenarios, you may need to display the original date as received from the server without any timezone conversion.
To prevent timezone conversion for a date column, use the serverTimezoneOffset property from DataUtil. Setting this property to 0 ensures that dates remain in the original format received from the server without conversion to the local timezone.
The following example demonstrates how to prevent local time zone conversion for date columns in Syncfusion® EJ2 JavaScript Grid by using the DataUtil.serverTimezoneOffset property:
var hostUrl = 'https://services.syncfusion.com/js/production/api/orders';
var selectedTimezone = -12;
var timeZones = [
{ value: -12, text: "-12:00 UTC" }, { value: -11, text: "-11:00 UTC" },
{ value: -10, text: "-10:00 UTC" }, { value: -9, text: "-09:00 UTC" },
{ value: -8, text: "-08:00 UTC" }, { value: -7, text: "-07:00 UTC" },
{ value: -6, text: "-06:00 UTC" }, { value: -5, text: "-05:00 UTC" },
{ value: -4, text: "-04:00 UTC" }, { value: -3, text: "-03:00 UTC" },
{ value: -2, text: "-02:00 UTC" }, { value: -1, text: "-01:00 UTC" },
{ value: 0, text: "+00:00 UTC" }, { value: 1, text: "+01:00 UTC" },
{ value: 2, text: "+02:00 UTC" }, { value: 3, text: "+03:00 UTC" },
{ value: 4, text: "+04:00 UTC" }, { value: 5, text: "+05:00 UTC" },
{ value: 5.5, text: "+05:30 UTC" }, { value: 6, text: "+06:00 UTC" },
{ value: 7, text: "+07:00 UTC" }, { value: 8, text: "+08:00 UTC" },
{ value: 9, text: "+09:00 UTC" }, { value: 10, text: "+10:00 UTC" },
{ value: 11, text: "+11:00 UTC" }, { value: 12, text: "+12:00 UTC" },
{ value: 13, text: "+13:00 UTC" }, { value: 14, text: "+14:00 UTC" }
];
var dropdown = new ej.dropdowns.DropDownList({
dataSource: timeZones,
fields: { text: 'text', value: 'value' },
index: 0,
width: 150,
change: onTimezoneChange
});
dropdown.appendTo('#timezone');
dropdown.value = selectedTimezone;
var checkbox = new ej.buttons.CheckBox({
label: "Prevent Timezone Conversion",
change: onCheckboxChange
});
checkbox.appendTo('#timezoneCheckbox');
function onTimezoneChange(event) {
selectedTimezone = Number(event.value);
ej.data.DataUtil.serverTimezoneOffset = checkbox.checked ? 0 : selectedTimezone
grid.setProperties({
dataSource: new ej.data.DataManager({
url: hostUrl,
adaptor: new ej.data.WebApiAdaptor(),
crossDomain: true
})
});
grid.refresh();
}
function onCheckboxChange(event) {
ej.data.DataUtil.serverTimezoneOffset = checkbox.checked ? 0 : selectedTimezone;
grid.setProperties({
dataSource: new ej.data.DataManager({
url: hostUrl,
adaptor: new ej.data.WebApiAdaptor(),
crossDomain: true
})
});
grid.refresh();
}
var grid = new ej.grids.Grid({
dataSource: new ej.data.DataManager({
url: hostUrl,
adaptor: new ej.data.WebApiAdaptor(),
crossDomain: true
}),
height: 315,
load: function () {
ej.data.DataUtil.serverTimezoneOffset = checkbox.checked ? 0 : selectedTimezone;
},
columns: [
{ field: 'OrderID', headerText: 'Order ID', textAlign: 'Right', width: 120 },
{ field: 'CustomerID', headerText: 'Customer ID', width: 140 },
{ field: 'Freight', headerText: 'Freight', textAlign: 'Right', format: 'C', width: 120 },
{ field: 'OrderDate', headerText: 'Order Date', textAlign: 'Right', width: 140 }
]
});
grid.appendTo('#Grid');<!DOCTYPE html><html lang="en"><head>
<title>EJ2 Grid</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Typescript Grid Control">
<meta name="author" content="Syncfusion">
<link href="index.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/29.2.4/ej2-base/styles/bootstrap5.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/29.2.4/ej2-grids/styles/bootstrap5.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/29.2.4/ej2-buttons/styles/bootstrap5.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/29.2.4/ej2-popups/styles/bootstrap5.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/29.2.4/ej2-navigations/styles/bootstrap5.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/29.2.4/ej2-dropdowns/styles/bootstrap5.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/29.2.4/ej2-lists/styles/bootstrap5.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/29.2.4/ej2-inputs/styles/bootstrap5.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/29.2.4/ej2-calendars/styles/bootstrap5.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/29.2.4/ej2-splitbuttons/styles/bootstrap5.css" rel="stylesheet">
<script src="https://cdn.syncfusion.com/ej2/29.2.4/dist/ej2.min.js" type="text/javascript"></script>
<script src="es5-datasource.js" type="text/javascript"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
<div id="container">
<div style="display: flex; align-items: center; margin-bottom: 10px;">
<label for="timezone">Select Timezone:</label>
<input type="text" id="timezone" />
</div>
<div style="margin-bottom: 20px;">
<input type="checkbox" id="timezoneCheckbox" /></div>
<div id="Grid"></div></div>
</div>
<script>
var ele = document.getElementById('container');
if(ele) {
ele.style.visibility = "visible";
}
</script>
<script src="index.js" type="text/javascript"></script>
</body></html>How to set custom headers using a custom adaptor in Syncfusion EJ2 JavaScript Grid
Custom headers in HTTP requests are used to send additional information such as authentication tokens, API keys, or metadata required by the server. These headers improve security and enable better control over data communication. In the Syncfusion EJ2 JavaScript Grid, custom headers can be added when making API requests, ensuring that each request carries the necessary information for server-side validation and processing.
This method is particularly useful when integrating the Grid with authenticated APIs, where requests must include authorization tokens or other security credentials to ensure secure access.
To achieve this, the WebApiAdaptor can be extended to create the custom adaptor. The beforeSend method in the custom adaptor allows modifying request headers before sending them to the server. This ensures that every request from the Grid includes the required headers.
The following example demonstrates how to set custom headers using the custom adaptor in Syncfusion EJ2 JavaScript Grid.
class CustomAdaptor extends ej.data.WebApiAdaptor {
beforeSend(args, xhr, settings) {
xhr.withCredentials = true;
super.beforeSend(args, xhr, settings);
xhr.headers.set('Syncfusion', true); // Assign custom headers here.
}
}
var data = new ej.data.DataManager({
url: 'https://services.syncfusion.com/js/production/api/Orders',
adaptor: new CustomAdaptor(),
});
var grid = new ej.grids.Grid({
dataSource: data,
allowPaging:true,
columns: [
{ field: 'OrderID', headerText: 'Order ID', textAlign: 'Right', width: 120 },
{ field: 'CustomerID', width: 140, headerText: 'Customer ID', type: 'string' },
{ field: 'EmployeeID', headerText: 'Employee ID', textAlign: 'Right', width: 120 },
{ field: 'Freight', headerText: 'Freight', textAlign: 'Right', width: 120, format: 'C2' },
{ field: 'ShipCountry', headerText: 'ShipCountry', width: 140, format: 'yMd' }
]
});
grid.appendTo('#Grid');<!DOCTYPE html><html lang="en"><head>
<title>EJ2 Grid</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Typescript Grid Control">
<meta name="author" content="Syncfusion">
<link href="index.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/29.2.4/ej2-base/styles/material.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/29.2.4/ej2-buttons/styles/material.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/29.2.4/ej2-popups/styles/material.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/29.2.4/ej2-navigations/styles/material.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/29.2.4/ej2-dropdowns/styles/material.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/29.2.4/ej2-lists/styles/material.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/29.2.4/ej2-inputs/styles/material.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/29.2.4/ej2-calendars/styles/material.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/29.2.4/ej2-splitbuttons/styles/material.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/29.2.4/ej2-grids/styles/material.css" rel="stylesheet">
<script src="https://cdn.syncfusion.com/ej2/29.2.4/dist/ej2.min.js" type="text/javascript"></script>
<script src="es5-datasource.js" type="text/javascript"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
<div id="container">
<div id="Grid"></div>
</div>
<script>
var ele = document.getElementById('container');
if(ele) {
ele.style.visibility = "visible";
}
</script>
<script src="index.js" type="text/javascript"></script>
</body></html>