Syncfusion AI Assistant

How can I help you?

Data Binding in EJ2 TypeScript DataManager

15 Apr 202610 minutes to read

The Syncfusion® EJ2 TypeScript DataManager enables efficient data management in EJ2 TypeScript applications. It supports both RESTful JSON data services binding and local JavaScript object array binding, providing flexibility to handle and manipulate data.

Data binding is the process of connecting Syncfusion EJ2 TypeScript components with data sources, allowing the UI to reflect changes in the data automatically. DataManager simplifies this process by providing seamless integration with EJ2 TypeScript components, enabling efficient data binding without unnecessary code.

Local data binding

Local data binding allows to bind DataManager directly to an array of JavaScript objects stored within the application. This approach is simple and efficient for small datasets or static data that does not need to be fetched from a server.

DataManager initialization enables binding local data by assigning the array of JavaScript objects to the json property or passing them to the constructor during instantiation. Once initialized, the array of JavaScript objects becomes the datasource for DataManager, enabling seamless querying and data manipulation. Follow these steps to bind local data using Syncfusion® DataManager:

  1. Define a local array of objects.
  2. Initialize DataManager with the json property set to that array.
  3. Use the executeLocal method of DataManager to run queries and perform data operations directly on local datasets.

The following example demonstrates how to bind JSON data using the executeLocal method of DataManager.

import { DataManager, Query } from '@syncfusion/ej2-data';
import { compile } from '@syncfusion/ej2-base';
import {data} from './datasource.ts';

let template: string = '<tr><td>${OrderID}</td><td>${CustomerID}</td><td>${EmployeeID}</td></tr>';
let compiledFunction: Function = compile(template);

let result: Object[] = new DataManager(data).executeLocal(new Query().take(8));

let table: HTMLElement = (<HTMLElement>document.getElementById('datatable'));

result.forEach((data: Object) => {
    table.appendChild(compiledFunction(data)[0]);
});
<!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" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
    <style>
    .e-table {
      border: solid 1px #e0e0e0;
      border-collapse: collapse;
      font-family: Roboto;
    }

    .e-table td,
    .e-table th {
      border-style: solid;
      border-width: 1px 0 0;
      border-color: #e0e0e0;
      display: table-cell;
      font-size: 14px;
      line-height: 20px;
      overflow: hidden;
      padding: 8px 21px;
      vertical-align: middle;
      white-space: nowrap;
      width: auto;
    }
  </style>
</head>

<body>
    <div id='loader'>Loading....</div>
    <div id='container'>
        <table id='datatable' class='e-table'>
            <thead>
                <tr>
                    <th>Order ID</th>
                    <th>Customer ID</th>
                    <th>Employee ID</th>
                </tr>
            </thead>
            <tbody>
            </tbody>
        </table>
    </div>
</body>

</html>

Remote data binding

Remote data binding is particularly useful in scenarios where large datasets need to be fetched from a server, real-time data updates are required, or data needs to be accessed from an external API or database.

Follow these steps to bind remote data using Syncfusion® DataManager:

  1. Start by creating an instance of DataManager and assign the service endpoint URL to the url property.

  2. Use the executeQuery method to send a query to the server and fetch data in JSON format.

  3. After calling executeQuery, the DataManager waits for the server response, converts it into a JSON format, and returns the data to the UI.

The following example demonstrates how to bind JSON data using the executeQuery method of DataManager.

import { DataManager, ODataV4Adaptor, Query, ReturnOption } from '@syncfusion/ej2-data';
import { compile } from '@syncfusion/ej2-base';

let template: string = '<tr><td>${OrderID}</td><td>${CustomerID}</td><td>${EmployeeID}</td></tr>';

let compiledFunction: Function = compile(template);

const SERVICE_URL: string = 'https://services.odata.org/V4/Northwind/Northwind.svc/Orders/';

let table: HTMLElement = document.getElementById('datatable') as HTMLElement;

new DataManager({ url: SERVICE_URL, adaptor: new ODataV4Adaptor() }).executeQuery(new Query().take(8)).then((e: ReturnOption) => {
    (<Object[]>e.result).forEach((data: Object) => {
        table.appendChild(compiledFunction(data)[0]);
    });
});
<!DOCTYPE html>
<html lang="en">

<head>
    <title>EJ2 DataManger</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Typescript DataManger" />
    <meta name="author" content="Syncfusion" />
    <link href="index.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
    <style>
    .e-table {
      border: solid 1px #e0e0e0;
      border-collapse: collapse;
      font-family: Roboto;
    }

    .e-table td,
    .e-table th {
      border-style: solid;
      border-width: 1px 0 0;
      border-color: #e0e0e0;
      display: table-cell;
      font-size: 14px;
      line-height: 20px;
      overflow: hidden;
      padding: 8px 21px;
      vertical-align: middle;
      white-space: nowrap;
      width: auto;
    }
  </style>
</head>

<body>
    <div id='loader'>Loading....</div>
    <div id='container'>
        <table id='datatable' class='e-table'>
            <thead>
                <tr>
                    <th>Order ID</th>
                    <th>Customer ID</th>
                    <th>Employee ID</th>
                </tr>
            </thead>
            <tbody>
            </tbody>
        </table>
    </div>
</body>

</html>

  • The queried data will not be cached locally unless offline mode is enabled.
  • DataManager is directly bound to Syncfusion components such as the Grid through the dataSource property rather than using executeQuery. Refer to the Grid data‑binding documentation.

See Also