Custom Data Binding in React Data Grid

The Syncfusion® React Data Grid component supports custom binding to manage data processing through an external custom API. Processed data is then bound to the grid component. This approach enables implementation of tailored data logic based on specific application requirements.

When using custom binding, the grid component expects the data to be returned as an object with two properties:

• result: Actual data to be displayed in the grid.
• count: Indicates the total number of records available in the dataset.

To utilize custom binding, configure Syncfusion® DataManager, which integrates seamlessly with the grid and facilitates custom data operations and binding.

Data Grid interactions such as paging, sorting, and filtering trigger the onDataRequest event. This event provides the current grid state along with details of the action performed, enabling precise control over data handling.

To handle this event:

1. Subscribe to onDataRequest within the component.

2. Access the event arguments to identify the action type and extract parameters like page index, sort order, and filters.

3. Use these parameters to fetch data from the external source and bind it to the grid.

The onDataRequest event does not trigger automatically during the initial rendering. It should be invoked within React.useEffect hook with an initial query, such as { skip: 0, take: 10 }.

Handling filtering operation

When a filtering operation is performed on the grid, the onDataRequest event is triggered. Within this event, the relevant arguments associated with the filter action can be accessed. To update the grid’s data state accordingly, use the following approach:

function buildFilterQuery(state: DataState): string {
if (state.where?.length) {
  return (
    '&$filter=' + state.where[0].predicates.map((filter) => filter.columns
          .map((col) => { const value = typeof col.value === 'string' ? "'" + col.value + "'" : col.value;
            if (col.operator === 'startsWith') {
              return ('startswith(tolower(' + col.field +'), ' + (typeof col.value === 'string' ? "'" + col.value.toLowerCase() + "'" : col.value) +')');
            } else if (col.operator === 'equal') {
              return col.field + ' eq ' + value;
            } else if (col.operator === 'contains') {
              return ( 'contains(tolower(' + col.field + '), ' + (typeof col.value === 'string' ? "'" + col.value.toLowerCase() + "'" : col.value) + ')');
            }
            return '';
          })
        .join(' and ')
      )
      .join(' and ')
    );
  }
  return '';
}

Handling paging operation

When a paging operation is performed on the grid, the onDataRequest event is triggered. Within this event, the relevant arguments associated with the paging action can be accessed. To update the grid’s data state accordingly, use the following approach:

function buildPageQuery(state: DataState): string {
    return `$skip=${state.skip}&$top=${state.take}`;
}

Handling sorting operation

When a sorting operation is performed on the grid, the onDataRequest event is triggered. Within this event, the relevant arguments associated with the sorting action can be accessed. To update the grid’s data state accordingly, use the following approach:

function buildSortQuery(state: DataState): string {
  if (state.sort?.length) {
    return (
      '&$orderby=' + state.sort
        .map((obj) => (obj.direction === SortDirection.Descending ? obj.field + ' desc' : obj.field))
        .reverse()
        .join(',')
    );
  }
  return '';
}

See also

• Grid Data Rendering Events