diff --git a/blazor-toc.html b/blazor-toc.html
index 32bd446991..2823cb4bc1 100644
--- a/blazor-toc.html
+++ b/blazor-toc.html
@@ -2089,9 +2089,13 @@
Adaptors
-
-
- Custom Binding
+
How To
diff --git a/blazor/data/adaptors/custom-adaptor.md b/blazor/data/adaptors/custom-adaptor.md
new file mode 100644
index 0000000000..0175e427a1
--- /dev/null
+++ b/blazor/data/adaptors/custom-adaptor.md
@@ -0,0 +1,285 @@
+---
+layout: post
+title: Blazor DataManager - Custom Binding | Syncfusion
+description: Learn how to implement custom adaptor in Syncfusion Blazor DataManager for flexible data operations and CRUD integration with DataGrid.
+platform: Blazor
+control: DataManager
+documentation: ug
+---
+
+Blazor DataManager explains creating a custom data adaptor to transform requests and responses, enabling custom backends and behaviors.
+
+# Custom Binding in Syncfusion Blazor Components
+
+Custom binding in the Syncfusion® Blazor [SfDataManager](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Data.SfDataManager.htm) provides a mechanism to implement custom logic for data retrieval and manipulation. It allows defining how data operations are executed by creating a [CustomAdaptor](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Adaptors.html#Syncfusion_Blazor_Adaptors_CustomAdaptor) that overrides default behavior. Instead of creating an entirely new adaptor from scratch, Custom Adaptor extends and modifies the behavior of existing adaptors by intercepting and customizing HTTP requests and responses.
+
+The [DataAdaptor](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataAdaptor.html) class is an abstract base that defines the interaction between the `SfDataManager` and an external data source. A custom adaptor derived from this class can override its virtual members to implement custom **data retrieval** and **CRUD** operations. These members include both synchronous and asynchronous methods such as **Read**, **Insert**, **Update**, **Remove**, and **BatchUpdate**, providing complete flexibility for integrating any data source while maintaining compatibility with Blazor [DataGrid](https://blazor.syncfusion.com/documentation/datagrid/getting-started-with-web-app) and other bound controls.
+
+The **DataAdaptor** abstract class includes both synchronous and asynchronous method signatures, which can be overridden in the custom adaptor. The following are the method signatures available in this class:
+
+```csharp
+public abstract class DataAdaptor
+{
+ ///
+ /// Performs data read operation synchronously.
+ ///
+ public virtual object Read(DataManagerRequest dataManagerRequest, string key = null)
+
+ ///
+ /// Performs data read operation asynchronously.
+ ///
+ public virtual Task ReadAsync(DataManagerRequest dataManagerRequest, string key = null)
+
+ ///
+ /// Performs insert operation synchronously.
+ ///
+ public virtual object Insert(DataManager dataManager, object data, string key)
+ ///
+ /// Performs insert operation asynchronously.
+ ///
+ public virtual Task InsertAsync(DataManager dataManager, object data, string key)
+
+ ///
+ /// Performs remove operation synchronously.
+ ///
+ public virtual object Remove(DataManager dataManager, object data, string keyField, string key)
+
+ ///
+ /// Performs remove operation asynchronously.
+ ///
+ public virtual Task RemoveAsync(DataManager dataManager, object data, string keyField, string key)
+
+ ///
+ /// Performs update operation synchronously.
+ ///
+ public virtual object Update(DataManager dataManager, object data, string keyField, string key)
+
+ ///
+ /// Performs update operation asynchronously.
+ ///
+ public virtual Task UpdateAsync(DataManager dataManager, object data, string keyField, string key)
+
+ ///
+ /// Performs batch CRUD operations synchronously.
+ ///
+ public virtual object BatchUpdate(DataManager dataManager, object changedRecords, object addedRecords, object deletedRecords, string keyField, string key, int? dropIndex)
+
+ ///
+ /// Performs batch CRUD operations asynchronously.
+ ///
+ public virtual Task BatchUpdateAsync(DataManager dataManager, object changedRecords, object addedRecords, object deletedRecords, string keyField, string key, int? dropIndex)
+}
+```
+
+## Why use Custom Adaptor?
+
+The Custom Adaptor is used when the built‑in DataManager adaptors are almost sufficient but require additional customization to meet specific application requirements. It enables extending or altering default data handling behavior without completely rewriting the existing data management logic.
+
+Typical use cases include:
+
+* Data originates from sources that do not conform to standard adaptors, such as **REST APIs** or **in-memory collections**.
+* Complete control over data operations is required, including applying custom business rules during **CRUD** operations.
+* Built-in adaptors do not meet requirements for data transformation or filtering.
+
+## Prerequisites
+
+Ensure the following software and packages are installed before proceeding:
+
+| Software/Package | Version | Purpose |
+|-----------------|---------|---------|
+| Visual Studio 2026 | 18.0 or later | Development IDE with Blazor workload |
+| .NET SDK | net8.0 or compatible | Runtime and build tools |
+
+## Custom Adaptor setup
+
+To configure `CustomAdaptor` with the Syncfusion® Blazor components, follow these steps:
+
+### Step 1: Create a Blazor web app
+
+You can create a **Blazor Web App** named **CustomAdaptor** using Visual Studio 2022, either via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). Make sure to configure the appropriate [interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-8.0#render-modes) and [interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=windows).
+
+### Step 2: Implementing Custom Adaptor
+
+Custom Adaptor in the Syncfusion® Blazor DataManager can be integrated with the Blazor [DataGrid](https://blazor.syncfusion.com/documentation/datagrid/getting-started-with-web-app) and other bound controls.
+
+1. **Create a custom adaptor**
+
+* Derive a class from the `DataAdaptor` abstract base to implement custom logic for data retrieval and manipulation.
+
+2. **Override required methods for data operations**
+
+* For **data operations**, override [Read](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataAdaptor-1.html#Syncfusion_Blazor_DataAdaptor_1_Read_Syncfusion_Blazor_DataManagerRequest_System_String_) or [ReadAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataAdaptor-1.html#Syncfusion_Blazor_DataAdaptor_1_ReadAsync_Syncfusion_Blazor_DataManagerRequest_System_String_) method to apply **searching**, **sorting**, **filtering**, **paging**, and **aggregation** using the [DataOperations](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataOperations.html) and [DataUtil](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Data.DataUtil.html) classes.
+
+The [DataManagerRequest](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataManagerRequest.html) object provides details for each operation, including search criteria, sort descriptors, filter conditions, and paging parameters. These can be applied using built-in methods from the [DataOperations](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataOperations.html) and [DataUtil](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Data.DataUtil.html) classes:
+
+* [PerformSearching](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataOperations.html#Syncfusion_Blazor_DataOperations_PerformSearching__1_System_Collections_Generic_IEnumerable___0__System_Collections_Generic_List_Syncfusion_Blazor_Data_SearchFilter__) – Applies search criteria to the collection.
+* [PerformSorting](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataOperations.html#Syncfusion_Blazor_DataOperations_PerformSorting__1_System_Collections_Generic_IEnumerable___0__System_Collections_Generic_List_Syncfusion_Blazor_Data_SortedColumn__) – Sorts the collection based on specified fields.
+* [PerformFiltering](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataOperations.html#Syncfusion_Blazor_DataOperations_PerformFiltering__1_System_Collections_Generic_IEnumerable___0__System_Collections_Generic_List_Syncfusion_Blazor_Data_WhereFilter__System_String_) – Filters records using conditions.
+* [PerformSkip](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataOperations.html#Syncfusion_Blazor_DataOperations_PerformSkip__1_System_Collections_Generic_IEnumerable___0__System_Int32_) – Skips a defined number of records for paging.
+* [PerformTake](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataOperations.html#Syncfusion_Blazor_DataOperations_PerformTake__1_System_Collections_Generic_IEnumerable___0__System_Int32_) – Takes a defined number of records for paging.
+* [PerformAggregation](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Data.DataUtil.html#Syncfusion_Blazor_Data_DataUtil_PerformAggregation_System_Collections_IEnumerable_System_Collections_Generic_List_Syncfusion_Blazor_Data_Aggregate__) – Calculates aggregate values such as Sum, Average, Min, and Max for a collection.
+
+3. **Override required methods for CRUD actions**
+
+Custom binding supports full **CRUD** functionality by overriding methods in the `DataAdaptor` abstract class. These methods handle data manipulation for components bound to the `SfDataManager`.
+
+The methods listed below provide signatures for both synchronous and asynchronous operations:
+
+* **Create**
+
+ * [Insert](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataAdaptor.html#Syncfusion_Blazor_DataAdaptor_Insert_Syncfusion_Blazor_DataManager_System_Object_System_String_) / [InsertAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataAdaptor.html#Syncfusion_Blazor_DataAdaptor_InsertAsync_Syncfusion_Blazor_DataManager_System_Object_System_String_) – Adds new records.
+
+* **Read**
+
+ * [Read](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataAdaptor-1.html#Syncfusion_Blazor_DataAdaptor_1_Read_Syncfusion_Blazor_DataManagerRequest_System_String_) / [ReadAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataAdaptor-1.html#Syncfusion_Blazor_DataAdaptor_1_ReadAsync_Syncfusion_Blazor_DataManagerRequest_System_String_) – Retrieves data from the data source.
+
+* **Update**
+
+ * [Update](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataAdaptor.html#Syncfusion_Blazor_DataAdaptor_Update_Syncfusion_Blazor_DataManager_System_Object_System_String_System_String_) / [UpdateAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataAdaptor.html#Syncfusion_Blazor_DataAdaptor_UpdateAsync_Syncfusion_Blazor_DataManager_System_Object_System_String_System_String_) – Modifies existing records.
+
+* **Delete**
+
+ * [Remove](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataAdaptor.html#Syncfusion_Blazor_DataAdaptor_Remove_Syncfusion_Blazor_DataManager_System_Object_System_String_System_String_) / [RemoveAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataAdaptor.html#Syncfusion_Blazor_DataAdaptor_RemoveAsync_Syncfusion_Blazor_DataManager_System_Object_System_String_System_String_) – Deletes records.
+
+* **Batch Operations**
+
+ * [BatchUpdate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataAdaptor.html#Syncfusion_Blazor_DataAdaptor_BatchUpdate_Syncfusion_Blazor_DataManager_System_Object_System_Object_System_Object_System_String_System_String_System_Nullable_System_Int32__) / [BatchUpdateAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataAdaptor.html#Syncfusion_Blazor_DataAdaptor_BatchUpdateAsync_Syncfusion_Blazor_DataManager_System_Object_System_Object_System_Object_System_String_System_String_System_Nullable_System_Int32__) – Handles batch operations for editing scenarios.
+
+Overriding these methods enables custom logic for **creating**, **reading**, **updating**, and **deleting** data while maintaining compatibility with Syncfusion Blazor components such as [DataGrid](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html).
+
+4. **Custom Adaptor configuration**
+
+The following code example demonstrates `CustomAdaptor` integrated with `DataGrid` to handle server-like operations such as sorting, filtering, paging, and searching.
+It also supports full CRUD and batch operations by overriding DataAdaptor methods, enabling seamless integration with the Syncfusion Blazor DataManager.
+
+```cshtml
+@using Syncfusion.Blazor
+@using Syncfusion.Blazor.Data
+@using Syncfusion.Blazor.Grids
+
+
+
+
+
+
+@code {
+ public static List Orders { get; set; } = new();
+
+ protected override void OnInitialized()
+ {
+ Orders = Enumerable.Range(1, 75).Select(x => new Order()
+ {
+ OrderID = 1000 + x,
+ CustomerID = new[] { "ALFKI", "ANANTR", "ANTON", "BLONP", "BOLID" }[new Random().Next(5)],
+ Freight = 2.1 * x
+ }).ToList();
+ }
+
+ public class Order
+ {
+ public int OrderID { get; set; }
+ public string? CustomerID { get; set; }
+ public double Freight { get; set; }
+ }
+
+ public class CustomAdaptor : DataAdaptor
+ {
+ public override object Read(DataManagerRequest dm, string key = null)
+ {
+ IEnumerable dataSource = Orders;
+
+ if (dm.Search?.Count > 0)
+ dataSource = DataOperations.PerformSearching(dataSource, dm.Search);
+
+ if (dm.Sorted?.Count > 0)
+ dataSource = DataOperations.PerformSorting(dataSource, dm.Sorted);
+
+ if (dm.Where?.Count > 0)
+ dataSource = DataOperations.PerformFiltering(dataSource, dm.Where, dm.Where[0].Operator);
+
+ int count = dataSource.Count();
+
+ if (dm.Skip != 0)
+ dataSource = DataOperations.PerformSkip(dataSource, dm.Skip);
+
+ if (dm.Take != 0)
+ dataSource = DataOperations.PerformTake(dataSource, dm.Take);
+
+ return dm.RequiresCounts ? new DataResult() { Result = dataSource, Count = count } : (object)dataSource;
+ }
+
+ public override object Insert(DataManager dm, object value, string key)
+ {
+ Orders.Insert(0, value as Order);
+ return value;
+ }
+
+ public override object Remove(DataManager dm, object value, string keyField, string key)
+ {
+ Orders.Remove(Orders.FirstOrDefault(or => or.OrderID == int.Parse(value.ToString())));
+ return value;
+ }
+
+ public override object Update(DataManager dm, object value, string keyField, string key)
+ {
+ var data = Orders.FirstOrDefault(or => or.OrderID == (value as Order).OrderID);
+ if (data != null)
+ {
+ data.CustomerID = (value as Order).CustomerID;
+ data.Freight = (value as Order).Freight;
+ }
+ return value;
+ }
+
+ public override object BatchUpdate(DataManager dm, object changed, object added, object deleted, string keyField, string key, int? dropIndex)
+ {
+ if (changed is IEnumerable changedRecords)
+ {
+ foreach (var rec in changedRecords)
+ {
+ var existing = Orders.FirstOrDefault(o => o.OrderID == rec.OrderID);
+ if (existing != null)
+ existing.CustomerID = rec.CustomerID;
+ }
+ }
+
+ if (added is IEnumerable addedRecords)
+ {
+ foreach (var rec in addedRecords)
+ Orders.Add(rec);
+ }
+
+ if (deleted is IEnumerable deletedRecords)
+ {
+ foreach (var rec in deletedRecords)
+ Orders.RemoveAll(o => o.OrderID == rec.OrderID);
+ }
+
+ return Orders;
+ }
+
+ }
+}
+```
+
+> * When the [RequiresCounts](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataManagerRequest.html#Syncfusion_Blazor_DataManagerRequest_RequiresCounts) property of `DataManagerRequest` is **true**, the return type should be a [DataResult](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Data.DataResult.html) object containing:
+
+> * **Result** – The processed collection.
+> * **Count** – Total number of records.
+> * **Aggregate** (optional) – Aggregate values when aggregation is applied.
+
+> * When `RequiresCounts` is **false**, return only the processed collection.
+> * If the `Read` or `ReadAsync` method is not overridden in a custom adaptor, the default read handler processes the request.
+
+## Integration with Syncfusion® Blazor components
+
+To integrate the Syncfusion® Blazor components with the `CustomAdaptor` in detail, refer to the documentation below:
+
+- [DataGrid](https://blazor.syncfusion.com/documentation/datagrid/connecting-to-adaptors/custom-adaptor)
\ No newline at end of file
diff --git a/blazor/data/adaptors/graphql-adaptor.md b/blazor/data/adaptors/graphql-adaptor.md
new file mode 100644
index 0000000000..76d2c32d16
--- /dev/null
+++ b/blazor/data/adaptors/graphql-adaptor.md
@@ -0,0 +1,802 @@
+---
+layout: post
+title: Blazor DataManager - GraphQL Adaptor | Syncfusion
+description: Blazor DataManager GraphQL enables server-side data handling, explaining backend setup and endpoint configuration for REST-based operations.
+control: GraphQL Adaptor
+platform: blazor
+documentation: ug
+---
+
+# GraphQL Remote Data Binding in Syncfusion Blazor Components
+
+The Syncfusion® Blazor components provides seamless integration with GraphQL services, enabling modern, efficient data operations through a flexible query language. This comprehensive guide demonstrates configuring and using GraphQL with the Syncfusion® Blazor components to perform server-side operations including querying, mutations, filtering, sorting, paging, and complete CRUD functionality.
+
+## Understanding GraphQL
+
+[GraphQL](https://graphql.org/learn/introduction/) is a query language that allows applications to request exactly the data needed, nothing more and nothing less. Unlike traditional REST APIs that return fixed data structures, GraphQL enables the client to specify the shape and content of the response.
+
+**Traditional REST APIs** and **GraphQL** differ mainly in how data is requested and returned: **REST APIs expose** multiple endpoints that return fixed data structures, often including unnecessary fields and requiring several requests to fetch related data, while **GraphQL** uses a single endpoint where queries define the exact fields needed, enabling precise responses and allowing related data to be retrieved efficiently in one request. This makes **GraphQL** especially useful for **Blazor DataGrid integration**, the **reason** is data‑centric UI components require well‑structured and selective datasets to support efficient filtering, reduce network calls, and improve overall performance.
+
+**Key GraphQL Concepts**
+
+- **Queries**: A query is a request to read data. Queries do not modify data; they only retrieve it.
+- **Mutations**: A mutation is a request to modify data. Mutations create, update, or delete records.
+- **Resolvers**: Each query or mutation is handled by a resolver, which is a function responsible for fetching data or executing an operation. **Query resolvers** handle **read operations**, while **mutation resolvers** handle **write operations**.
+- **Schema**: Defines the structure of the API. The schema describes available data types, the fields within those types, and the operations that can be executed. Query definitions specify how data can be retrieved, and mutation definitions specify how data can be modified.
+
+[Hot Chocolate](https://chillicream.com/docs/hotchocolate/v15) is an open‑source GraphQL server framework for .NET. Hot Chocolate enables the creation of GraphQL APIs using ASP.NET Core and integrates seamlessly with modern .NET applications, including Blazor.
+
+### GraphQL vs REST comparison
+
+Understanding the key differences between GraphQL and REST helps appreciate the benefits of using GraphQL with Syncfusion components:
+
+| Aspect | REST API | GraphQL |
+|--------|----------|---------|
+| **Endpoints** | Multiple endpoints (/api/orders, /api/customers). | Single endpoint (/graphql). |
+| **Data fetching** | Fixed data structure per endpoint. | Flexible, client specifies exact data needs. |
+| **Over-fetching** | Common (gets unnecessary data). | Eliminated (requests only needed fields). |
+| **Under-fetching** | Requires multiple requests. | Single request for complex data. |
+| **Versioning** | Requires API versioning (v1, v2). | Schema evolution without versioning. |
+| **Type system** | Not built-in | Strongly typed schema. |
+| **Query format** | URL parameters | Structured query language. |
+| **Real-time** | Requires separate solution. | Built-in subscriptions support. |
+
+**GraphQL Query example:**
+```text
+query {
+ getOrders {
+ result {
+ OrderID
+ CustomerID
+ ShipCity
+ }
+ count
+ }
+}
+```
+
+The following benefits apply when using GraphQL protocol:
+
+- **Precise data retrieval**: Request only the fields needed, reducing bandwidth.
+- **Single request**: Fetch related data in one query instead of multiple REST calls.
+- **Strong typing**: Schema provides clear contract between client and server.
+- **Self-documentation**: Introspection enables automatic API documentation.
+- **Rapid development**: Faster iteration with flexible queries.
+- **Reduced over-fetching**: Eliminates unnecessary data transfer.
+
+### GraphQLAdaptor Overview
+
+The `GraphQLAdaptor` is a specialized adaptor in Syncfusion® DataManager that enables seamless communication between Syncfusion® Blazor components and GraphQL servers. It automatically converts component operations into GraphQL queries and mutations. The process works as follows:
+
+1. **Client action**: User performs operation (filter, sort, page, edit, etc.).
+2. **Query construction**: `GraphQLAdaptor` builds GraphQL query with variables.
+3. **Server request**: POST request sent to GraphQL endpoint.
+4. **Query execution**: GraphQL server processes query and executes resolvers.
+5. **Response processing**: `GraphQLAdaptor` extracts data from response.
+6. **Component rendering**: Component displays updated data.
+
+The following example illustrates how Syncfusion® Blazor components handle data operations through `GraphQLAdaptor`:
+
+- **Filter**: Sends `datamanager.where` variable with filter predicates.
+- **Sort**: Sends `datamanager.sorted` variable with field and direction.
+- **Page**: Sends `datamanager.skip` and `datamanager.take` variables.
+- **CRUD**: Executes mutations (createOrder, updateOrder, deleteOrder).
+
+The following integration benefits are gained when using GraphQL:
+
+- Automatic query variable management.
+- Built-in support for filtering, sorting, and paging.
+- Simplified CRUD operations through mutations.
+- Flexible response mapping.
+- Reduced boilerplate code.
+
+## Prerequisites
+
+Install the following software and packages before starting the process:
+
+| Software/Package | Version | Purpose |
+|-----------------|---------|---------|
+| Visual Studio 2026 | 18.0 or later | Development IDE with Blazor workload |
+| .NET SDK | net8.0 or compatible | Runtime and build tools |
+| HotChocolate.AspNetCore | 15.1 or later | GraphQL server framework |
+
+**Package purposes:**
+
+- `HotChocolate.AspNetCore`: Core GraphQL server implementation for ASP.NET Core, providing schema execution, middleware integration, and HTTP request handling.
+
+## Setting Up the GraphQL Backend
+
+### Step 1: Install Required NuGet Packages and Configure Launch Settings
+
+Before installing NuGet packages, a new Blazor Web Application must be created using the default template. The template automatically generates essential starter files—such as **Program.cs, appsettings.json, launchSettings.json, the wwwroot folder, and the Components folder**.
+
+For this guide, a Blazor application named **GraphQLAdaptor** has been created.
+
+**Install NuGet Packages**
+
+NuGet packages are software libraries that add functionality to applications. The following packages enable GraphQL server functionality+ and Syncfusion Blazor Components.
+
+**Required Packages:**
+
+- **HotChocolate.AspNetCore** (version 15.1 or later) - GraphQL server framework
+
+**Method 1: Using Package Manager Console**
+
+1. Open Visual Studio 2026.
+2. Navigate to **Tools → NuGet Package Manager → Package Manager Console**.
+3. Run the following commands:
+
+```powershell
+Install-Package HotChocolate.AspNetCore -Version 15.1.12
+```
+
+**Method 2: Using NuGet Package Manager UI**
+
+1. Open **Visual Studio 2026 → Tools → NuGet Package Manager → Manage NuGet Packages for Solution**.
+2. Search for and install each package individually:
+ - **HotChocolate.AspNetCore** (version 15.1.12 or later)
+
+---
+
+**Package purposes:**
+
+- `HotChocolate.AspNetCore`: Core GraphQL server implementation for ASP.NET Core, providing schema execution, middleware integration, and HTTP request handling.
+
+> The HotChocolate packages are required for GraphQL functionality. Refer to the [HotChocolate documentation](https://chillicream.com/docs/hotchocolate/v13) for more details.
+
+### Step 2: Register Hot Chocolate Services in Program.cs
+
+The `Program.cs` file configures and registers the GraphQL services.
+
+**Instructions:**
+
+1. Open the `Program.cs` file at the project root.
+2. Add the following code after `var builder = WebApplication.CreateBuilder(args);`:
+
+```csharp
+[Program.cs]
+
+using GraphQLAdaptor.Models;
+using HotChocolate.Execution.Configuration;
+
+var builder = WebApplication.CreateBuilder(args);
+
+// Register Hot Chocolate GraphQL services
+builder.Services
+ .AddGraphQLServer()
+ .AddQueryType() // Register query resolver.
+ .AddMutationType(); // Register mutation resolver.
+
+var app = builder.Build();
+
+// Map the GraphQL endpoint (default: /graphql)
+app.MapGraphQL();
+
+app.Run();
+```
+
+**Details:**
+
+- `AddGraphQLServer()` - Initializes the Hot Chocolate GraphQL server
+- `AddQueryType()` - Registers query resolvers for read operations
+- `AddMutationType()` - Registers mutation resolvers for write operations
+- `MapGraphQL()` - Exposes the GraphQL endpoint at `/graphql`
+
+The GraphQL backend is now configured and ready. The GraphQL endpoint is accessible at `https://localhost:xxxx/graphql`.
+
+---
+
+### Step 3: Configure Launch Settings (Port Configuration)
+
+The **launchsettings.json** file controls the port number where the application runs. This file is located in the **Properties** folder at **Properties/launchsettings.json**.
+
+**Instructions to Change the Port:**
+
+1. Open the **Properties** folder in the project root.
+2. Double-click **launchsettings.json** to open the file.
+3. Locate the `https` profile section:
+
+```json
+"https": {
+ "commandName": "Project",
+ "dotnetRunMessages": true,
+ "launchBrowser": true,
+ "applicationUrl": "https://localhost:7001;http://localhost:5001",
+ "environmentVariables": {
+ "ASPNETCORE_ENVIRONMENT": "Development"
+ }
+}
+```
+
+4. Modify the `applicationUrl` property to change the port numbers:
+ - `https://localhost:7001` - HTTPS port (change 7001 to desired port)
+ - `http://localhost:5001` - HTTP port (change 5001 to desired port)
+
+5. Example configuration with custom ports:
+
+```json
+"https": {
+ "commandName": "Project",
+ "dotnetRunMessages": true,
+ "launchBrowser": true,
+ "applicationUrl": "https://localhost:7777;http://localhost:5555",
+ "environmentVariables": {
+ "ASPNETCORE_ENVIRONMENT": "Development"
+ }
+}
+```
+
+6. Save the file and restart the application for the changes to take effect.
+
+**Important Notes:**
+
+- Port numbers must be between 1024 and 65535.
+- Avoid using ports already in use by other applications.
+- The GraphQL endpoint will be accessible at the configured HTTPS URL (e.g., `https://localhost:7777/graphql`).
+
+All configuration steps are now complete.
+
+---
+
+### Step 4: Create the Data Model
+
+A data model represents the structure of data that the application stores. It defines the properties (fields) that make up a record. Each property corresponds to a column in the database table. The data model acts as the blueprint for how data is organized and accessed throughout the application.
+
+In the context of an expense tracker, the data model defines what information is stored for each expense entry. Properties include the expense identifier, employee details, department, category, and financial amounts.
+
+**Instructions**:
+
+1. Create a new folder named **Models** in the project root directory.
+2. Inside the **Models** folder, create a new file named **ExpenseRecord.cs**.
+3. Define the **ExpenseRecord** class with the following code:
+
+**File Location:** `Models/ExpenseRecord.cs`
+
+```csharp
+namespace Grid_GraphQLAdaptor.Models
+{
+ ///
+ /// Represents a single expense record stored in the database.
+ /// Each property corresponds to a database column.
+ ///
+ public class ExpenseRecord
+ {
+ ///
+ /// Unique identifier for each expense record.
+ /// This is the primary key in the database.
+ ///
+ public string ExpenseId { get; set; }
+
+ ///
+ /// Name of the employee who submitted the expense.
+ ///
+ public string EmployeeName { get; set; }
+
+ ///
+ /// Email address of the employee.
+ ///
+ public string EmployeeEmail { get; set; }
+
+ ///
+ /// Department to which the employee belongs.
+ ///
+ public string Department { get; set; }
+
+ ///
+ /// Category of the expense (e.g., Travel, Meals, Office Supplies).
+ ///
+ public string Category { get; set; }
+
+ ///
+ /// Base amount of the expense before tax.
+ ///
+ public decimal Amount { get; set; }
+
+ ///
+ /// Tax percentage applied to the expense.
+ ///
+ public decimal TaxPct { get; set; }
+
+ ///
+ /// Total amount including tax (calculated: Amount + (Amount * TaxPct / 100)).
+ ///
+ public decimal TotalAmount { get; set; }
+ }
+}
+```
+**Property Mapping Reference**
+
+The following table shows how C# properties map to database columns and GraphQL field names:
+
+| Property Name (C#) | Database Column | GraphQL Field Name | Data Type | Purpose |
+|---|---|---|---|---|
+| `ExpenseId` | `expense_id` | `expenseId` | `String` | Unique identifier for the expense record |
+| `EmployeeName` | `employee_name` | `employeeName` | `String` | Name of the employee submitting the expense |
+| `EmployeeEmail` | `employee_email` | `employeeEmail` | `String` | Email address for contact purposes |
+| `Department` | `department` | `department` | `String` | Organizational department |
+| `Category` | `category` | `category` | `String` | Type or classification of expense |
+| `Amount` | `amount` | `amount` | `Decimal` | Base expense amount before tax |
+| `TaxPct` | `tax_pct` | `taxPct` | `Decimal` | Tax percentage applied |
+| `TotalAmount` | `total_amount` | `totalAmount` | `Decimal` | Final amount including tax |
+
+**Important Convention: Camel Case Conversion**
+
+**Hot Chocolate GraphQL** automatically converts C# property names (**PascalCase**) to GraphQL field names (**camelCase**). This convention ensures consistent naming in the GraphQL schema:
+
+- C# Property: `EmployeeName` → GraphQL Field: `employeeName`
+- C# Property: `ExpenseId` → GraphQL Field: `expenseId`
+- C# Property: `TotalAmount` → GraphQL Field: `totalAmount`
+
+**Explanation**:
+
+- The [Key] attribute marks the `ExpenseId` property as the primary key (a unique identifier for each record).
+- Each property represents a column in the database table.
+- The model provides the data structure that GraphQL uses to process queries and mutations.
+
+The expense data model has been successfully created.
+
+---
+
+### Step 5: GraphQL Query Resolvers
+
+A query resolver is a method in the backend that handles read requests from the client. When the Blazor components needs to fetch data, it sends a GraphQL query to the server. The query resolver receives this request, processes it, and returns the appropriate data. Query resolvers do not modify data; they only retrieve and return it.
+
+In simple terms, a **GraphQL query** asks a question,
+and a **resolver** is the one who answers it.
+
+**Instructions:**
+
+1. Inside the **Models** folder, create a new file named **GraphQLQuery.cs**.
+2. Add the following code to define the query resolver:
+
+```csharp
+[Models/GraphQLQuery.cs]
+
+using GraphQLAdaptor.Models;
+
+public class GraphQLQuery
+{
+ ///
+ /// Query resolver for fetching expense record data with data operations support.
+ ///
+ public ExpenseRecordDataResponse GetExpenseRecordData(DataManagerRequestInput dataManager)
+ {
+ // Retrieve all expense records from the data source.
+ List dataSource = ExpenseRecord.GetAllRecords();
+
+ // Apply search, filter, sort, and paging operations as provided by the Blazor components.
+ // Operations are applied sequentially: search → filter → sort → paging.
+
+ // Store the total count before paging.
+ int totalRecords = dataSource.Count;
+
+ // Return response with total count and paginated data.
+ return new ExpenseRecordDataResponse
+ {
+ Count = totalRecords,
+ Result = dataSource
+ };
+ }
+}
+
+///
+/// Response structure for query results. Must include Count (total records) and Result (current page).
+///
+public class ExpenseRecordDataResponse
+{
+ public int Count { get; set; }
+ public List Result { get; set; } = new List();
+}
+```
+
+**Details:**
+
+- The `GetExpenseRecordData` method receives `DataManagerRequestInput`, which contains filter, sort, search, and paging parameters from the Blazor components.
+- Hot Chocolate automatically converts the method name `GetExpenseRecordData` to camelCase: `expenseRecordData` in the GraphQL schema.
+- The response must contain `Count` (total records) and `Result` (current page data) for the component to process pagination.
+
+The query resolver has been created successfully.
+
+---
+
+### Step 6: Create the DataManagerRequestInput Class
+
+A **DataManagerRequestInput** class is a GraphQL input type that represents all the parameters the Syncfusion Blazor components sends to the backend when requesting data. This class acts as a container for filtering, sorting, searching, paging, and other data operation parameters.
+
+**Purpose**
+When the component performs operations like pagination, sorting, filtering, or searching, it packages all these parameters into a `DataManagerRequestInput` object and sends it to the GraphQL backend. The backend then uses these parameters to fetch and return only the data the component needs.
+
+**Instructions**:
+
+1. Inside the **Models** folder, create a new file named **DataManagerRequestInput.cs**.
+2. Define the **DataManagerRequestInput** class and supporting classes with the following code:
+
+```csharp
+namespace GraphQLAdaptor.Models;
+
+///
+/// Represents the input structure for data manager requests from the Syncfusion Blazor component.
+/// Contains all parameters needed for data operations like filtering, sorting, paging, and searching.
+///
+public class DataManagerRequestInput
+{
+ ///
+ /// Number of records to skip from the beginning (used for pagination).
+ /// Example: Skip=10 means start from the 11th record.
+ ///
+ [GraphQLName("Skip")]
+ public int Skip { get; set; }
+
+ ///
+ /// Number of records to retrieve (page size).
+ /// Example: Take=10 means retrieve 10 records per page.
+ ///
+ [GraphQLName("Take")]
+ public int Take { get; set; }
+
+ ///
+ /// Indicates whether the total record count should be calculated.
+ /// Set to true when pagination requires knowing the total number of records.
+ ///
+ [GraphQLName("RequiresCounts")]
+ public bool RequiresCounts { get; set; } = false;
+
+ ///
+ /// Search criteria for finding specific records.
+ /// Contains the search text and which fields to search in.
+ ///
+ [GraphQLName("Search")]
+ public List? Search { get; set; }
+
+ // Add other parameters
+
+}
+
+///
+/// Represents an aggregate operation (Sum, Average, Min, Max, Count).
+/// Used to calculate aggregate values on specified fields.
+///
+public class Aggregate
+{
+ ///
+ /// Field name to aggregate (e.g., "Amount", "TotalAmount").
+ ///
+ [GraphQLName("Field")]
+ public string? Field { get; set; }
+
+ ///
+ /// Type of aggregation: Sum, Average, Min, Max, Count.
+ ///
+ [GraphQLName("Type")]
+ public string? Type { get; set; }
+}
+
+///
+/// Represents search criteria for finding records.
+/// Allows searching across multiple fields with specified operators.
+///
+public class SearchFilter
+{
+ ///
+ /// Fields to search in (e.g., ["EmployeeName", "Department"]).
+ ///
+ [GraphQLName("Fields")]
+ public List? Fields { get; set; }
+
+ ///
+ /// The search keyword entered by the user.
+ ///
+ [GraphQLName("Key")]
+ public string? Key { get; set; }
+
+ ///
+ /// Comparison operator (contains, equals, startsWith, etc.).
+ ///
+ [GraphQLName("Operator")]
+ public string? Operator { get; set; }
+
+ ///
+ /// Whether the search should ignore case (case-insensitive search).
+ ///
+ [GraphQLName("IgnoreCase")]
+ public bool IgnoreCase { get; set; }
+
+ ///
+ /// Indicates whether to ignore accent marks and diacritic characters during search operations
+ ///
+ [GraphQLName("IgnoreAccent")]
+ public bool IgnoreAccent { get; set; }
+}
+
+///
+/// Represents sorting instructions for ordering records.
+/// Defines which field to sort by and in which direction.
+///
+public class Sort
+{
+ ///
+ /// Field name to sort by (e.g., "Amount", "EmployeeName").
+ ///
+ [GraphQLName("Name")]
+ public string? Name { get; set; }
+
+ ///
+ /// Sort direction: "Ascending" or "Descending".
+ ///
+ [GraphQLName("Direction")]
+ public string? Direction { get; set; }
+
+ // Add other properties
+}
+
+///
+/// Represents a filter condition for narrowing down records.
+/// Supports complex nested conditions (AND/OR logic) for advanced filtering.
+///
+public class WhereFilter
+{
+ ///
+ /// Field name to filter by (e.g., "Department", "Amount").
+ ///
+ [GraphQLName("Field")]
+ public string? Field { get; set; }
+
+ ///
+ /// Ignore case sensitivity in comparisons.
+ ///
+ [GraphQLName("IgnoreCase")]
+ public bool? IgnoreCase { get; set; }
+
+ // Add other properties
+}
+
+// Add other classes
+
+```
+
+**Understanding the DataManagerRequestInput Class**
+
+**Example Scenario:** A sequence of operations is performed on the DataGrid as follows:
+
+- Searches for **"Finance"** in the Department column.
+- Filters for amounts greater than 1000.
+- Sorts by Amount in descending order.
+- Navigates to page 2 (showing records 11-20).
+- Resulting **DataManagerRequestInput** Parameters:
+
+```json
+{
+ "dataManager": {
+ "Skip": 10,
+ "Take": 10,
+ "RequiresCounts": true,
+ "Search": [
+ {
+ "Fields": ["Department"],
+ "Key": "Finance",
+ "Operator": "contains",
+ "IgnoreCase": true,
+ "IgnoreAccent": true
+ }
+ ],
+ "Where": [
+ {
+ "Condition": "and",
+ "Predicates": [
+ {
+ "Field": "Amount",
+ "Operator": "greaterThan",
+ "Value": 1000,
+ "Predicates": []
+ }
+ ]
+ }
+ ],
+ "Sorted": [
+ {
+ "Name": "Amount",
+ "Direction": "Descending"
+ }
+ ]
+ }
+}
+```
+
+
+**DataManagerRequestInput Properties:**
+
+| Property | Purpose | Type | Example |
+|----------|---------|------|---------|
+| `Skip` | Number of records to skip (used for pagination) | `int` | `10` (skip first 10 records) |
+| `Take` | Number of records to retrieve per page | `int` | `20` (fetch next 20 records) |
+| `Search` | Search filter configuration | `List` | Search term and target fields |
+| `Where` | Filter conditions for column filtering | `List` | Field name, operator, and value |
+| `Sorted` | Sort specifications for ordering records | `List` | Field name and direction (asc/desc) |
+| `Group` | Grouping configuration | `List` | Field names to group by |
+
+**Key Attributes Explained**
+[GraphQLName]: Maps C# property names to GraphQL schema field names. **Hot Chocolate** automatically converts PascalCase to camelCase.
+
+Example: **RequiresCounts → requiresCounts**
+[GraphQLType(typeof(AnyType))]: Allows flexible typing for complex nested structures that can contain various data types.
+
+### Step 7: GraphQL Mutation Resolvers
+
+A **GraphQL mutation resolver** is a method in the backend that handles write requests (data modifications) from the client. While queries only read data, mutations create, update, or delete records. When the Blazor DataGrid performs add, edit, or delete operations, it sends a GraphQL mutation to the server. The mutation resolver receives this request, processes it, and persists the changes to the data source.
+
+In simple terms, a **GraphQL mutation** asks for a change, and a **resolver** is the one who makes it.
+
+**Instructions:**
+1. Inside the Models folder, create a new file named **GraphQLMutation.cs**.
+2. Define the **GraphQLMutation** class with the following code:
+
+```csharp
+using GraphQLAdaptor.Models;
+using HotChocolate.Types;
+
+namespace GraphQLAdaptor.Models
+{
+ ///
+ /// GraphQL Mutation class that handles all write operations (Create, Update, Delete).
+ /// Each method is a resolver that processes data modification requests from the DataGrid.
+ ///
+ public class GraphQLMutation
+ {
+ ///
+ /// Mutation resolver for creating a new expense record.
+ /// Called when a user clicks the "Add" button in the DataGrid and submits a new record.
+ ///
+ public ExpenseRecord CreateExpense(
+ ExpenseRecord record,
+ int index,
+ string action,
+ [GraphQLType(typeof(AnyType))] IDictionary additionalParameters)
+ {
+ // Add logic to create new expense record
+ return record;
+ }
+
+ ///
+ /// Mutation resolver for updating an existing expense record.
+ /// Called when a user clicks the "Edit" button, modifies values, and submits the changes.
+ ///
+ public ExpenseRecord UpdateExpense(
+ ExpenseRecord record,
+ string action,
+ string primaryColumnName,
+ string primaryColumnValue,
+ [GraphQLType(typeof(AnyType))] IDictionary additionalParameters)
+ {
+ // Add logic to update existing expense record
+
+ return record;
+ }
+
+ ///
+ /// Mutation resolver for deleting an expense record.
+ /// Called when a user clicks the "Delete" button and confirms the deletion.
+ ///
+ public bool DeleteExpense(
+ string primaryColumnValue,
+ [GraphQLType(typeof(AnyType))] IDictionary additionalParameters)
+ {
+ // Add logic to delete existing expense record
+
+ return true;
+ }
+ }
+}
+```
+
+A mutation resolver is a C# method decorated with GraphQL attributes that:
+
+- **Receives input parameters** from the components(record data, primary keys, etc.).
+- **Processes the operation** (validation, calculation, data modification).
+- **Persists changes** to the data source (database, file, memory).
+- **Returns results** to the client (modified record or success/failure status).
+
+The GraphQL Mutation class has been successfully created and is ready to handle all data modification operations from the Syncfusion Blazor Components.
+
+---
+
+### Step 8: GraphQL service verification
+
+Run the application in Visual Studio by pressing **F5** or clicking the **Run** button and the application launches and opens in default browser at **https://localhost:xxxx**.
+
+### Step 9: Verify GraphQL endpoint
+
+Navigate to **https://localhost:xxxx/graphql** to access the Banana Cake Pop GraphQL IDE (built-in HotChocolate GraphQL playground).
+
+**Test query example:**
+
+```text
+query {
+ orders {
+ items {
+ orderID
+ customerID
+ employeeID
+ freight
+ shipCity
+ verified
+ orderDate
+ shipName
+ shipCountry
+ shippedDate
+ shipAddress
+ }
+ pageInfo {
+ hasNextPage
+ hasPreviousPage
+ }
+ totalCount
+ }
+}
+```
+
+### Step 10: Understanding the required response format
+
+When using the `GraphQLAdaptor`, every backend API endpoint must return data in a specific JSON structure. This ensures that Syncfusion® Blazor DataManager can correctly interpret the response and bind it to the component. The expected format is:
+
+```json
+{
+ "result": [
+ { "OrderID": 10001, "CustomerID": "ALFKI", "ShipCity": "Berlin" },
+ { "OrderID": 10002, "CustomerID": "ANATR", "ShipCity": "Madrid" },
+ ...
+ ...
+ ],
+ "count": 45
+}
+```
+
+**Test filtering example:**
+
+```text
+query {
+ orders(where: { shipCity: { eq: "Berlin" } }) {
+ items {
+ orderID
+ customerID
+ shipCity
+ }
+ totalCount
+ }
+}
+```
+
+**Test sorting example:**
+
+```text
+query {
+ orders(order: { freight: DESC }) {
+ items {
+ orderID
+ freight
+ }
+ }
+}
+```
+
+**Test pagination example:**
+
+```text
+query {
+ orders(skip: 0, take: 10) {
+ items {
+ orderID
+ customerID
+ }
+ pageInfo {
+ hasNextPage
+ }
+ totalCount
+ }
+}
+```
+
+## Integration with Syncfusion® Blazor Components
+
+To integrate the Syncfusion® Blazor components with the `GraphQLAdaptor`, refer to the documentation below:
+
+- [DataGrid](https://blazor.syncfusion.com/documentation/datagrid/connecting-to-adaptors/graphql-adaptor#integrating-syncfusion-blazor-datagrid)
diff --git a/blazor/data/adaptors/odatav4-adaptor.md b/blazor/data/adaptors/odatav4-adaptor.md
new file mode 100644
index 0000000000..efaef1e3b2
--- /dev/null
+++ b/blazor/data/adaptors/odatav4-adaptor.md
@@ -0,0 +1,359 @@
+---
+layout: post
+title: Blazor DataManager - ODataV4 Adaptor | Syncfusion
+description: Blazor DataManager ODataV4 enables server-side integration with REST APIs, explaining backend setup and endpoint configuration for efficient data operations.
+platform: Blazor
+control: ODataV4 Adaptor
+keywords: adaptors, ODataV4adaptor, ODataV4 adaptor, remotedata
+documentation: ug
+---
+
+# OData Remote Data Binding in Syncfusion Blazor Components
+
+OData (Open Data Protocol) is an open standard for building and consuming RESTful APIs. It defines a consistent format for requests and responses, making it easier to query, filter, sort, and manage data across different platforms and technologies.
+
+## Why Choose OData V4?
+
+OData V4 is a widely adopted open standard that provides a consistent way to query, filter, sort, and manipulate data across RESTful services. When using Syncfusion Blazor with `SfDataManager` and the `ODataV4Adaptor`, OData V4 offers several practical advantages over traditional REST APIs and other adaptors. The benefits include:
+
+- Eliminates manual request construction.
+- Ensures OData V4 protocol compliance.
+- Reduces boilerplate code.
+- Provides seamless DataGrid-to-OData communication.
+
+Automated functionality in OData V4 includes:
+- URL construction and query string formatting.
+- OData query syntax parsing and validation.
+- HTTP verb handling for CRUD operations (GET, POST, PATCH, DELETE).
+- Request-response transformation between DataGrid and OData service.
+
+This guide outlines the complete process for configuring the `OdataV4Adaptor` by detailing the backend API setup and the server‑side endpoints required to support data operations.
+
+### REST vs OData Query comparison
+
+When exposing data through APIs, two common styles are used:
+
+- **Traditional REST APIs**: Use custom query parameters that differ between implementations (e.g., ?country=, ?sort=, ?page=).
+<... trimmed for brevity ...>
+- **OData**: An open standard (OASIS) built on REST that provides a consistent query syntax using "$‑prefixed" parameters.
+
+**Quick comparison of REST and OData**:
+
+| Goal | Traditional REST API Style | OData Standard Query |
+|-------------------------------|-------------------------------------------------------------|--------------------------------------------------------------------------------------|
+| Get all orders | `/api/orders` | `/odata/Orders` |
+| Filter by country | `/api/orders?country=Denmark` | `/odata/Orders?$filter=ShipCountry eq 'Denmark'` |
+| Sort by ID descending | `/api/orders?sort=-orderId` or `sort=orderId desc` | `/odata/Orders?$orderby=OrderID desc` |
+| Page 2 (10 items per page) | `/api/orders?page=2&size=10` | `/odata/Orders?$skip=10&$top=10` |
+| All together | `/api/orders?country=Denmark&sort=-id&page=2&size=10` | `/odata/Orders?$filter=ShipCountry eq 'Denmark'&$orderby=OrderID desc&$skip=10&$top=10` |
+
+The following benefits apply when using OData protocol:
+
+- **Standardization**: Uniform query syntax across all OData services.
+- **Reduced complexity**: Eliminates need for custom filtering and sorting logic.
+- **Client flexibility**: Clients control data retrieval requirements.
+- **Efficiency**: Minimizes data transfer by requesting only necessary fields and rows.
+
+## Prerequisites
+
+Ensure the following software and packages are installed before proceeding:
+
+| Software/Package | Version | Purpose |
+|-----------------|---------|---------|
+| Visual Studio 2026 | 18.0 or later | Development IDE with Blazor workload |
+| .NET SDK | net8.0 or compatible | Runtime and build tools |
+
+## Backend setup (Configuring an OData V4 Service)
+
+To configure a server with Syncfusion® Blazor DataGrid, follow these steps:
+
+### Step 1: Create a Blazor web app
+
+You can create a **Blazor Web App** named **ODataV4Adaptor** using Visual Studio 2022, either via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). Make sure to configure the appropriate [interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-8.0#render-modes) and [interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=windows).
+
+### Step 2: Install NuGet packages
+
+To install the required package, go to **Tools → NuGet Package Manager → Manage NuGet Packages for Solution**.
+
+In the **Browse** tab, search for `Microsoft.AspNetCore.OData` and select it from the results. In the right panel, check the box for the server project, then click **Install**. When prompted, accept the license terms to complete the installation.
+
+**Package functionality:** The `Microsoft.AspNetCore.OData` package enables OData V4 support by providing query parsing, EDM model creation, response formatting, and processing of OData options such as `$filter`, `$orderby`, and `$select`.
+
+### Step 3: Create a model class
+
+Create a new folder named **Models**. Then, add a model class named **OrdersDetails.cs** to the **Models** folder under `ODataV4Adaptor.Client` to represent the order data.
+
+```csharp
+
+using System.ComponentModel.DataAnnotations;
+
+namespace ODataV4Adaptor.Client.Models
+{
+ public class OrdersDetails
+ {
+ public static List order = new List();
+
+ public OrdersDetails() { }
+
+ public OrdersDetails(int OrderID, string CustomerId, int EmployeeId, string ShipCountry)
+ {
+ this.OrderID = OrderID;
+ this.CustomerID = CustomerId;
+ this.EmployeeID = EmployeeId;
+ this.ShipCountry = ShipCountry;
+ }
+
+ public static List GetAllRecords()
+ {
+ if (order.Count() == 0)
+ {
+ int code = 10000;
+ for (int i = 1; i < 10; i++)
+ {
+ order.Add(new OrdersDetails(code + 1, "ALFKI", i + 0, "Denmark"));
+ order.Add(new OrdersDetails(code + 2, "ANATR", i + 2, "Brazil"));
+ order.Add(new OrdersDetails(code + 3, "ANTON", i + 1, "Germany"));
+ order.Add(new OrdersDetails(code + 4, "BLONP", i + 3, "Austria"));
+ order.Add(new OrdersDetails(code + 5, "BOLID", i + 4, "Switzerland"));
+ code += 5;
+ }
+ }
+ return order;
+ }
+
+ [Key]
+ public int OrderID { get; set; }
+ public string? CustomerID { get; set; }
+ public int? EmployeeID { get; set; }
+ public string? ShipCountry { get; set; }
+ }
+}
+
+```
+
+### Step 4: OData service configuration
+
+To construct the Entity Data Model for your OData service, use the `ODataConventionModelBuilder` to define the model’s structure in the `Program.cs` file of the `ODataV4Adaptor` project. Start by creating an instance of the `ODataConventionModelBuilder`, and then register the entity set **Orders** using the `EntitySet` method, where `OrdersDetails` represents the CLR type containing order details.
+
+**Entity data model overview:**
+
+The EDM serves as a metadata blueprint describing the data structure exposed by the OData service. It defines available entities (data types), their properties, relationships, and query capabilities.
+
+```csharp
+// Create an ODataConventionModelBuilder to build the OData model.
+var modelBuilder = new ODataConventionModelBuilder();
+
+// Register the "Grid" entity set with the OData model builder.
+// "Grid" will be the name used in URLs (e.g., /odata/Grid).
+modelBuilder.EntitySet("Grid");
+```
+
+**Register the OData services**
+
+After building the Entity Data Model, register the OData services in the `Program.cs` file of your application. Follow these steps:
+
+```cs
+// Add controllers with OData support to the service collection.
+builder.Services.AddControllers().AddOData(
+ options => options
+ .Select() // Enables $select to choose specific fields.
+ .Filter() // Enables $filter for filtering data.
+ .OrderBy() // Enables $orderby for sorting.
+ .Expand() // Enables $expand for related data.
+ .Count() // Enables $count to get total record count.
+ .SetMaxTop(100) // Limits maximum records per request.
+ .AddRouteComponents("odata", modelBuilder.GetEdmModel())); // Maps routes with "odata" prefix.
+```
+
+**Configuration details:**
+- `AddControllers()`: Registers MVC controller services in the dependency injection container.
+- `AddOData()`: Integrates OData middleware and service infrastructure.
+- `.Select()`: Enables `$select` query option for column projection.
+- `.Filter()`: Enables `$filter` query option for data filtering.
+- `.OrderBy()`: Enables `$orderby` query option for result ordering.
+- `.Expand()`: Enables `$expand` query option for navigating related entities.
+- `.Count()`: Enables `$count` query option for total record count retrieval.
+- `.SetMaxTop(100)`: Establishes maximum record limit per request (prevents server overload).
+- `AddRouteComponents("odata", ...)`: Configures "odata" as the URL prefix for all OData endpoints.
+- `modelBuilder.GetEdmModel()`: Provides the previously constructed Entity Data Model.
+
+**Best practice:** Enable only required query options based on application requirements to optimize security and performance.
+
+**Complete Program.cs implementation:**
+
+The complete **Program.cs** file should resemble the following structure:
+
+```cs
+using Microsoft.AspNetCore.OData;
+using ODataV4Adaptor.Client.Models;
+using Microsoft.OData.ModelBuilder;
+
+var builder = WebApplication.CreateBuilder(args);
+
+// Build OData Model.
+var modelBuilder = new ODataConventionModelBuilder();
+modelBuilder.EntitySet("Grid");
+
+// Add services.
+builder.Services.AddControllers().AddOData(
+ options => options
+ .Select()
+ .Filter()
+ .OrderBy()
+ .Expand()
+ .Count()
+ .SetMaxTop(100)
+ .AddRouteComponents("odata", modelBuilder.GetEdmModel()));
+
+var app = builder.Build();
+
+// Configure middleware.
+if (app.Environment.IsDevelopment())
+{
+ app.UseWebAssemblyDebugging();
+}
+
+app.UseHttpsRedirection();
+app.UseCors();
+app.UseAuthorization();
+app.MapControllers();
+
+app.Run();
+
+```
+
+### Step 5: OData controller implementation
+
+Create an API controller (aka, **OrdersController.cs**) file under the **Controllers** folder within the `ODataV4Adaptor` project. This controller facilitates data communication with the Blazor components.
+
+```csharp
+
+using Microsoft.AspNetCore.Mvc;
+using Microsoft.AspNetCore.OData.Query;
+using ODataV4Adaptor.Models;
+
+namespace ODataV4Adaptor.Controllers
+{
+ [ApiController]
+ [Route("[controller]")]
+ public class GridController : ControllerBase
+ {
+ ///
+ /// Retrieves all records available from the data source.
+ ///
+ ///
+ /// Returns list of records.
+ ///
+ [HttpGet]
+ [EnableQuery]
+ public IActionResult Get()
+ {
+ var data = OrdersDetails.GetAllRecords().AsQueryable();
+ return Ok(data);
+ }
+ }
+}
+
+```
+**Implementation analysis:**
+- Inheritance from `ODataController`: Provides OData-specific controller capabilities and conventions.
+- Routing configuration: OData routing handled automatically via Program.cs configuration; `[Route]` attribute unnecessary.
+- Controller behavior: ODataController inherits functionality similar to `[ApiController]` attribute.
+- `[HttpGet]`: Designates method to handle HTTP GET requests.
+- `[EnableQuery]`: **Essential attribute** - enables OData query processing for `$filter`, `$orderby`, `$select`, and other query options.
+- `AsQueryable()`: Converts collection to IQueryable interface, enabling deferred execution and OData query composition.
+- `Ok(data)`: Returns HTTP 200 (OK) status with serialized data payload.
+
+> The `[EnableQuery]` attribute is mandatory for OData query functionality. Without this attribute, manual implementation of filtering, sorting, pagination, and projection logic would be required.
+
+### Step 6: Register controllers in `Program.cs`**
+
+Add the following lines in the `Program.cs` file under the `ODataV4Adaptor` project to register controllers:
+
+```csharp
+// Register controllers in the service container.
+builder.Services.AddControllers();
+
+// Map controller routes.
+app.MapControllers();
+```
+
+### Step 7: OData service verification
+
+Run the application in Visual Studio. It will be hosted at the URL **https://localhost:xxxx**.
+
+**OData endpoint verification:** After running the application, you can verify that the server-side API controller successfully returns the order data at the URL **https://localhost:xxxx/odata/Grid** (where **xxxx** represents the port number).
+
+Test the following URLs to verify OData query functionality:
+
+- **Get all orders**: `https://localhost:xxxx/odata/Grid`
+- **Get top 5 orders**: `https://localhost:xxxx/odata/Grid?$top=5`
+- **Filter by country**: `https://localhost:xxxx/odata/Grid?$filter=ShipCountry eq 'Denmark'`
+- **Sort by OrderID**: `https://localhost:xxxx/odata/Grid?$orderby=OrderID desc`
+- **Count records**: `https://localhost:xxxx/odata/Grid/$count`
+- **Select specific columns**: `https://localhost:xxxx/odata/Grid?$select=OrderID,CustomerID`
+
+Examples of OData query syntax references:
+
+| Query Option | Purpose | Example |
+|--------------|---------|---------|
+| `$top=5` | Get first 5 records | `?$top=5` |
+| `$skip=10` | Skip first 10 records | `?$skip=10` |
+| `$filter=` | Filter records | `?$filter=OrderID gt 10005` |
+| `$orderby=` | Sort records | `?$orderby=CustomerID desc` |
+| `$select=` | Choose specific fields | `?$select=OrderID,CustomerID` |
+| `$count` | Get total count | `/$count` or `?$count=true` |
+
+OData filter operator query reference:
+- `eq` - equals: `ShipCountry eq 'Denmark'`
+- `ne` - not equals: `ShipCountry ne 'Denmark'`
+- `gt` - greater than: `OrderID gt 10005`
+- `lt` - less than: `OrderID lt 10010`
+- `and` - logical AND: `ShipCountry eq 'Denmark' and OrderID gt 10005`
+- `or` - logical OR: `ShipCountry eq 'Denmark' or ShipCountry eq 'Germany'`
+
+### Step 8: Understanding the required response format
+
+When using the `OdataV4Adaptor`, every backend API endpoint must return data in a specific JSON structure. This ensures that Syncfusion® Blazor DataManager can correctly interpret the response and bind it to the component. The expected format is:
+
+```json
+{
+ "value": [
+ { "OrderID": 10001, "CustomerID": "ALFKI", "ShipCity": "Berlin" },
+ { "OrderID": 10002, "CustomerID": "ANATR", "ShipCity": "Madrid" },
+ ...
+ ],
+ "@odata.count": 10
+}
+```
+
+- **value**: Returns the data records for the current page/request displayed in the UI.
+- **@odata.count**: Indicates the total number of records in the dataset, enabling accurate pagination.
+
+## Troubleshooting common issues
+
+### 404 not found
+
+**Symptom:** Network tab displays 404 error on OData endpoint.
+
+**Solutions:**
+- Verify port number matches the server configuration.
+- Confirm URL includes "odata" prefix: `/odata/Orders`.
+- Ensure controller name matches entity set name.
+- Verify server is running.
+
+### Checklist for common OData errors
+
+If errors occur, verify the following:
+
+ - `Microsoft.AspNetCore.OData` NuGet package installation.
+ - `[EnableQuery]` attribute applied to **Get** method.
+ - Correct "odata" prefix inclusion in route configuration.
+
+## Integration with Syncfusion® Blazor components
+
+To integrate the Syncfusion® Blazor components with the `ODataV4Adaptor`, refer to the documentation below:
+
+- [DataGrid](https://blazor.syncfusion.com/documentation/datagrid/connecting-to-adaptors/odatav4-adaptor)
+
+
diff --git a/blazor/data/adaptors/url-adaptor.md b/blazor/data/adaptors/url-adaptor.md
new file mode 100644
index 0000000000..af40540fb3
--- /dev/null
+++ b/blazor/data/adaptors/url-adaptor.md
@@ -0,0 +1,259 @@
+---
+layout: post
+title: Blazor DataManager - URL Adaptor | Syncfusion
+description: Blazor DataManager UrlAdaptor enables server-side integration with REST APIs, detailing backend setup and endpoint configuration for data operations.
+platform: Blazor
+control: Url Adaptor
+documentation: ug
+---
+
+# Custom REST API Remote Data Binding in Syncfusion Blazor Components
+
+The `UrlAdaptor` in Syncfusion® Blazor DataGrid provides a straightforward way to connect the DataGrid to custom REST API endpoints. It acts as the communication layer that controls how requests are sent and how responses are received. By organizing this interaction, it ensures reliable and efficient data handling across different Syncfusion® Blazor components, regardless of the server setup.
+
+The adaptor automatically transforms component actions such as filtering, sorting, paging, and CRUD into HTTP POST requests. The server returns JSON data, which the `SfDataManager` processes and supplies back to the component. This mechanism enables reliable and efficient remote data binding without custom request handling.
+
+This documentation outlines the complete process for configuring the `UrlAdaptor` by detailing the backend API setup and the server‑side endpoints required to support data operations.
+
+## Why use UrlAdaptor?
+
+The `UrlAdaptor` works **any custom REST API** (no OData or GraphQL required). Benefits include:
+
+1. **Backend agnostic**: Works with any backend technology.
+2. **Server-side processing**: Enables efficient handling of large datasets by running operations on the server.
+3. **Automatic requests**: Client-side actions generate structured HTTP requests automatically.
+4. **Full CRUD support**: Manage insert, update and delete operations are supported out of the box.
+5. **Extensible**: Easy to add authentication, caching, or custom request/response transformations.
+
+## Who should use UrlAdaptor?
+
+The `UrlAdaptor` is designed for projects that rely on custom REST APIs and need flexible communication between Syncfusion® Blazor components and backend services. It is most relevant for applications where standard protocols like OData or GraphQL are not part of the design, and where direct control over request and response handling is required.
+
+It is particularly useful in scenarios such as:
+
+- Custom REST API implementations that expose endpoints in JSON format.
+- Large-scale datasets (100K+ records) requiring server-side execution of operations like filtering, sorting, and paging for performance and scalability.
+- Integration with existing backend services where APIs are already defined and must be connected without redesign.
+- CRUD operations with custom validation involving business rules, authentication, or transformation logic.
+- Extensible architectures that need additional features such as caching, security headers, or custom request/response transformations.
+
+## Supported Databases
+
+The `UrlAdaptor` is **completely backend-agnostic**. It connects to any database through a REST API that returns the required JSON format. Commonly integrated databases include:
+
+| Database | Use Case | Notes |
+|----------|----------|-------|
+| **SQL Server** | Enterprise applications | Robust querying, stored procedures support |
+| **MySQL** | Web applications | Open-source, high performance |
+| **PostgreSQL** | Complex data models | Advanced features, JSON support |
+| **SQLite** | Embedded applications | Lightweight, serverless |
+| **MongoDB** | Document databases | NoSQL, flexible schema |
+| **Oracle** | Enterprise systems | High scalability, reliability |
+| **Azure SQL Database** | Cloud applications | Managed service, auto-scaling |
+
+> The `UrlAdaptor` is **backend-agnostic**. Compatibility exists with any technology stack that:
+> 1. Accepts HTTP POST requests with JSON body.
+> 2. Parses request parameters (filters, sorts, page info).
+> 3. Returns data in the required `{result, count}` format.
+
+## Prerequisites
+
+Ensure the following software and packages are installed before proceeding:
+
+| Software/Package | Version | Purpose |
+|-----------------|---------|---------|
+| Visual Studio 2026 | 18.0 or later | Development IDE with Blazor workload |
+| .NET SDK | net8.0 or compatible | Runtime and build tools |
+
+## Backend setup (Creating an API Service)
+
+To configure a server with the Syncfusion® Blazor components, follow these steps:
+
+### Step 1: Create a Blazor web app
+
+You can create a **Blazor Web App** named **URLAdaptor** using Visual Studio 2022, either via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). Make sure to configure the appropriate [interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-8.0#render-modes) and [interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=windows).
+
+### Step 2: Create data model class
+
+1. In Solution Explorer, right-click the **Server** project, choose **Add** → **New Folder**, and name it **Models**.
+
+2. Right-click the **Models** folder, select **Add → Class**, name it **OrdersDetails.cs**, and replace its default content with the provided implementation.
+
+```csharp
+namespace URLAdaptor.Models
+{
+ public class OrdersDetails
+ {
+ public static List order = new List();
+
+ public OrdersDetails() { }
+
+ public OrdersDetails(int OrderID, string CustomerId, int EmployeeId, double Freight, bool Verified, DateTime OrderDate, string ShipCity, string ShipName, string ShipCountry, DateTime ShippedDate, string ShipAddress)
+ {
+ this.OrderID = OrderID;
+ this.CustomerID = CustomerId;
+ this.EmployeeID = EmployeeId;
+ this.Freight = Freight;
+ this.ShipCity = ShipCity;
+ this.Verified = Verified;
+ this.OrderDate = OrderDate;
+ this.ShipName = ShipName;
+ this.ShipCountry = ShipCountry;
+ this.ShippedDate = ShippedDate;
+ this.ShipAddress = ShipAddress;
+ }
+
+ public static List GetAllRecords()
+ {
+ if (order.Count() == 0)
+ {
+ int code = 10000;
+ for (int i = 1; i < 10; i++)
+ {
+ order.Add(new OrdersDetails(code + 1, "ALFKI", i + 0, 2.3 * i, false, new DateTime(1991, 05, 15), "Berlin", "Simons bistro", "Denmark", new DateTime(1996, 7, 16), "Kirchgasse 6"));
+ order.Add(new OrdersDetails(code + 2, "ANATR", i + 2, 3.3 * i, true, new DateTime(1990, 04, 04), "Madrid", "Queen Cozinha", "Brazil", new DateTime(1996, 9, 11), "Avda. Azteca 123"));
+ order.Add(new OrdersDetails(code + 3, "ANTON", i + 1, 4.3 * i, true, new DateTime(1957, 11, 30), "Cholchester", "Frankenversand", "Germany", new DateTime(1996, 10, 7), "Carrera 52 con Ave. Bolívar #65-98 Llano Largo"));
+ order.Add(new OrdersDetails(code + 4, "BLONP", i + 3, 5.3 * i, false, new DateTime(1930, 10, 22), "Marseille", "Ernst Handel", "Austria", new DateTime(1996, 12, 30), "Magazinweg 7"));
+ order.Add(new OrdersDetails(code + 5, "BOLID", i + 4, 6.3 * i, true, new DateTime(1953, 02, 18), "Tsawassen", "Hanari Carnes", "Switzerland", new DateTime(1997, 12, 3), "1029 - 12th Ave. S."));
+ code += 5;
+ }
+ }
+ return order;
+ }
+
+ public int? OrderID { get; set; }
+ public string? CustomerID { get; set; }
+ public int? EmployeeID { get; set; }
+ public double? Freight { get; set; }
+ public string? ShipCity { get; set; }
+ public bool? Verified { get; set; }
+ public DateTime OrderDate { get; set; }
+ public string? ShipName { get; set; }
+ public string? ShipCountry { get; set; }
+ public DateTime ShippedDate { get; set; }
+ public string? ShipAddress { get; set; }
+ }
+}
+```
+> This example uses a static in-memory list (`order`) for simplicity. In real applications, replace `GetAllRecords()` with database queries using Entity Framework Core, Dapper, or the preferred data access layer.
+
+### Step 3: Create an API controller
+
+Create an API controller (aka, **DataController.cs**) file under **Controllers** folder that helps to establish data communication with the Blazor Components.
+
+```csharp
+
+using Microsoft.AspNetCore.Mvc;
+using Syncfusion.Blazor.Data;
+using Syncfusion.Blazor;
+using URLAdaptor.Models;
+
+namespace URLAdaptor.Controllers
+{
+ [Route("api/[controller]")]
+ [ApiController]
+ public class DataController : ControllerBase
+ {
+ ///
+ /// Retrieves the list of orders.
+ ///
+ /// Retrieve data from the data source.
+ [HttpGet]
+ public List GetOrderData()
+ {
+ return OrdersDetails.GetAllRecords().ToList();
+ }
+
+ ///
+ /// Handles server-side data operations such as filtering, sorting, paging, and returns the processed data.
+ ///
+ /// Returns the data and total count in result and count format.
+ [HttpPost]
+ [Route("api/[controller]")]
+ public object Post([FromBody] DataManagerRequest DataManagerRequest)
+ {
+ // Retrieve data source and convert to queryable.(replace with the database query).
+ IQueryable DataSource = GetOrderData().AsQueryable();
+
+ // Get total records count BEFORE paging.
+ int totalRecordsCount = DataSource.Count();
+ // Apply server-side operations here (will be added later).
+ // For now, return all data with count.
+
+ // Return in {result, count} format (see Step 7 for details).
+ return new { result = DataSource, count = totalRecordsCount };
+ }
+ }
+}
+
+```
+
+> The server response must include `result` for the current data and `count` for the total records to enable proper pagination.
+
+**Key Points:**
+- **[FromBody] DataManagerRequest**: This parameter receives all operation details (filters, sorts, page info).
+- **IQueryable<OrdersDetails>**: Use `IQueryable` for efficient database queries.
+- **result**: Returns the data records for the current page/request displayed in the UI.
+- **count**: Must be total count before paging (not just current page count).
+- **HttpPost**: Client sends `POST` requests by default for data operations.
+
+### Step 4: Register controllers in `Program.cs`
+
+The `Program.cs` file is where application services are registered and configured. Add the following lines in the `Program.cs` file to register controllers:
+
+```csharp
+// Register controllers in the service container.
+builder.Services.AddControllers();
+
+// Map controller routes.
+app.MapControllers();
+
+```
+**Explanation:**
+
+- `AddControllers()` registers MVC controllers for REST endpoints.
+- `MapControllers()` exposes routes like `/api/Grid`.
+- Syncfusion Blazor and Razor components are registered for the UI.
+
+### Step 5: Test the backend API
+
+Run the application in Visual Studio, accessible on a URL like **https://localhost:xxxx**. Verify the API returns order data at **https://localhost:xxxx/api/data**, where **xxxx** is the port.
+
+### Step 6: Understanding the required response format
+
+When using the `UrlAdaptor`, every backend API endpoint must return data in a specific JSON structure. This ensures that Syncfusion® Blazor DataManager can correctly interpret the response and bind it to the component. The expected format is:
+
+```json
+{
+ "result": [
+ { "OrderID": 10001, "CustomerID": "ALFKI", "ShipCity": "Berlin" },
+ { "OrderID": 10002, "CustomerID": "ANATR", "ShipCity": "Madrid" },
+ ...
+ ...
+ ],
+ "count": 10
+}
+```
+
+- **result**: Returns the data records for the current page/request displayed in the UI.
+- **count**: Indicates the total number of records in the dataset, enabling accurate pagination.
+
+> * Without the `count` field, paging and virtual scrolling cannot function correctly.
+> * APIs returning just an array `[{...}, {...}]` instead of `{result: [...], count: ...}` will prevent proper data display. Responses must wrap in the required structure.
+
+## Troubleshooting
+
+| Issue | Resolution |
+|-------------------|-----------------------------------------------------------------------------|
+| **Empty response** | Check if "GetAllRecords()" is populating data. |
+| **404 Error** | Verify controller route is `[Route("api/[controller]")]`. |
+| **500 Error** | Check server logs in the Visual Studio Output window. |
+
+## Integration with Syncfusion® Blazor components
+
+To integrate the Syncfusion® Blazor components with the `UrlAdaptor`, refer to the documentation below:
+
+- [DataGrid](https://blazor.syncfusion.com/documentation/datagrid/connecting-to-adaptors/url-adaptor)
+
+
+
diff --git a/blazor/data/adaptors/web-api-adaptor.md b/blazor/data/adaptors/web-api-adaptor.md
new file mode 100644
index 0000000000..66e6453e67
--- /dev/null
+++ b/blazor/data/adaptors/web-api-adaptor.md
@@ -0,0 +1,234 @@
+---
+layout: post
+title: Blazor DataManager - WebApiAdaptor | Syncfusion
+description: Blazor DataManager WebApiAdaptor enables server-side integration with REST APIs, detailing backend setup and endpoint configuration for data operations.
+platform: Blazor
+control: Adaptors
+documentation: ug
+---
+
+# WebApiAdaptor Remote Data Binding in Syncfusion Blazor Components
+
+The `WebApiAdaptor` extends the `ODataAdaptor` and is specifically designed to interact with Web APIs that support OData query conventions. It facilitates seamless communication with Web API endpoints, enabling efficient data operations while ensuring compatibility with standard Web API architecture.
+
+The `WebApiAdaptor` is used to interact with Web API endpoints that support **OData query options**. It extends the functionality of the **ODataAdaptor**, enabling the [SfDataManager](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Data.SfDataManager.html) to send OData-formatted queries and process responses from Web API services. Use this adaptor when the endpoint understands **OData** queries and returns data in a compatible format.
+
+## WebApiAdaptor vs ODataV4Adaptor
+
+While both adaptors work with OData-style queries, they have distinct use cases:
+
+| Feature | WebApiAdaptor | ODataV4Adaptor |
+|---------|---------------|----------------|
+| **Server type** | ASP.NET Web API with custom handling. | Full OData V4 service. |
+| **Query format** | OData query strings. | Standard OData V4 protocol. |
+| **Response format** | Custom: `{ Items: [], Count: number }` | Standard OData: `{ value: [], @odata.count: number }` |
+| **Server control** | Full control over query processing. | Framework handles queries automatically. |
+| **Use case** | Existing Web APIs with custom logic. | Standard OData V4 services. |
+
+This section describes a step-by-step process for retrieving data using the `WebApiAdaptor` and binding it to the Blazor components provides full control over server‑side query processing, allows flexible response formatting and custom business logic implementation, and supports OData‑style query syntax without requiring the full OData infrastructure.
+
+## Prerequisites
+
+Ensure the following software and packages are installed before proceeding:
+
+| Software/Package | Version | Purpose |
+|-----------------|---------|---------|
+| Visual Studio 2026 | 18.0 or later | Development IDE with Blazor workload |
+| .NET SDK | net8.0 or compatible | Runtime and build tools |
+
+## Backend setup (Creating an API service)
+
+To configure a server with the Syncfusion® Blazor components, follow these steps:
+
+### Step 1: Create a Blazor web app
+
+You can create a **Blazor Web App** named **WebApiAdaptor** using Visual Studio 2022, either via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). Make sure to configure the appropriate [interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-8.0#render-modes) and [interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=windows).
+
+### Step 2: Create a model class
+
+1. In Solution Explorer, right-click the **Server** project, choose **Add** → **New Folder**, and name it **Models**.
+
+2. Right-click the **Models** folder, select **Add → Class**, name it **OrdersDetails.cs**, and replace its default content with the provided implementation.
+
+```csharp
+
+namespace WebApiAdaptor.Models
+{
+ public class OrdersDetails
+ {
+ public static List order = new List();
+
+ public OrdersDetails() { }
+
+ public OrdersDetails(int OrderID, string CustomerId, int EmployeeId, double Freight, bool Verified, DateTime OrderDate, string ShipCity, string ShipName, string ShipCountry, DateTime ShippedDate, string ShipAddress)
+ {
+ this.OrderID = OrderID;
+ this.CustomerID = CustomerId;
+ this.EmployeeID = EmployeeId;
+ this.Freight = Freight;
+ this.ShipCity = ShipCity;
+ this.Verified = Verified;
+ this.OrderDate = OrderDate;
+ this.ShipName = ShipName;
+ this.ShipCountry = ShipCountry;
+ this.ShippedDate = ShippedDate;
+ this.ShipAddress = ShipAddress;
+ }
+
+ public static List GetAllRecords()
+ {
+ if (order.Count() == 0)
+ {
+ int code = 10000;
+ for (int i = 1; i < 10; i++)
+ {
+ order.Add(new OrdersDetails(code + 1, "ALFKI", i + 0, 2.3 * i, false, new DateTime(1991, 05, 15), "Berlin", "Simons bistro", "Denmark", new DateTime(1996, 7, 16), "Kirchgasse 6"));
+ order.Add(new OrdersDetails(code + 2, "ANATR", i + 2, 3.3 * i, true, new DateTime(1990, 04, 04), "Madrid", "Queen Cozinha", "Brazil", new DateTime(1996, 9, 11), "Avda. Azteca 123"));
+ order.Add(new OrdersDetails(code + 3, "ANTON", i + 1, 4.3 * i, true, new DateTime(1957, 11, 30), "Cholchester", "Frankenversand", "Germany", new DateTime(1996, 10, 7), "Carrera 52 con Ave. Bolívar #65-98 Llano Largo"));
+ order.Add(new OrdersDetails(code + 4, "BLONP", i + 3, 5.3 * i, false, new DateTime(1930, 10, 22), "Marseille", "Ernst Handel", "Austria", new DateTime(1996, 12, 30), "Magazinweg 7"));
+ order.Add(new OrdersDetails(code + 5, "BOLID", i + 4, 6.3 * i, true, new DateTime(1953, 02, 18), "Tsawassen", "Hanari Carnes", "Switzerland", new DateTime(1997, 12, 3), "1029 - 12th Ave. S."));
+ code += 5;
+ }
+ }
+ return order;
+ }
+
+ public int? OrderID { get; set; }
+ public string? CustomerID { get; set; }
+ public int? EmployeeID { get; set; }
+ public double? Freight { get; set; }
+ public string? ShipCity { get; set; }
+ public bool? Verified { get; set; }
+ public DateTime OrderDate { get; set; }
+ public string? ShipName { get; set; }
+ public string? ShipCountry { get; set; }
+ public DateTime ShippedDate { get; set; }
+ public string? ShipAddress { get; set; }
+ }
+}
+```
+### Step 3: Web API controller configuration
+
+Create a new folder named **Controllers**. Then, add a controller named **OrdersController.cs** in the **Controllers** folder to handle data communication with Blazor Components. Implement the `Get` method in the controller to return data in JSON format, including the `Items` and `Count` properties as required by the `WebApiAdaptor`.
+
+The sample response object should look like this:
+
+```
+{
+ Items: [{..}, {..}, {..}, ...],
+ Count: 830
+}
+```
+
+{% tabs %}
+{% highlight c# tabtitle="GridController.cs" %}
+
+using Microsoft.AspNetCore.Mvc;
+using Syncfusion.Blazor.Data;
+using Syncfusion.Blazor;
+using WebApiAdaptor.Models;
+
+namespace WebApiAdaptor.Controllers
+{
+ [ApiController]
+ public class OrdersController : ControllerBase
+ {
+ ///
+ /// Retrieve data from the data source.
+ ///
+ /// Returns a JSON object with the list of orders and the total count.
+ [HttpGet]
+ [Route("api/[controller]")]
+ public object GetOrderData()
+ {
+ // Retrieve all order records.
+ List data = OrdersDetails.GetAllRecords().ToList();
+
+ // Return the data and total count.
+ return new { Items = data, Count = data.Count() };
+ }
+ }
+}
+
+{% endhighlight %}
+{% endtabs %}
+
+**Key Points:**
+
+- **[Route("api/[controller]")]**: Defines API endpoint as `/api/Orders`.
+- **[ApiController]**: Enables automatic model validation and routing features.
+- **Response format**: Returns object with two properties:
+ - `Items`: Array of order records.
+ - `Count`: Total number of records (required for pagination).
+- **Why this format?**: WebApiAdaptor expects `{ Items, Count }` structure, unlike OData which uses `{ value, @odata.count }`.
+
+> When using the WebAPI Adaptor, the data source is returned as a pair of **Items** and **Count**. However, if the `Offline` property of `SfDataManager` is enabled, the entire data source is returned from the server as a collection of objects. In this case, the `$inlinecount` will not be included. Additionally, only a single request is made to fetch all the data from the server, and no further requests are sent.
+
+### Step 4: Register controllers in `Program.cs`
+
+Add the following lines in the `Program.cs` file to register controllers:
+
+```csharp
+// Register controllers in the service container.
+builder.Services.AddControllers();
+
+// Map controller routes.
+app.MapControllers();
+```
+
+### Step 5: Web API service verification
+
+Run the application in Visual Studio, accessible on a URL like **https://localhost:xxxx**. Verify the API returns order data at **https://localhost:xxxx/api/Orders**, where **xxxx** is the port.
+
+**Example response:**
+```json
+{
+ "Items": [
+ {
+ "orderID": 10001,
+ "customerID": "ALFKI",
+ "employeeID": 1,
+ "freight": 2.3,
+ "shipCity": "Berlin",
+ "verified": false,
+ "orderDate": "1991-05-15T00:00:00",
+ "shipName": "Simons bistro",
+ "shipCountry": "Denmark",
+ "shippedDate": "1996-07-16T00:00:00",
+ "shipAddress": "Kirchgasse 6"
+ }
+ // ... more records
+ ],
+ "count": 45
+}
+```
+
+
+### Step 6: Understanding the required response format
+
+When using the `WebApiAdaptor`, every backend API endpoint must return data in a specific JSON structure. This ensures that Syncfusion® Blazor DataManager can correctly interpret the response and bind it to the component. The expected format is:
+
+
+```json
+{
+ "Items": [
+ { "OrderID": 10001, "CustomerID": "ALFKI", "ShipCity": "Berlin" },
+ { "OrderID": 10002, "CustomerID": "ANATR", "ShipCity": "Madrid" },
+ ...
+ ],
+ "Count": 10
+}
+```
+
+- **Items**: Returns the data records for the current page/request displayed in the UI.
+- **Count**: Indicates the total number of records in the dataset, enabling accurate pagination.
+
+> * Without the `Count` field, paging and virtual scrolling cannot function correctly.
+> * APIs returning just an array `[{...}, {...}]` instead of `{Items: [...], Count: ...}` will prevent proper data display. Responses must wrap in the required structure.
+
+## Integration with Syncfusion® Blazor components
+
+To integrate the Syncfusion® Blazor components with the `WebApiAdaptor`, refer to the documentation below:
+
+- [DataGrid](https://blazor.syncfusion.com/documentation/datagrid/connecting-to-adaptors/web-api-adaptor)
+
diff --git a/blazor/data/how-to/adding-custom-headers.md b/blazor/data/how-to/adding-custom-headers.md
index 144fd7a126..a008517007 100644
--- a/blazor/data/how-to/adding-custom-headers.md
+++ b/blazor/data/how-to/adding-custom-headers.md
@@ -11,13 +11,13 @@ documentation: ug
# Adding Custom Headers in Blazor DataManager
-The Syncfusion® Blazor [DataManager](https://blazor.syncfusion.com/documentation/data/getting-started-with-web-app) component supports adding **custom HTTP headers** to all outbound requests. This feature is essential when requests require additional metadata, such as **authentication tokens**, **tenant identifiers**, or **localization details**.
+The Syncfusion® Blazor DataManager supports adding **custom HTTP headers** to all outbound requests. This feature is essential when requests require additional metadata, such as **authentication tokens**, **API keys**, **session identifiers**, or any other metadata required by the server to validate and process the request correctly.
-The [Headers](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataManager.html#Syncfusion_Blazor_DataManager_Headers) property is used to configure these headers by assigning **key–value** pairs through an **IDictionary** collection. Each request automatically includes the specified headers, enabling secure and context-aware communication without repetitive code.
+The [Headers](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataManager.html#Syncfusion_Blazor_DataManager_Headers) property is used to configure these headers by assigning **key–value** pairs through an **IDictionary** collection, enabling secure and flexible communication between the client application and the server. Each request automatically includes the specified headers, enabling secure and context-aware communication without repetitive code. This feature is particularly useful when requests must carry additional information for authentication, authorization, or contextual processing.
**Key Capabilities**
-Use the `Headers` property to add custom HTTP headers to requests made by [SfDataManager](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Data.SfDataManager.html). This includes sending authentication details such as a **Bearer token**.
+Use the `Headers` property to add custom HTTP headers to requests made by [SfDataManager](https://blazor.syncfusion.com/documentation/data/getting-started-with-web-app). This includes sending authentication details such as a **Bearer token**.
* **Adaptor Support**
@@ -27,10 +27,6 @@ Use the `Headers` property to add custom HTTP headers to requests made by [SfDat
Headers are included when `DataManager` connects to components such as [SfGrid](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html), [SfChart](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SfChart.html), or [SfListView](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Lists.SfListView-1.html).
-* **Dynamic Updates**
-
- Modify headers at runtime for scenarios like **token refresh** or **context changes**.
-
* **Secure Transmission**
Sensitive data such as **tokens** and **identifiers** remain in headers, reducing payload size and improving security.
diff --git a/blazor/data/how-to/offline-mode.md b/blazor/data/how-to/offline-mode.md
index 3077039753..bd25f59c8b 100644
--- a/blazor/data/how-to/offline-mode.md
+++ b/blazor/data/how-to/offline-mode.md
@@ -9,20 +9,20 @@ documentation: ug
-# Working in Offline Mode in Blazor DataManager Component
+# Working in Offline Mode in Blazor DataManager
-The Syncfusion® Blazor DataManager component provides **offline mode** to execute query operations on the client without additional server requests. When data is sourced from a remote service, enabling offline mode retrieves the complete collection during initialization and processes all subsequent operations locally. The cached data is maintained in the **Json** property.
+The Syncfusion® Blazor DataManager provides **offline mode** to execute query operations on the client without additional server requests. When data is sourced from a remote service, enabling offline mode retrieves the complete collection during initialization and processes all subsequent operations locally. The cached data is maintained in the **Json** property.
-To enable offline mode, set the [Offline](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataManager.html#Syncfusion_Blazor_DataManager_Offline) property to **true** on the [SfDataManager](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Data.SfDataManager.html) component.
+To enable offline mode, set the [Offline](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataManager.html#Syncfusion_Blazor_DataManager_Offline) property to **true** on the [SfDataManager](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Data.SfDataManager.html).
## Key benefits of offline mode
-Enabling the `Offline` property modifies the behavior of the `DataManager` component in the following ways:
+Enabling the `Offline` property modifies the behavior of the `SfDataManager` in the following ways:
-- **Single data load** – Retrieves the complete collection during initialization without additional server requests.
-- **Client-side processing** – Executes **filtering**, **sorting**, **paging**, and **grouping** operations in the browser.
-- **Improved performance** – Minimizes **network traffic** and enhances responsiveness.
-- **Offline functionality** – Maintains query operations even when network connectivity is unavailable.
+- **One-time data retrieval** – Retrieves the complete collection during initialization without additional server requests.
+- **Client-side processing** – Handles **filtering**, **sorting**, **paging**, and **grouping** operations in the browser.
+- **Improved performance** – Minimizes **network usage** and enhances responsiveness.
+- **Offline functionality** – Continues to process queries even when the application is disconnected from the network.
- **Adaptor compatibility** – Supports **OData**, **Web API**, and **URL adaptors** without requiring extra configuration.
```cshtml
@@ -49,5 +49,21 @@ Enabling the `Offline` property modifies the behavior of the `DataManager` compo
}
}
```
+N> Ensure that the remote endpoint returns the full data collection when the `Offline` property is enabled.
-N> Ensure that the remote endpoint returns the full data collection when the `Offline` property is enabled.
\ No newline at end of file
+## When to use Offline mode
+
+Offline mode is most effective when:
+
+- The dataset is moderately sized and can be loaded during initialization.
+- Data does not change frequently, reducing the risk of stale results.
+- Client-side query processing provides a performance advantage.
+
+## When to avoid Offline mode
+
+Offline mode should be avoided in scenarios such as:
+
+- Large datasets: Loading all records at once may cause performance issues in the browser.
+- Frequently changing data: Cached data may become outdated quickly.
+- Real-time requirements: Applications that depend on live or streaming data need server-side queries.
+- Sensitive data: Storing all records on the client side may expose information unnecessarily.
\ No newline at end of file
diff --git a/blazor/data/images/web-api-adaptor-data.png b/blazor/data/images/web-api-adaptor-data.png
new file mode 100644
index 0000000000..b4c2695bf9
Binary files /dev/null and b/blazor/data/images/web-api-adaptor-data.png differ