New to KendoReact? Start a free 30-day trial

Remote Data Operations
Premium

Updated on Oct 12, 2026

This guide demonstrates how to use the useRemoteDataSource and useODataDataSource hooks for working with remote data services.

Remote Data Integration Example

Here is a complete example showing how to integrate a Grid with useRemoteDataSource to perform CRUD operations against a remote API:

Loading ...

Using useRemoteDataSource

The useRemoteDataSource hook is designed for custom remote data services. It provides flexibility in configuring how data operations are handled on the server side.

jsx

const result = useRemoteDataSource({
    transport: {
        read: {
            url: 'https://api.example.com/products',
            method: 'GET'
        },
        update: {
            url: 'https://api.example.com/products',
            method: 'PUT'
        },
        create: {
            url: 'https://api.example.com/products',
            method: 'POST'
        },
        delete: {
            url: 'https://api.example.com/products',
            method: 'DELETE'
        }
    },
    schema: {
        model: {
            id: 'ProductID'
        }
    }
});

Dynamic URL Configuration

You can dynamically generate URLs based on the data item for update and delete operations:

jsx

const result = useRemoteDataSource({
    transport: {
        // ...existing code...
        update: {
            url: (dataItem) => `https://api.example.com/products/${dataItem.id}`,
            method: 'PUT'
        },
        delete: {
            url: (dataItem) => `https://api.example.com/products/${dataItem.id}`,
            method: 'DELETE'
        }
    }
});

The object form of the transport configuration sends only the Content-Type header, and it does not provide an option for other request headers. To send custom headers, such as an Authorization header, set the read, create, update, or delete operation to a function and make the request yourself.

The following example demonstrates how to send a bearer token with the read and update requests. The read function receives the current filter, skip, take, sort, and group state when the corresponding server-side operations are enabled, and it must return a promise that resolves to the array of data items.

jsx

const result = useRemoteDataSource({
    transport: {
        read: async () => {
            const response = await fetch('https://api.example.com/products', {
                headers: { Authorization: `Bearer ${token}` }
            });

            return response.json();
        },
        update: async ({ data }) => {
            const response = await fetch(`https://api.example.com/products/${data.ProductID}`, {
                method: 'PUT',
                headers: {
                    'Content-Type': 'application/json',
                    Authorization: `Bearer ${token}`
                },
                body: JSON.stringify(data)
            });

            return response.json();
        }
    },
    schema: {
        model: {
            id: 'ProductID'
        }
    }
});

Server-Side Data Operations

You can also control whether data operations such as filtering, sorting, paging, and grouping are processed on the server or the client side:

jsx

const result = useRemoteDataSource({
    serverFiltering: true, // Server handles filtering
    serverSorting: true, // Server handles sorting
    serverPaging: true, // Server handles paging
    serverGrouping: true // Server handles grouping
    // ...transport config
});

Data Schema Configuration

You can define how to extract specific data fields from the server's response using the schema configuration. This allows you to map the response structure to the DataSource's expected format:

jsx

const result = useRemoteDataSource({
    // ...transport config
    schema: {
        data: 'items', // Extract data array from response
        total: 'totalCount', // Extract total count from response
        errors: 'errors', // Extract errors from response
        model: {
            id: 'ProductID' // Specify ID field
        }
    }
});

CRUD Operations and Synchronization

when managing the data with the KendoReact DataSource, it allows you to handle and synchronize CRUD operations with full control. This means you can customize how data is fetched, updated, or deleted from your backend or API, ensuring seamless integration with your application's requirements.

jsx

// Create a new item
dataSource.create({ data: { name: 'New Product', price: 10.99 } });

// Update an item
dataSource.update({ data: { id: 1, name: 'Updated Product' } });

// Delete an item
dataSource.delete({ data: { id: 1 } });

// Sync all changes with the server
await dataSource.sync();

// Sync just a specific item
await dataSource.syncItem({ data: item });

// Discard all pending changes
dataSource.discard();

Using useODataDataSource

For OData services, the useODataDataSource hook provides automatic handling of OData protocol specifics:

jsx

const result = useODataDataSource({
    transport: {
        read: {
            url: 'https://services.odata.org/V4/Northwind/Northwind.svc/Products'
        }
    },
    schema: {
        model: {
            id: 'ProductID'
        }
    }
});