Remote Data Binding in EJ2 TypeScript Data Grid

08 Sep 20265 minutes to read

Remote data binding enables the Data Grid to connect directly to external data services or databases through the dataSource property. This approach supports on-demand, server-side operations such as paging, sorting, filtering, and CRUD, making it ideal for efficiently handling large datasets.

For proper functionality, the server response must include two key properties:

  • result: the records to display in the current viewport.
  • count: the total number of records in the dataset for pagination.

Bind remote data using DataManager

The Data Grid uses the DataManager library to connect to external data services and databases, such as REST APIs, Web APIs, OData services, and GraphQL endpoints. DataManager provides a unified interface for communication between the Grid and different backend services.

The DataManager relies on adaptors to establish the connection between the data service and the grid. Adaptors define how requests are generated and how responses are processed, ensuring that operations such as paging, sorting, filtering, grouping, and searching follow a consistent pattern.

Adaptors also provide native query support, automatically formatting requests in the expected structure. For example, the ODataAdaptor generates queries in OData format, while the GraphQLAdaptor builds queries according to GraphQL schema definitions. Server responses are then mapped into the grid’s required format (result and count), ensuring predictable integration across different backend services.

Integration type Description Learn more
GraphQL Connects to GraphQL endpoints for flexible data querying. GraphQLAdaptor
OData V4 Services Connects to OData V4 services with built-in query support. ODataV4Adaptor
Hybrid Data Binding Performs data operations locally while saving CRUD changes to the server. RemoteSaveAdaptor
REST APIs Connects to REST-based services with custom endpoints and response formats. UrlAdaptor
REST APIs Using Web Methods Connects to ASP.NET WebMethod-based services. WebMethodAdaptor
Web API Services Connects to ASP.NET Web APIs and supports server-side data operations. WebApiAdaptor
Custom Remote Data Integrates with custom remote data services and business-specific APIs. CustomAdaptor
Microsoft SQL Server Connects to Microsoft SQL Server databases using ADO.NET and Entity Framework. SQL Server
MySQL Server Provides cross-platform data access for MySQL databases. MySQL Server
PostgreSQL Delivers advanced relational capabilities with PostgreSQL databases. PostgreSQL
SQLite Supports embedded and local storage scenarios with SQLite databases. SQLite

The following code example demonstrates connecting the Data Grid to a REST API using UrlAdaptor. For other service types, replace UrlAdaptor with the appropriate adaptor (e.g., WebApiAdaptor, ODataV4Adaptor, WebMethodAdaptor, RemoteSaveAdaptor, or GraphQLAdaptor).

import { DataManager, UrlAdaptor } from '@syncfusion/ej2-data';

const data = new DataManager({
    url: 'https://services.syncfusion.com/js/production/api/UrlDataSource', // Replace with your actual API endpoint URL
    adaptor: new UrlAdaptor()
});

Custom Binding

The Data Grid supports custom remote binding, which provides complete control over remote data integration when built-in adaptors do not meet specific application requirements. It enables direct control over how requests are sent to the backend and how responses are processed, making it suitable for unique APIs or specialized workflows.

The dataStateChange event is used to capture Data Grid actions such as paging, sorting, and filtering. Within this event, the application can construct the required queries, send them to the backend, and return the response in the expected format (result and count).

The Data Grid provides two key events for handling remote data operations.

The dataStateChange event is used to capture Data Grid actions such as paging, sorting, and filtering. Within this event, the application can construct the required queries, send them to the backend, and return the response in the expected format (result and count).

The dataSourceChange event is used to handle CRUD operations (Create, Read, Update, and Delete). This event allows the application to process changes made in the grid and synchronize them with the backend service. Refer to the Custom Binding documentation.

let dataStateChange = (state: DataStateChangeEventArgs): void => {
// Fetch data from the service based on the current grid state (page, sort, filter)
fetchData(state).then((result) => {
data = {
result: result.data,
count: result.total
};
});
};

let gridOptions = {
dataSource: data,
allowPaging: true,
dataStateChange
};