Data binding in EJ2 TypeScript Grid control

5 Jun 202421 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 TypeScript 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.

import { Grid, Page, Sort, Filter } from '@syncfusion/ej2-grids';
import { DataManager, UrlAdaptor } from '@syncfusion/ej2-data';
import { DropDownList, ChangeEventArgs } from '@syncfusion/ej2-dropdowns';

Grid.Inject(Page,Sort,Filter);

let data: DataManager = new DataManager({
  url: 'https://services.syncfusion.com/js/production/api/Orders',
  adaptor: new UrlAdaptor
});

let grid: Grid = new 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');

let dropdownData: object[] = [
  { id: 'Spinner', value: 'Spinner' },
  { id: 'Shimmer', value: 'Shimmer' }
];

let dropdownList: DropDownList = new DropDownList({
  index: 0,
  width: 120,
  fields: { text: 'value', value: 'id' },
  dataSource: dropdownData,
  change: valueChange,
});
dropdownList.appendTo('#dropdown');

function valueChange(args: ChangeEventArgs ) {
  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/26.2.4/ej2-base/styles/bootstrap5.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/26.2.4/ej2-buttons/styles/bootstrap5.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/26.2.4/ej2-popups/styles/bootstrap5.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/26.2.4/ej2-navigations/styles/bootstrap5.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/26.2.4/ej2-dropdowns/styles/bootstrap5.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/26.2.4/ej2-lists/styles/bootstrap5.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/26.2.4/ej2-inputs/styles/bootstrap5.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/26.2.4/ej2-calendars/styles/bootstrap5.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/26.2.4/ej2-splitbuttons/styles/bootstrap5.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/26.2.4/ej2-grids/styles/bootstrap5.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
    <div id='loader'>Loading....</div>
    <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>
</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 as Grid).setProperties({ dataSource:  (grid as Grid).dataSource as object[] });

The following example demonstrates adding a new record to the data source through an external button:

import { Grid } from '@syncfusion/ej2-grids';
import { Button } from '@syncfusion/ej2-buttons';
import { data } from './datasource.ts';

let grid: Grid = new 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');

let button: Button = new Button();
button.appendTo('#sample');

(document.getElementById('sample')as HTMLElement).addEventListener('click', function () {
  changeDatasource();
});

function changeDatasource() {
  for (let i = 0; i < 5; i++) {
      let newRecord = {
          OrderID: generateOrderId(),
          CustomerID: generateCustomerId(),
          ShipCity: generateShipCity(),
          Freight: generateFreight(),
          ShipName: generateShipName()
      };
      grid.dataSource.unshift(newRecord);
      grid.setProperties({dataSource: grid.dataSource as object[] });
}

// Generate a random OrderID
function generateOrderId(): number {
  return Math.floor(10000 + Math.random() * 90000);
}

// Generate a random CustomerID
function generateCustomerId(): string {
  let characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
  let result = '';
  for (let i = 0; i < 5; i++) {
      result += characters.charAt(Math.floor(Math.random() * characters.length));
  }
  return result;
}

// Generate a random ShipCity
function generateShipCity(): string  {
  let cities = ['London', 'Paris', 'New York', 'Tokyo', 'Berlin'];
  return cities[Math.floor(Math.random() * cities.length)];
}

// Generate a random Freight value
function generateFreight(): number {
  return Math.random() * 100;
}

// Generate a random ShipName
function generateShipName(): string {
  let 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/26.2.4/ej2-base/styles/bootstrap5.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/26.2.4/ej2-buttons/styles/bootstrap5.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/26.2.4/ej2-popups/styles/bootstrap5.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/26.2.4/ej2-navigations/styles/bootstrap5.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/26.2.4/ej2-dropdowns/styles/bootstrap5.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/26.2.4/ej2-lists/styles/bootstrap5.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/26.2.4/ej2-inputs/styles/bootstrap5.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/26.2.4/ej2-calendars/styles/bootstrap5.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/26.2.4/ej2-splitbuttons/styles/bootstrap5.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/26.2.4/ej2-grids/styles/bootstrap5.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
    <div id='loader'>Loading....</div>
    <div id='container'>
        <button id="sample">Refresh Datasource</button>
        <div style="padding: 10px 10px" id='Grid'></div>        
    </div>
</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);
import { Grid, Page } from '@syncfusion/ej2-grids';
import { Button } from '@syncfusion/ej2-buttons';
import { data } from './datasource.ts';

Grid.Inject(Page);

let count = 0;
let grid: Grid = new 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 }
  ],
});
grid.appendTo('#Grid');

let newColumn: object[] = [
  { 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'},
];

let button: Button = new Button();
button.appendTo('#changebutton');

(document.getElementById('changebutton')as HTMLElement).addEventListener('click', function () {
  count = count + 100;
  grid.changeDataSource(data.slice(0, count + 100), newColumn as Object[]);
});
<!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/26.2.4/ej2-base/styles/bootstrap5.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/26.2.4/ej2-buttons/styles/bootstrap5.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/26.2.4/ej2-popups/styles/bootstrap5.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/26.2.4/ej2-navigations/styles/bootstrap5.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/26.2.4/ej2-dropdowns/styles/bootstrap5.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/26.2.4/ej2-lists/styles/bootstrap5.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/26.2.4/ej2-inputs/styles/bootstrap5.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/26.2.4/ej2-calendars/styles/bootstrap5.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/26.2.4/ej2-splitbuttons/styles/bootstrap5.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/26.2.4/ej2-grids/styles/bootstrap5.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
    <div id='loader'>Loading....</div>
    <div id='container'>
        <button id="changebutton">Change datasource and column</button>
        <div style="padding: 10px 10px" id='Grid'></div>        
    </div>
</body>
</html>

  • The Grid state persistence feature does not support the  changeDataSource method.
  • In this document, the above sample uses the local data for changeDataSource method. For those using a remote data source, refer to the FlexibleData resource.

See Also