Data Connection & Binding in EJ2 TypeScript DataManager

5 Jun 202524 minutes to read

This section explains how to establish data connections and perform data binding using the Syncfusion DataManager in EJ2 TypeScript applications.

Data Binding

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 UI elements with data sources, allowing the UI to reflect changes in the data automatically. The DataManager abstracts this process by managing CRUD operations, query building, and communication with local or remote data sources.

For example, consider an HR dashboard that displays a list of employees, including fields such as Name, Department, Role, and Status. Instead of writing custom code to fetch and manage data manually, the developer binds the Grid to a DataManager instance.

The DataManager handles all data operations efficiently, including:

  • Fetching records from a remote Web API,

  • Filtering employees by department or status,

  • Sorting by name or other fields,

  • Performing CRUD actions (Create, Read, Update, and Delete) seamlessly.

By leveraging DataManager, the application ensures cleaner code, better maintainability, and a consistent data-handling experience across components.

It supports two kinds of data binding methods:-

  1. Local data
  2. Remote data

Local data binding

Local data binding allows you to bind the Syncfusion EJ2 TypeScript DataManager directly to an array of JavaScript objects stored within the application. This method is particularly useful for small to medium-scale applications, static or preloaded datasets, scenarios where external API calls are unnecessary or undesired.

It provides a simple and efficient way to manage client-side data, enabling built-in data operations such as filtering, sorting, grouping, and paging without relying on a remote server.

For example, consider an employee directory for a small company where the employee data is fixed and stored locally within the application as an array of objects. Instead of making API calls each time sorting or filtering is needed, the local data can be bound to the DataManager to perform all operations instantly on the client side. This approach minimizes server load and enhances the application’s responsiveness.

To achieve this:

  • You can initialize the DataManager with a local data source by either:

    1. Assigning a JavaScript object array to the json property.
    2. Pass the array directly to the DataManager constructor during instantiation.

  • After binding the local data to the DataManager, you can query and manipulate the data using the built-in Query class in combination with the executeLocal method.

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>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</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 refers to connecting a UI component to data retrieved from an external source such as a REST API, web service, or cloud database. This technique is especially 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.

For example, consider an online store application where the product catalog is stored on a remote server. Since the product data is frequently updated and can be very large, fetching it directly from the server ensures the latest information is always displayed. Remote data binding allows the application to request only the needed data, such as filtered or paged results, reducing the amount of data transferred and improving performance.

Configure remote data binding with below steps:-

  • To bind remote data, you can use the DataManager by specifying the service endpoint URL in the url property. The DataManager handles all data interactions, including query serialization, server communication, and response parsing.

  • To retrieve data from the remote server, use the DataManager’s executeQuery method. This method converts the Query object into a server request and sends it to the specified endpoint. It then waits for the server response in JSON format and returns the resulting data.

The following example demonstrates bind remote data using the executeQuery method of DataManager.

import { DataManager, 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_URI: string = 'https://services.syncfusion.com/js/production/api/orders';

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

new DataManager({ url: SERVICE_URI }).executeQuery(new Query().take(8)).then((e: ReturnOption) => {
    const results = (e.result as { items: Order[] }).items;
    results.forEach((data: Object) => {
        table.appendChild(compiledFunction(data)[0]);
    });
});

interface Order {
    OrderID: number;
    CustomerID: string;
    EmployeeID: number;
  }
<!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>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</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.

Component Binding

The Syncfusion EJ2 TypeScript DataManager provides an abstraction for handling data binding across various UI components, including Grid, DropDownList, Charts, and HTML tables. It supports both local and remote data sources, enabling flexible integration with data services.

With built-in support for operations such as filtering, sorting, grouping, paging, and CRUD actions, the DataManager streamlines the process of managing data logic in modern web applications.

Using with Grid

The Syncfusion EJ2 TypeScript Grid provides flexible support for binding data from multiple sources. You can use either a local JavaScript object array or connect to remote services using the DataManager.

This section demonstrates how to bind data to the Grid using both local and remote sources.

For complete setup instructions, refer to the Grid Getting Started documentation.

Binding local data:

Binding local data allows you to directly associate a JavaScript object array with the Grid. This is useful when working with small to medium-sized datasets stored locally.

For example, consider an HR dashboard that displays a list of employees, including fields such as Name, Department, Role, and Status. Instead of writing custom code to fetch and manage data manually, the developer binds the Grid to a DataManager instance initialized with a local array of employee objects. This enables easy sorting by department or filtering by role directly within the grid UI without additional server calls.

To bind local data to the Grid, you can directly assign a JavaScript object array to the dataSource property. Alternatively, you can use an instance of the DataManager with a local data source.

Here’s an example demonstrating binding local data using the DataManager:

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

let grid: Grid = new Grid({
    dataSource: new DataManager(data),
    columns: [
        { field: 'OrderID', headerText: 'Order ID', textAlign: 'Right', width: 90, type: 'number' },
        { field: 'CustomerID', width: 120, headerText: 'Customer ID', type: 'string' },
        { field: 'Freight', headerText: 'Freight', textAlign: 'Right', width: 90, format: 'C' },
        { field: 'OrderDate', headerText: 'Order Date', width: 120, format: 'yMd' },
    ],
    height: 315
});

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-grids/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" />
    <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'>
        <div id='Grid'></div>
    </div>
</body>

</html>

Binding remote data:

Binding Remote Data allows you to connect the Grid to a remote data source, such as an API or service endpoint, to dynamically fetch and display large datasets from a server. This is useful when working with large datasets or when the data is hosted on a server.

For example, in an e-commerce admin panel, the product inventory data can be very large and frequently updated. Binding the Grid to a remote service via DataManager allows the admin panel to fetch only the required pages of product data on demand, with built-in support for paging and sorting, ensuring performance and scalability.

To bind remote data, you can configure the DataManager with the service endpoint URL and assign it to the Grid's dataSource property.

Here’s an example demonstrating binding remote data to the Grid using the DataManager:

import { Grid } from '@syncfusion/ej2-grids';
import { DataManager } from '@syncfusion/ej2-data';

const SERVICE_URI: string = 'https://services.syncfusion.com/js/production/api/Orders';

let grid: Grid = new Grid({
    dataSource: new DataManager({ url: SERVICE_URI }),
    columns: [
        { field: 'OrderID', headerText: 'Order ID', textAlign: 'Right', width: 90, type: 'number' },
        { field: 'CustomerID', width: 120, headerText: 'Customer ID', type: 'string' },
        { field: 'EmployeeID', headerText: 'Employee ID', textAlign: 'Right', width: 90 },
        { field: 'ShipCity', width: 120, headerText: 'Ship City', type: 'string' },
        { field: 'ShipCountry', width: 120, headerText: 'Ship Country', type: 'string' },
    ],
    height: 315
});

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-grids/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" />
    <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'>
        <div id='Grid'></div>
    </div>
</body>

</html>

Using with DropDownList

The Syncfusion EJ2 TypeScript DropDownList provides flexible support for binding data from various sources. You can bind local JavaScript object arrays or connect to remote services to populate the list items.

This section demonstrates how to bind data to the DropDownList using both local and remote sources.

For complete setup instructions, refer to the DropDownList Getting Started documentation.

Binding local data:

Binding local data allows you to directly associate a local dataset, such as a simple array or complex objects, with the DropDownList. This is useful when you have data available within your application and want to visualize it in the dropdown.

For example, a form in a corporate intranet site may have a “Department” dropdown populated with a static list of departments such as HR, Sales, IT, and Marketing. Since these options rarely change, binding the DropDownList to a local array improves performance and eliminates unnecessary network requests.

You can achieve this by making the DropDownList generate its list items from an array of complex data. To do this, map the appropriate fields using the fields property and assign the dataset to the dataSource property.

Additionally, the DropDownList supports binding an array of primitive data types such as strings or numbers.

Here’s an example demonstrating how to bind local data from an array of JSON objects using the DataManager:

import { DropDownList } from '@syncfusion/ej2-dropdowns';
import { DataManager } from '@syncfusion/ej2-data';

let localData: { [key: string]: Object }[] = [
    { Id: 'game1', Game: 'Badminton' },
    { Id: 'game2', Game: 'Football' },
    { Id: 'game3', Game: 'Tennis' }
];

let sportsData = new DataManager(localData);

let dropDownListObject: DropDownList = new DropDownList({
  // bind the sports data to dataSource property.
  dataSource: sportsData,
  fields: { text: 'Game', value: 'Id' },
  placeholder:"Select a game"
});

dropDownListObject.appendTo('#ddlelement');
<!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-grids/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" />
    <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'>
        <div id="container" style="margin:0 auto; width:250px;">
        <br>
        <input type="text" id="ddlelement">
    </div>
    </div>
</body>
</html>

Binding remote data:

Binding remote data allows you to fetch and display data dynamically from a remote server or web API. This is useful when working with large datasets or when the data is hosted externally.

For example, an e-commerce website’s product filter dropdown fetches available product categories from a remote server. As categories update frequently, the DropDownList, bound to a remote DataManager, ensures the filter list always reflects the latest categories without requiring app redeployment.

You can achieve this by retrieving data from remote services using the DataManager. The query property is used to fetch and filter data from the service, and the resulting data can be bound to the DropDownList using dataSource property .

Here’s an example demonstrating how to bind remote data to the DropDownList using the DataManager:

import { DropDownList } from '@syncfusion/ej2-dropdowns';
import { Query, DataManager, ODataV4Adaptor } from '@syncfusion/ej2-data';

let customers: DropDownList = new DropDownList({
    //bind the DataManager instance to dataSource property.
    dataSource: new DataManager({
        url: 'https://services.odata.org/V4/Northwind/Northwind.svc/',
        adaptor: new ODataV4Adaptor,
        crossDomain: true
    }),
    query: new Query().from('Customers').select(['ContactName', 'CustomerID']).take(6),
    fields: { text: 'ContactName', value: 'CustomerID' },
    placeholder:"Select a customer",
    sortOrder: 'Ascending'
});

customers.appendTo('#ddlelement');
<!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-grids/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" />
    <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'>
        <div id='container' style="margin:0 auto; width:250px;">
        <br>
        <input type="text" id='ddlelement' />
    </div>
    </div>
</body>
</html>

Using with Charts

The Syncfusion #Platform_Name## Charts provides powerful visualization capabilities that allow you to bind data from both local and remote sources.

This section demonstrates how to bind data to the Charts using both local and remote sources.

For complete setup instructions, refer to the Charts Getting Started documentation.

Binding local data:

Binding local data allows you to directly associate a local dataset (such as a simple JSON object or array) with the Chart. This is useful when you have data available locally within your application and want to visualize it in the chart.

For example, a small retail store manager’s dashboard displays daily sales data for the past week. Since the data is collected and stored locally on the device or in memory, the Chart binds directly to this local dataset to quickly visualize sales trends without needing server calls.

You can bind a simple JSON data to the Chart using the dataSource property in the series. Then, map the fields in the JSON data to the xName and yName properties to represent the Chart's x-axis and y-axis values.

Here’s an example demonstrating binding local data using the DataManager:

import { Chart, ColumnSeries, Category } from '@syncfusion/ej2-charts';
import { DataManager, Query } from '@syncfusion/ej2-data';

Chart.Inject(ColumnSeries, Category);
let localData: any[] = [
    { month: 'Jan', sales: 35 }, { month: 'Feb', sales: 28 },
    { month: 'Mar', sales: 34 }, { month: 'Apr', sales: 32 },
    { month: 'May', sales: 40 }, { month: 'Jun', sales: 32 },
    { month: 'Jul', sales: 35 }, { month: 'Aug', sales: 55 },
    { month: 'Sep', sales: 38 }, { month: 'Oct', sales: 30 },
    { month: 'Nov', sales: 25 }, { month: 'Dec', sales: 32 }
];

let chartData = new DataManager(localData);

new Chart({
    primaryXAxis: {
        valueType: 'Category'
    },
    series: [{
      dataSource: chartData,
      xName: 'month',
      yName: 'sales',
      type: 'Column'
    }]
}, '#element');
<!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-grids/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" />
    <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'>
        <div id='element'></div>
    </div>
    </div>
</body>
</html>

Binding remote data:

Binding remote data allows you to fetch and display data dynamically from a remote server or API. This is useful when working with large datasets or when data is continuously updated on the server.

For example, an online analytics dashboard shows live website traffic metrics. The Chart binds to a remote data source via DataManager, which continuously fetches real-time traffic data from a web API and updates the chart dynamically to reflect visitor trends.

You can bind remote data to the Chart using the DataManager. The DataManager requires minimal configuration, such as the web service URL, adaptor, and cross-domain settings, to interact with the service endpoint properly. You can then assign the instance of DataManager to the dataSource property in the series and map the fields of the data to the xName and yName properties. Additionally, you can use the query property to filter the data.

Here’s an example demonstrating how to bind remote data using the DataManager:

import { Chart, ColumnSeries, Category } from '@syncfusion/ej2-charts';
import { DataManager, Query } from '@syncfusion/ej2-data';

Chart.Inject(ColumnSeries, Category);

let dataManager: DataManager = new DataManager({
  url: 'https://services.syncfusion.com/js/production/api/orders'
});

let query: Query = new Query().take(5).where('Estimate', 'lessThan', 3, false);

new Chart({
    primaryXAxis: {
        valueType: 'Category'
    },
    primaryYAxis:
    {
        title: 'Freight rate in U.S. dollars'
    },
    series: [
        {
            type: 'Column',
            dataSource: dataManager,
            xName: 'CustomerID', yName: 'Freight', query: query
        }
    ],
    title: 'Container freight rate'
}, '#element');
<!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-grids/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" />
    <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'>
        <div id="element"></div>
    </div>
    </div>
</body>
</html>

Normal HTML table

Binding data to a normal HTML table can be done through both local and remote data sources. This allows for easy and dynamic population of table rows with data. This approach is particularly useful in scenarios such as dashboards, reports, or summary views, where the focus is on quickly rendering a set of records in a tabular format.

For example, consider you are building a simple order management dashboard that displays the latest orders to customer service agents. The dashboard needs to update frequently with new order data, either fetched from a local cache or a remote API, and display it quickly in a clean tabular format. Using a lightweight HTML table with DataManager helps efficiently manage and render this data dynamically.

To achieve this efficiently, you can use Syncfusion’s DataManager to manage and query data from either local or remote sources. Additionally, by leveraging the compile function from @syncfusion/ej2-base, you can dynamically generate HTML templates for each data row and render them into the table.

Here’s an example demonstrating binding local data to an HTML table using the 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>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</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>

See Also