Syncfusion React DataManager

• Bind local or remote data sources to UI components
• Query data (filter, sort, page, group, search)
• Perform CRUD operations (insert, update, delete, batch edits)
• Work with different data sources (JSON, OData, REST APIs, GraphQL, etc.)
• Cache data for performance
• Implement offline mode
• Add custom headers or authentication
• Transform request/response data
• Handle complex data scenarios in React applications

When to Use DataManager

• Flexible data management → Works with any data source (local, REST, OData, GraphQL)
• Complex queries → Filtering, sorting, paging, grouping, searching
• CRUD operations → With batch support and transaction patterns
• Middleware customization → Pre/post request hooks
• Offline support → Cache and sync when connection restored
• Adaptor switching → Change data sources without code changes

• You only need basic data binding without complex querying
• Performance is critical for very large datasets
• You don't need middleware customization

Key Concepts

Data Binding

Query Class

Adaptors

• JsonAdaptor → Local JavaScript arrays
• ODataAdaptor → OData v3 services
• ODataV4Adaptor → OData v4 services
• UrlAdaptor → Generic REST endpoints
• WebApiAdaptor → ASP.NET Web API
• RemoteSaveAdaptor → Hybrid client-side queries + server-side CRUD
• WebMethodAdaptor → Legacy ASP.NET ASMX services
• GraphQLAdaptor → GraphQL endpoints
• CustomAdaptor → Custom implementation for proprietary services

CRUD Operations

• insert() → Add records to data source
• update() → Modify existing records (keyField as first parameter)
• remove() → Delete records (keyField as first parameter)
• saveChanges() → Batch multiple operations into single request

Middleware & Customization

• applyPreRequestMiddlewares() → Modify request before sending (auth tokens, headers)
• applyPostRequestMiddlewares() → Transform response before binding (formatting, filtering)
• Custom adaptors for proprietary APIs
• Error handlers for request failures

Caching & Performance

• enableCache → Prevent re-requesting previously loaded pages
• Offline mode → Store data locally, sync when connection restored
• Load on demand → Lazy load data as user scrolls (virtual scrolling)
• Deferred operations → Promise-based async/await patterns

Documentation & Navigation Guide

Getting Started Setup

• Installation steps (npm)
• Project setup & imports
• Basic DataManager initialization
• First query execution
• Environment setup
• Common errors & fixes

Data Binding Strategies

• Local data binding with json property
• Remote data binding with url property
• executeLocal() for client-side queries
• executeQuery() for server requests
• Switching between data sources
• Response format handling
• When to use each approach

Query Operations & Filtering

• Query class fundamentals
• Filtering with where() and Predicate
• Sorting (ascending/descending)
• Pagination with take() and skip()
• Field projection with select()
• Related data loading with expand()
• Grouping data by field(s)
• Complex multi-condition queries
• Chaining query operations

CRUD Operations & Batch Edits

• insert() → Add new records
• update() → Modify existing records
• remove() → Delete records
• keyField in CRUD method parameters
• saveChanges() for batch operations
• Batch insert/update/remove
• Transaction patterns
• Data validation before operations
• Response handling

Choosing & Using Adaptors

• Which adaptor to use (decision tree)
• JsonAdaptor for local arrays
• OData adaptors (v3 & v4)
• REST API adaptors (Url, WebApi)
• RemoteSaveAdaptor hybrid approach
• Legacy ASMX (WebMethodAdaptor)
• GraphQL endpoint integration
• Custom adaptor implementation
• CORS & crossDomain configuration
• Platform-specific response handling

Middleware & Request Customization

• Pre-request middleware for auth tokens
• Custom header injection
• Request transformation
• Post-request middleware for response mapping
• Error handler functions
• Data validation & filtering in middleware
• Custom adaptor implementation
• Middleware execution order & timing

Caching & Offline Mode

• enableCache property for performance
• When cache clears (sort, filter, CRUD)
• Offline mode implementation
• Local storage persistence
• Sync strategies after reconnection
• Cache size & memory management
• Best practices & performance patterns

Advanced Features & Patterns

• Load on demand & pagination patterns
• Virtual scrolling setup
• Lazy loading data
• Deferred operations (Promise API)
• Async/await with DataManager
• State persistence across sessions
• Memory management
• Error handling strategies
• Performance optimization tips
• Common pitfalls & solutions

Quick Start Example

import React, { useEffect, useState } from 'react';
import { DataManager, WebApiAdaptor, Query } from '@syncfusion/ej2-data';

export default function DataManagerDemo() {
  const [items, setItems] = useState([]);

  useEffect(() => {
    // Create DataManager with remote data source
    const dataManager = new DataManager({
      url: 'url',
      adaptor: new WebApiAdaptor(),
      crossDomain: true
    });

    // Execute query with filtering, sorting, paging
    dataManager.executeQuery(
      new Query()
        .where('Freight', 'greaterthan', 500) // Filter
        .sortBy('OrderDate') // Sort
        .take(10) // Pagination
    ).then((e) => {
      setItems(e.result); // Bind results
    });
  }, []);

  return (
    <div>
      <h2>Orders</h2>
      <ul>
        {items.map((item) => (
          <li key={item.OrderID}>{item.CustomerID} - ${item.Freight}</li>
        ))}
      </ul>
    </div>
  );
}

Common Use Cases

Key Props & Options

Comparison: DataManager vs Direct Binding