From 958776f643f0dfb74bf0e52bc3b44321056ca5ab Mon Sep 17 00:00:00 2001 From: SadhanaBaskaran Date: Fri, 14 Nov 2025 22:02:02 +0530 Subject: [PATCH 1/3] 992668: Updated the UG content and samples for Adaptors in Blazor DataGrid --- .../connecting-to-adaptors/custom-adaptor.md | 168 ++++++----- .../connecting-to-adaptors/graphql-adaptor.md | 262 ++++++++++-------- .../connecting-to-adaptors/odatav4-adaptor.md | 116 ++++---- 3 files changed, 301 insertions(+), 245 deletions(-) diff --git a/blazor/datagrid/connecting-to-adaptors/custom-adaptor.md b/blazor/datagrid/connecting-to-adaptors/custom-adaptor.md index 0617e1667e..dde7ca554a 100644 --- a/blazor/datagrid/connecting-to-adaptors/custom-adaptor.md +++ b/blazor/datagrid/connecting-to-adaptors/custom-adaptor.md @@ -1,7 +1,7 @@ --- layout: post -title: Bind data and perform CRUD actions with CustomAdaptor in Syncfusion Blazor DataGrid -description: Learn all about Custom Binding in the Syncfusion Blazor DataGrid and much more. +title: Bind Data and Perform CRUD with Syncfusion Blazor DataGrid CustomAdaptor +description: Learn how to implement custom data binding and enable full CRUD operations using CustomAdaptor in the Syncfusion Blazor DataGrid for flexible data handling. platform: Blazor control: DataGrid keywords: adaptors, CustomAdaptor, custom adaptor, remotedata, custombinding, custom binding @@ -10,11 +10,15 @@ documentation: ug # Custom Binding in Blazor DataGrid -The [SfDataManager](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Data.SfDataManager.html) supports custom adaptors, enabling you to perform manual operations on the data. This feature is useful for implementing custom data binding and editing operations in the Syncfusion® Blazor DataGrid. +The Syncfusion® Blazor DataGrid supports custom data operations through the [CustomAdaptor](https://blazor.syncfusion.com/documentation/data/custom-binding) in the [SfDataManager](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Data.SfDataManager.html). This adaptor allows complete control over data handling by overriding methods in the [DataAdaptor](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataAdaptor.html) class. It is designed for scenarios where data operations such as **create**, **read**, **update**, and **delete** must be implemented manually or integrated with custom logic. -To implement custom data binding in the Grid, the **DataAdaptor** class is used. This abstract class serves as a base class for the custom adaptor. +The `CustomAdaptor` is ideal for applications that require: -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: +* Binding data from non-standard sources such as in-memory collections or custom APIs. +* Implementing advanced business logic for filtering, sorting, paging, or aggregation. +* Injecting services or repositories for data access using dependency injection. +* Handling complex transformations before displaying data in the DataGrid. +* Passing additional parameters (e.g., user roles, tokens) with each request for server-side processing. ```csharp public abstract class DataAdaptor @@ -70,15 +74,11 @@ public abstract class DataAdaptor } ``` -To learn more about **Custom Binding** in the Grid, watch this video: - {% youtube "youtube:https://www.youtube.com/watch?v=LmdUGJBUJqE" %} ## Data Binding -Custom data binding can be performed in the Syncfusion® Blazor DataGrid by providing a custom adaptor class and overriding the **Read** or **ReadAsync** method of the **DataAdaptor** abstract class. - -The following sample code demonstrates how to implement custom data binding using a custom adaptor: +Custom data binding in the Syncfusion® Blazor DataGrid is achieved by creating a custom adaptor class and overriding the [Read](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataAdaptor.html#Syncfusion_Blazor_DataAdaptor_Read_Syncfusion_Blazor_DataManagerRequest_System_String_) or [ReadAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataAdaptor.html#Syncfusion_Blazor_DataAdaptor_ReadAsync_Syncfusion_Blazor_DataManagerRequest_System_String_) method of the [DataAdaptor](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataAdaptor.html) abstract class. These methods handle data retrieval and apply operations such as **filtering**, **sorting**, **paging**, and **aggregation** before returning results to the grid. ```cshtml @using Syncfusion.Blazor @@ -176,28 +176,34 @@ The following sample code demonstrates how to implement custom data binding usin } ``` -> If the **DataManagerRequest.RequiresCounts** value is **true**, the `Read/ReadAsync` return value must be of type **DataResult** with properties **Result** (a collection of records) and **Count** (the total number of records). If the **DataManagerRequest.RequiresCounts** is **false**, simply return the collection of records. +* When [DataManagerRequest.RequiresCounts](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataManagerRequest.html#Syncfusion_Blazor_DataManagerRequest_RequiresCounts) is **true**, return a [DataResult](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Data.DataResult.html) object with: -The following image shows the custom-bound data displayed in the Grid: + * **Result** → collection of records. + * **Count** → total record count. -![Custom Binding in Grid](../images/blazor-datagrid-custom-binding.png) +* When **false**, return only the collection. +* If `Read` or `ReadAsync` is not overridden, the default read handler will process the request. -> If the `Read/ReadAsync` method is not overridden in the custom adaptor, it will be handled by the default read handler. +![Custom Binding in Grid](../images/blazor-datagrid-custom-binding.png) ## Inject Service into Custom Adaptor -If you want to inject a service into the Custom Adaptor and use it, you can achieve this as shown below. +Custom adaptors can use dependency injection to access services or repositories for data operations. This approach is useful when data must be retrieved from external sources such as APIs or databases. + +**Steps to Implement** -First, register the required services in the `Program.cs` file. Add the `OrderDataAccessLayer` as a singleton, and the `CustomAdaptor` and `ServiceClass` as scoped services. +**1. Register Services in Program.cs** ```csharp -// Registering services in the Program.cs file. builder.Services.AddSingleton(); builder.Services.AddScoped(); builder.Services.AddScoped(); ``` -The following sample code demonstrates how to inject a service into the Custom Adaptor and use it for data operations: +**2. Inject Service into the Custom Adaptor** + +* Use constructor injection to access the registered service. +* Perform data operations using the injected service. ```cshtml @using Syncfusion.Blazor.Data @@ -275,16 +281,23 @@ The following sample code demonstrates how to inject a service into the Custom A ## Custom Adaptor as a Component -A Custom Adaptor can be created as a component when the `DataAdaptor` class is extended from `OwningComponentBase`. You can create a Custom Adaptor using either of the two versions of the class: `DataAdaptor` or `DataAdaptor`. +A custom adaptor can be implemented as a Blazor component by extending **OwningComponentBase**. This approach allows the adaptor to leverage cascading values and scoped services, making it suitable for modular and reusable designs. + +**Key Benefits** + +* Access services directly through dependency injection. +* Encapsulate adaptor logic within a component for better maintainability. +* Support both [DataAdaptor](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataAdaptor.html) and [DataAdaptor<T>](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataAdaptor-1.html) versions for flexibility. -Ensure that your service is registered in the **Program.cs** file. +**Steps to Implement** + +1. Register required services in **Program.cs**: ```csharp -// Register the order service as scoped in the Program.cs file. builder.Services.AddScoped(); ``` -The following sample code demonstrates how to create a Custom Adaptor as a component: +2. Add the grid and configure [SfDataManager](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Data.SfDataManager.html) to use the custom adaptor component: ```cs @using Syncfusion.Blazor @@ -325,7 +338,7 @@ The following sample code demonstrates how to create a Custom Adaptor as a compo } ``` -The following sample code demonstrates `DataAdaptor` extended from `OwningComponentBase`. This provides a single service of type `T`, which can be accessed using the `Service` property. +3. Create a component that inherits from `DataAdaptor` for single-service access: ```csharp // CustomAdaptorComponent.razor @@ -392,7 +405,7 @@ The following sample code demonstrates `DataAdaptor` extended from `OwningCompon } ``` -The following sample code demonstrates `DataAdaptor` extended from `OwningComponentBase`. This allows you to request multiple services. +4. Create a component that inherits from `DataAdaptor` for multiple-service access: ```csharp // CustomAdaptorComponent.razor @@ -465,15 +478,37 @@ The following sample code demonstrates `DataAdaptor` extended from `OwningCompon } ``` -You can find the complete code in the [Github](https://github.com/SyncfusionExamples/Binding-data-from-remote-service-to-blazor-data-grid/tree/master/CustomAdaptor-as-component). +> The complete implementation is available on [GitHub repository](https://github.com/SyncfusionExamples/Binding-data-from-remote-service-to-blazor-data-grid/tree/master/CustomAdaptor-as-component). -## Handling searching operation +## Perform data operations in CustomAdaptor -When using a custom adaptor, the searching operation must be handled by overriding the `Read` or `ReadAsync` method of the `DataAdaptor` abstract class. The `DataManagerRequest` class provides Grid action details, including search criteria. +The Syncfusion® Blazor DataGrid supports client-side operations such as **searching**, **sorting**, **filtering**, **paging**, and **aggregating** when using a [CustomAdaptor](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Adaptors.html#Syncfusion_Blazor_Adaptors_CustomAdaptor). These operations are implemented by overriding the [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 of the [DataAdaptor](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataAdaptor.html) abstract class. -![Handling Searching in Custom Adaptor](../images/blazor-datagrid-searching-in-custom-adaptor.png) +The [DataManagerRequest](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataManagerRequest.html) object provides the necessary details for each operation, and 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** from `DataManagerRequest` to the data source based on the provided filters. + +* [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_) - Applies **filter** conditions from `DataManagerRequest` to the data source. Supports single and multiple column filtering. + +* [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__) - Applies **sort descriptors** from `DataManagerRequest` to the data source for ascending or descending order. + +* [PerformSkip](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataOperations.html#Syncfusion_Blazor_DataOperations_PerformSkip__1_System_Collections_Generic_IEnumerable___0__System_Int32_) - Applies **skip** value from `DataManagerRequest` to omit a defined number of records before returning results. + +* [PerformTake](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataOperations.html#Syncfusion_Blazor_DataOperations_PerformTake__1_System_Collections_Generic_IEnumerable___0__System_Int32_) - Applies **take** value from `DataManagerRequest` to retrieve a specified 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__) - Applies **aggregate** details from `DataManagerRequest` to the data source using the `DataUtil` class to calculate summary values such as **Sum**, **Average**, **Min**, and **Max**. + +These methods enable efficient client-side data handling in a custom adaptor implementation. + +N> To enable these operations, install the **Syncfusion.Blazor.Data** package using NuGet Package Manager in Visual Studio: + +(*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*). -The following sample code demonstrates how to implement the searching operation for custom-bound data: +### Handling searching operation + +[Searching](https://blazor.syncfusion.com/documentation/datagrid/searching) in a custom adaptor is implemented by overriding the `Read` or `ReadAsync` method of the `DataAdaptor` class. The `DataManagerRequest` object provides **search criteria**, which can be applied using the built-in [PerformSearching](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataOperations.html#Syncfusion_Blazor_DataOperations_PerformSearching__1_System_Linq_IQueryable___0__System_Collections_Generic_List_Syncfusion_Blazor_Data_SearchFilter__) method of the `DataOperations` class. + +![Handling Searching in Custom Adaptor](../images/blazor-datagrid-searching-in-custom-adaptor.png) ```cshtml @using Syncfusion.Blazor @@ -537,15 +572,11 @@ The following sample code demonstrates how to implement the searching operation ## Handling filtering operation -When using a custom adaptor, the filtering operation must be handled by overriding the `Read` or `ReadAsync` method of the `DataAdaptor` abstract class. The `DataManagerRequest` class provides Grid action details, as shown in the image below: +[Filtering](https://blazor.syncfusion.com/documentation/datagrid/filtering) in a custom adaptor is implemented by overriding the `Read` or `ReadAsync` method of the `DataAdaptor` class. The `DataManagerRequest` object provides **filter conditions**, which can be applied using the built-in [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_) method of the `DataOperations` class. ![Handling Filtering in Custom Adaptor](../images/blazor-datagrid-filtering-in-custom-adaptor.png) -Based on these Grid action details, a custom data source can be filtered using the built-in `PerformFiltering` method of the `DataOperations` class. - -> You can also use your own method to perform the filtering operation and bind the resultant data to the Grid. - -The following sample code demonstrates how to implement the filtering operation for custom-bound data: +> A custom method can also be used to perform filtering and bind the resultant data to the grid. ```cshtml @using Syncfusion.Blazor @@ -609,15 +640,11 @@ The following sample code demonstrates how to implement the filtering operation ## Handling sorting operation -When using a custom adaptor, the sorting operation must be handled by overriding the `Read` or `ReadAsync` method of the `DataAdaptor` abstract class. The `DataManagerRequest` class provides Grid action details, as shown in the image below: +[Sorting](https://blazor.syncfusion.com/documentation/datagrid/sorting) in a custom adaptor is implemented by overriding the `Read` or `ReadAsync` method of the `DataAdaptor` class. The `DataManagerRequest` object provides **sort descriptors**, which can be applied using the built-in [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__) method of the `DataOperations` class. ![Handling Sorting in Custom Adaptor](../images/blazor-datagrid-sorting-in-custom-adaptor.png) -Based on these Grid action details, a custom data source can be sorted using the built-in `PerformSorting` method of the `DataOperations` class. - -N> Alternatively, you can use your own method to perform the sorting operation and bind the resultant data to the Grid. - -The following sample code demonstrates how to implement the sorting operation for custom-bound data: +> A custom method can also be used to perform sorting and bind the resultant data to the grid. ```cshtml @using Syncfusion.Blazor @@ -681,12 +708,10 @@ The following sample code demonstrates how to implement the sorting operation fo ## Handling paging operation -When using a custom adaptor, the paging operation must be handled by overriding the `Read` or `ReadAsync` method of the `DataAdaptor` abstract class. The `DataManagerRequest` class provides Grid action details, including skip and take values for paging. +[Paging](https://blazor.syncfusion.com/documentation/datagrid/paging) in a custom adaptor is implemented by overriding the `Read` or `ReadAsync` method of the `DataAdaptor` class. The `DataManagerRequest` object provides paging details such as **Skip** and **Take** values, which can be applied using the built-in [PerformSkip](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataOperations.html#Syncfusion_Blazor_DataOperations_PerformSkip__1_System_Collections_Generic_IEnumerable___0__System_Int32_) and [PerformTake](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataOperations.html#Syncfusion_Blazor_DataOperations_PerformTake__1_System_Collections_Generic_IEnumerable___0__System_Int32_) methods of the `DataOperations` class. ![Handling Paging in Custom Adaptor](../images/blazor-datagrid-paging-in-custom-adaptor.png) -The following sample code demonstrates how to implement the paging operation for custom-bound data: - ```cshtml @using Syncfusion.Blazor @using Syncfusion.Blazor.Data @@ -753,9 +778,7 @@ The following sample code demonstrates how to implement the paging operation for ## Handling grouping operation -When using a Custom Adaptor, the grouping operation must be handled in the `Read` or `ReadAsync` method of the Custom Adaptor. - -The following sample code demonstrates how to implement the grouping operation for custom-bound data: +[Grouping](https://blazor.syncfusion.com/documentation/datagrid/grouping) in a custom adaptor is implemented by overriding the `Read` or `ReadAsync` method of the `DataAdaptor` class. The `DataManagerRequest` object provides **grouping details**, which can be applied using the built-in [Group](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Data.DataUtil.html#Syncfusion_Blazor_Data_DataUtil_Group__1_System_Collections_IEnumerable_System_String_System_Collections_Generic_List_Syncfusion_Blazor_Data_Aggregate__System_Int32_System_Collections_Generic_IDictionary_System_String_System_String__System_Boolean_System_Boolean_) method of the [DataUtil](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Data.DataUtil.html) class. ```cshtml @using Syncfusion.Blazor @@ -834,9 +857,7 @@ The following sample code demonstrates how to implement the grouping operation f ## Handling aggregates operation -When using a Custom Adaptor, aggregates must be handled in the `Read` or `ReadAsync` method of the Custom Adaptor. - -The following sample code demonstrates how to implement aggregates for custom-bound data: +[Aggregates](https://blazor.syncfusion.com/documentation/datagrid/aggregates) in a custom adaptor are implemented by overriding the `Read` or `ReadAsync` method of the `DataAdaptor` class. The `DataManagerRequest` object provides **aggregate details**, which can be applied using the built-in [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__) method of the [DataUtil](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Data.DataUtil.html) class. ```cshtml @using Syncfusion.Blazor.Grids @@ -953,20 +974,16 @@ The following sample code demonstrates how to implement aggregates for custom-bo } ``` -You can find the complete code in the [Github](https://github.com/SyncfusionExamples/Binding-data-from-remote-service-to-blazor-data-grid/tree/master/CustomAdaptor). +> The complete source code is available on [Github](https://github.com/SyncfusionExamples/Binding-data-from-remote-service-to-blazor-data-grid/tree/master/CustomAdaptor). ## Handling CRUD operations -The CRUD operations for custom-bound data in the Syncfusion® Blazor DataGrid can be implemented by overriding the following CRUD methods of the **DataAdaptor** abstract class: +CRUD operations for custom-bound data in the Syncfusion® Blazor DataGrid are implemented by overriding the following methods of the [DataAdaptor](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataAdaptor.html) class: -* **Insert/InsertAsync** -* **Remove/RemoveAsync** -* **Update/UpdateAsync** -* **BatchUpdate/BatchUpdateAsync** - -N> When using batch editing in the Grid, use the BatchUpdate/BatchUpdateAsync method to handle the corresponding CRUD operation. - -The following sample code demonstrates how to implement CRUD operations for custom-bound data: +* [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_) – Used to add new records to the data source. +* [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_) – Used to delete records from the data source. +* [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_) – Used to modify existing records in the data source. +* [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__) – Used for batch editing scenarios to handle multiple changes in a single request. ```cshtml @using Syncfusion.Blazor @@ -1098,30 +1115,29 @@ The following sample code demonstrates how to implement CRUD operations for cust } ``` -The following GIF demonstrates the CRUD operations on custom-bound data in the Grid: - ![Editing Custom Data in Grid](../images/blazor-datagrid-editing-custom-data.gif) -You can find the complete code in the [Github](https://github.com/SyncfusionExamples/Binding-data-from-remote-service-to-blazor-data-grid/tree/master/CustomAdaptor). - -> You can refer to the [Syncfusion® Blazor DataGrid](https://www.syncfusion.com/blazor-components/blazor-datagrid) feature tour page for its groundbreaking feature representations. You can also explore the [Syncfusion® Blazor DataGrid example](https://blazor.syncfusion.com/demos/datagrid/overview?theme=bootstrap5) to understand how to present and manipulate data. +> A complete implementation for custom adaptor CRUD operations in the [Github](https://github.com/SyncfusionExamples/Binding-data-from-remote-service-to-blazor-data-grid/tree/master/CustomAdaptor) repository. ## How to pass additional parameters to custom adaptor -The Syncfusion® Blazor DataGrid allows you to send custom parameters with each data request. This is particularly useful when you need to pass additional information (e.g., user role, token, or filters) to the server for enhanced processing logic. +The Syncfusion® Blazor DataGrid allows sending custom parameters with each data request. This is useful for scenarios where additional information such as user role, authentication token, or custom filters must be passed to the server for processing. -You can achieve this by using the [Query](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_Query) property of the grid along with the `AddParams` method of the `Query` class. +Custom parameters can be added using the [Query](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_Query) property of the [SfGrid](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html) along with the [AddParams](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Data.Query.html#Syncfusion_Blazor_Data_Query_AddParams_System_String_System_Object_) method of the `Query` class. To enable custom parameters in data requests for the Grid, follow these steps: -1. **Bind the Query Object to the Grid:** - Assign the initialized `Query` object to the DataGrid’s `Query` property. -2. **Initialize the Query Object:** - Create a new instance of the `Query` class and use the `AddParams` method to add your custom parameters. -3. **Access Parameters in the Custom Adaptor:** - In your custom adaptor, access the parameters via `Params` and use them as needed for server-side logic. +1. **Initialize the Query object** + + Create a new instance of the `Query` class and use the `AddParams` method to add custom parameters. -The following example demonstrates how to send additional parameters to the server. +2. **Bind the Query object to the Grid** + + Assign the initialized Query object to the DataGrid’s `Query` property. + +3. **Access parameters in the custom adaptor** + + In the custom adaptor, retrieve the parameters from the `Params` collection in the `DataManagerRequest` object and apply them as needed for server-side logic. ```cshtml @using Syncfusion.Blazor @@ -1224,4 +1240,6 @@ The following example demonstrates how to send additional parameters to the serv } ``` -![Passing Additional Parameters to Custom Adaptor in Blazor DataGrid](../images/custom-adaptor-params.png) \ No newline at end of file +![Passing Additional Parameters to Custom Adaptor in Blazor DataGrid](../images/custom-adaptor-params.png) + +N> Refer to the [Blazor DataGrid](https://www.syncfusion.com/blazor-components/blazor-datagrid) feature tour for a broad overview. Explore the [Blazor DataGrid example](https://blazor.syncfusion.com/demos/datagrid/overview?theme=bootstrap5) to understand data presentation and manipulation. \ No newline at end of file diff --git a/blazor/datagrid/connecting-to-adaptors/graphql-adaptor.md b/blazor/datagrid/connecting-to-adaptors/graphql-adaptor.md index 17535fe12f..542c094af1 100644 --- a/blazor/datagrid/connecting-to-adaptors/graphql-adaptor.md +++ b/blazor/datagrid/connecting-to-adaptors/graphql-adaptor.md @@ -9,21 +9,25 @@ documentation: ug # GraphQL Adaptor in Blazor DataGrid -GraphQL is a powerful query language for APIs, designed to provide a more efficient alternative to traditional REST APIs. It allows you to precisely fetch the data you need, reducing over-fetching and under-fetching of data. GraphQL provides a flexible and expressive syntax for querying, enabling clients to request only the specific data they require. +[GraphQL](https://blazor.syncfusion.com/documentation/data/adaptors#graphql-service-binding) is a query language for APIs that enables precise data retrieval, reducing issues such as over-fetching and under-fetching. It provides a flexible syntax for defining queries, allowing clients to request only the required fields. -Syncfusion’s Blazor DataGrid seamlessly integrates with GraphQL servers using the GraphQLAdaptor in the [SfDataManager](https://blazor.syncfusion.com/documentation/data/getting-started-with-web-app). This specialized adaptor simplifies the interaction between the Grid and GraphQL servers, allowing efficient data retrieval with support for various operations like CRUD (Create, Read, Update and Delete), paging, sorting, and filtering. +The Syncfusion® Blazor DataGrid integrates with `GraphQL` services through the [GraphQLAdaptor](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Adaptors.html#Syncfusion_Blazor_Adaptors_GraphQLAdaptor) in [SfDataManager](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Data.SfDataManager.html). -This section describes a step-by-step process for retrieving data from a GraphQL service using GraphQLAdaptor, then binding it to the Grid to facilitate data and CRUD operations. +The following guide explains how to: + +* Configure a `GraphQL` server with [Hot Chocolate](https://chillicream.com/docs/hotchocolate/v14) +* Connect the Blazor DataGrid to the server +* Perform data operations, including **paging**, **sorting**, **filtering**, **searching**, and **CRUD** actions. ## Configure a GraphQL server -To configure a GraphQL server using Hot Chocolate with the Syncfusion® Blazor DataGrid, follow these steps: +To set up a `GraphQL` server using **Hot Chocolate** for integration with the Syncfusion® Blazor DataGrid, follow these steps: -**Step 1: Create a new ASP.NET Core application** +**Step 1: Create an ASP.NET Core application** -- Open Visual Studio and select **Create a new project**. -- Choose **ASP.NET Core Web App** and name the project `GraphQLServer`. -- Alternatively, you can use a terminal or command prompt to create the project: +- In Visual Studio, select **Create a new project** and choose **ASP.NET Core Web App**. +- Name the project **GraphQLServer**. +- Alternatively, use the .NET CLI: ```bash dotnet new web -n GraphQLServer ``` @@ -32,13 +36,11 @@ To configure a GraphQL server using Hot Chocolate with the Syncfusion® Blazor DataGrid and returns the required data along with the total record count. + +The **resolver** method accepts an instance of [DataManagerRequestInput](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataManagerRequest.html), which encapsulates query parameters such as paging, sorting, filtering, and search options. These parameters are used to shape the response sent back to the DataGrid. {% tabs %} {% highlight cs tabtitle="GraphQLQuery.cs" %} @@ -339,7 +343,7 @@ namespace GraphQLServer.Models **Step 5: Configure the GraphQL server** -Update the `Program.cs` file to configure the GraphQL server. This configuration ensures that the server can handle GraphQL requests effectively. +Update the **Program.cs** file to register `GraphQL` services and map the `GraphQL` endpoint. This configuration ensures that the server can process `GraphQL` queries efficiently. {% tabs %} {% highlight cs tabtitle="Program.cs" %} @@ -366,7 +370,7 @@ app.Run(); **Step 6: Test the GraphQL endpoint** -To verify that the GraphQL server is functioning correctly, use the following example query in a GraphQL client or playground: +Verify that the `GraphQL` server is running and accessible at **http://localhost:xxxx/graphql**, where **xxxx** represents the port number. Use a GraphQL client or playground to execute the following query: ``` { @@ -382,28 +386,31 @@ To verify that the GraphQL server is functioning correctly, use the following ex } ``` -This query will return the total count of orders and a list of order details. Ensure the server is running and accessible at `http://localhost:xxxx/graphql` before testing. Here, `xxxx` represents the port number. +This query returns the total count of orders and a collection of order details. -For more details, refer to the [Hot Chocolate documentation](https://chillicream.com/docs/hotchocolate). +> For additional configuration and advanced features, refer to the [Hot Chocolate documentation](https://chillicream.com/docs/hotchocolate/v14). -## Connecting Syncfusion® Blazor DataGrid to an GraphQL service +## Connecting Syncfusion Blazor DataGrid to an GraphQL service -To integrate the Syncfusion® Blazor DataGrid into your project using Visual Studio, follow the below steps: +To bind the Syncfusion® Blazor DataGrid to a remote API using the [GraphQLAdaptor](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Adaptors.html#Syncfusion_Blazor_Adaptors_GraphQLAdaptor), configure the [SfDataManager](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Data.SfDataManager.html) component with the API endpoint and adaptor type. The following steps outline the integration process: -**Step 1: Create a Blazor Web App** +**1.Create a Blazor Web App** -Create a **Blazor Web App** named **BlazorGrid** using Visual Studio 2022. You can use either [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). Ensure you 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). +1. Open Visual Studio 2022. +2. Choose **Blazor Web App** and name the project **BlazorGrid**. +3. Use either [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-9.0&pivots=vs) or the Syncfusion® Blazor Extension to create the project. +4. Select the preferred [interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-9.0#render-modes) and [interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-9.0&pivots=vs). -**Step 2: Install Syncfusion® Blazor DataGrid and Themes NuGet packages** +**2. Install Required NuGet Packages** -To add the Syncfusion® Blazor DataGrid to your app, open the NuGet Package Manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*). Search for and install the following packages: +* Install the following packages using the NuGet Package Manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), then search and install: -- [Syncfusion.Blazor.Grid](https://www.nuget.org/packages/Syncfusion.Blazor.Grid/) -- [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) + - [Syncfusion.Blazor.Grid](https://www.nuget.org/packages/Syncfusion.Blazor.Grid/) + - [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) -If your Blazor Web App uses `WebAssembly` or `Auto` render modes, install these packages in the client project. +> * For projects using **WebAssembly** or **Auto** render modes, install these packages in the client project. -Alternatively, use the following Package Manager commands: +* Alternatively, use the Package Manager Console: ```powershell Install-Package Syncfusion.Blazor.Grid -Version {{ site.releaseversion }} @@ -412,9 +419,9 @@ Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }} > Syncfusion® Blazor components are available on [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for a complete list of available packages. -**Step 3: Register Syncfusion® Blazor service** +**3. Register Syncfusion® Blazor service** -- Open the **~/_Imports.razor** file and import the required namespaces: +- Add the required namespaces in **~/_Imports.razor**: ```cs @using Syncfusion.Blazor @@ -422,7 +429,7 @@ Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }} @using Syncfusion.Blazor.Data ``` -- Register the Syncfusion® Blazor service in the **~/Program.cs** file: +- Register the Syncfusion® Blazor service in **Program.cs**: ```csharp using Syncfusion.Blazor; @@ -432,9 +439,9 @@ builder.Services.AddSyncfusionBlazor(); For apps using `WebAssembly` or `Auto (Server and WebAssembly)` render modes, register the service in both **~/Program.cs** files. -**Step 4: Add stylesheet and script resources** +**4. Add stylesheet and script references** -Include the theme stylesheet and script references in the **~/Components/App.razor** file: +Include the theme and script references in **App.razor**: ```html @@ -448,12 +455,13 @@ Include the theme stylesheet and script references in the **~/Components/App.raz ``` -> - Refer to the [Blazor Themes](https://blazor.syncfusion.com/documentation/appearance/themes) topic for various methods to include themes (e.g., Static Web Assets, CDN, or CRG). -> - Set the `rendermode` to **InteractiveServer** or **InteractiveAuto** in your Blazor Web App configuration. +> * Refer to the [Blazor Themes](https://blazor.syncfusion.com/documentation/appearance/themes) topic for available methods to include themes, such as Static Web Assets, CDN, or CRG. +> * Set the render mode to **InteractiveServer** or **InteractiveAuto** in the Blazor Web App configuration. -**Step 5: Add Blazor DataGrid and Configure with server** +**5. Configure DataGrid with GraphQLAdaptor** -To bind GraphQL service data to the Grid, provide the GraphQL query string using the [Query](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Data.GraphQLAdaptorOptions.html#Syncfusion_Blazor_Data_GraphQLAdaptorOptions_Query) property of the [GraphQLAdaptorOptions](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Data.GraphQLAdaptorOptions.html). Additionally, set the [ResolverName](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Data.GraphQLAdaptorOptions.html#Syncfusion_Blazor_Data_GraphQLAdaptorOptions_ResolverName) property to map the response. The GraphQLAdaptor expects the response as a JSON object with properties `Result`, `Count`, and `Aggregates`, which contain the collection of entities, total number of records, and aggregate values, respectively. The GraphQL response should be returned in JSON format like `{ "data": { ... } }` with the query name as the field. +To bind the DataGrid to the [GraphQLAdaptor](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Adaptors.html#Syncfusion_Blazor_Adaptors_GraphQLAdaptor) using [SfDataManager](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Data.SfDataManager.html) and [GraphQLAdaptorOptions](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataManager.html#Syncfusion_Blazor_DataManager_GraphQLAdaptorOptions). +Set the [Query](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Data.GraphQLAdaptorOptions.html#Syncfusion_Blazor_Data_GraphQLAdaptorOptions_Query) property to define the GraphQL query and [ResolverName](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Data.GraphQLAdaptorOptions.html#Syncfusion_Blazor_Data_GraphQLAdaptorOptions_ResolverName) to map the response. {% tabs %} {% highlight cs tabtitle="Home.razor" %} @@ -511,11 +519,11 @@ To bind GraphQL service data to the Grid, provide the GraphQL query string using {% endhighlight %} {% endtabs %} -> Replace `https://localhost:xxxx/graphql` with the actual URL of your API endpoint that provides the data in a consumable format (e.g., JSON). +> Replace **https://localhost:xxxx/graphql** with the actual GraphQL endpoint URL. -**Step 6: Enable CORS Policy** +**6: Enable CORS Policy** -To allow your Blazor application to access the GraphQL server, you need to enable Cross-Origin Resource Sharing (CORS) in your server application. Add the following code to your `Program.cs` file: +Add a CORS policy in **Program.cs** to allow the Blazor app to access the GraphQL server: ```csharp // Add CORS policy @@ -535,19 +543,27 @@ builder.Services.AddCors(options => app.UseCors("AllowSpecificOrigin"); ``` -This configuration ensures that your Blazor application can communicate with the GraphQL server without encountering CORS-related issues. +This configuration ensures that the Blazor application can communicate with the GraphQL server without CORS-related restrictions. -**Step 7: Run the Application** +**7: Run the Application** -After completing the setup, run your application. The Grid will fetch and display data from the configured GraphQL API. Ensure that both the Blazor application and the GraphQL server are running and accessible. +Start both the Blazor application and the GraphQL server. The DataGrid will fetch and display data from the configured GraphQL API. ![GraphQL Adaptor Data](../images/blazor-datagrid-graphql-adaptor-data.gif) -**Understanding DataManagerRequestInput Class** +## Perform data operations in GraphQLAdaptor + +The Syncfusion® Blazor DataGrid supports server-side operations such as **searching**, **filtering**, **sorting**, **paging**, and **CRUD** through the `GraphQLAdaptor`. These operations are executed by passing parameters from the DataGrid to the GraphQL server using the [DataManagerRequestInput](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataManagerRequest.html) structure. -Before you dive into specific data operations like search, sorting, or filtering, it's essential to understand the request structure that the Syncfusion® Blazor DataGrid sends to the GraphQL server. +**Key Operations** -The following code demonstrates the `DataManagerRequestInput` class, which encapsulates parameters such as pagination (Skip, Take), search filters (Search), sorting (Sorted), and more. These parameters are passed as arguments to the resolver function for processing. +* **Searching**: Uses **Search** property to filter records based on keywords and fields. +* **Filtering**: Uses **Where** property to apply conditional filters on columns. +* **Sorting**: Uses **Sorted** property to define sort fields and directions. +* **Paging**: Uses **Skip** and **Take** properties to retrieve paged data. +* **CRUD**: Uses GraphQL mutations for **Insert**, **Update**, **Delete**, and **Batch** operations. + +Each operation is handled on the server by parsing these parameters and applying the logic to the data source before returning the result to the DataGrid. {% tabs %} {% highlight cs tabtitle="DataManagerRequest.cs" %} @@ -700,9 +716,14 @@ namespace GraphQLServer.Models ## Handling searching operation -To handle search operations in the Syncfusion® Blazor DataGrid using the GraphQLAdaptor, you can make use of the `dataManager.Search` parameters and apply the search logic on the server side. This allows users to efficiently filter and retrieve relevant records from the Grid based on the provided search criteria. +**Searching** parameters are sent through the **Search** property of `DataManagerRequestInput`. These parameters include: + +* **Key**: The search keyword. +* **Fields**: The collection of fields to search against. +* **Operator**: The comparison operator (e.g., contains, startswith). +* **IgnoreCase**: Indicates whether the search should be case-insensitive. -When a search is performed in the Grid, the DataManager sends the search parameters to the server, which include the search keyword and the list of fields to search against. The server then processes these parameters and filters the data accordingly. +When a search is performed, the DataGrid sends these parameters to the GraphQL server. The server applies the search logic and returns the filtered collection along with the total record count. ![GraphqlAdaptor - Searching](../images/blazor-datagrid-graphql-adaptor-searching.png) @@ -812,11 +833,15 @@ public class OrdersDataResponse ## Handling filtering operation -To handle filtering operations in the Syncfusion® Blazor DataGrid using the GraphQLAdaptor, you can make use of the `dataManager.Where` parameters and apply the filter logic on the server side. This enables users to refine the Grid data by specifying one or more filter conditions based on column values. +**Filtering** parameters are sent through the **Where** property of `DataManagerRequestInput`. Each filter condition includes: -When a filter is applied in the Grid, the DataManager sends the filtering criteria to the server through the `Where` property. Each filter condition includes the target field, operator, filter value, and other optional settings such as case sensitivity or nested predicates. +* **Field**: The column name to apply the filter. +* **Operator**: The comparison operator (e.g., equal, contains, greaterthan). +* **Value**: The value to compare against. +* **IgnoreCase**: Indicates whether the comparison should be case-insensitive. +* **Predicates**: Nested conditions for complex filtering. -On the server, these parameters are parsed and used to filter the data source accordingly before returning the results to the Grid. +When a filter is applied in the DataGrid, these parameters are passed to the GraphQL server. The server processes the conditions and returns the filtered collection along with the total record count. ![GraphqlAdaptor - Filtering](../images/blazor-datagrid-graphql-adaptor-filtering.png) @@ -970,9 +995,12 @@ public class OrdersDataResponse ## Handling sorting operation -To handle sorting operations in the Syncfusion® Blazor DataGrid using the GraphQLAdaptor, the sorting logic can be implemented on the server side by utilizing the `dataManager.Sorted` parameter. This enables the Grid to send sorting instructions to the server, specifying the fields and sort directions to apply. +**Sorting** parameters are sent through the **Sorted** property of `DataManagerRequestInput`. Each sorting instruction includes: -When a sort action is triggered in the Grid, the DataManager sends the sorting configuration in the `Sorted` property. This includes the field name to sort and the direction (Ascending or Descending). The server processes this parameter and sorts the data accordingly before returning it to the Grid. +* **Name**: The column name to sort. +* **Direction**: The sort order (ascending or descending). + +When a sort action is triggered in the DataGrid, these parameters are passed to the GraphQL server. The server applies the sorting logic and returns the sorted collection along with the total record count. ![GraphqlAdaptor - Sorting](../images/blazor-datagrid-graphql-adaptor-sorting.png) @@ -1079,11 +1107,12 @@ public class OrdersDataResponse ## Handling paging operation -To handle paging operations in the Syncfusion® Blazor DataGrid using the GraphQLAdaptor, you can make use of the `dataManager.Skip` and `dataManager.Take` parameters. These parameters allow you to retrieve data in pages, helping to manage large datasets efficiently by loading only a subset of records at a time. +**Paging** parameters are sent through the **Skip** and **Take** properties of `DataManagerRequestInput`: -When paging is applied, the DataManager sends the **Skip** and **Take** values to the server. The **Skip** parameter specifies the number of records to be skipped, while the **Take** parameter defines how many records to retrieve in the current page. +* **Skip**: The number of records to **skip**. +* **Take**: The number of records to **retrieve** for the current page. -On the server side, the data is sliced based on the **Skip** and **Take** values, and the total record count is returned to enable proper pagination in the Grid. +When paging is applied, these parameters are passed to the GraphQL server. The server slices the data accordingly and returns the paged collection along with the total record count. ![GraphQLAdaptor - Paging](../images/blazor-datagrid-graphql-adaptor-paging.png) @@ -1182,25 +1211,20 @@ public class OrdersDataResponse ## Handling CRUD operation using mutation -The Syncfusion® Blazor DataGrid integrates seamlessly with GraphQL APIs using the GraphQLAdaptor, enabling support for CRUD (Create, Read, Update, and Delete) and Batch operations. This adaptor maps Grid actions to GraphQL queries and mutations for real-time data interaction. - -This section demonstrates how to configure the Grid with actual code to bind data and perform CRUD actions using the GraphQLAdaptor. - -**Set Up Mutation Queries** - -Define GraphQL mutation queries for Insert, Update, Delete, and Batch operations in the [GraphQLAdaptorOptions.Mutation](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Data.GraphQLAdaptorOptions.html#Syncfusion_Blazor_Data_GraphQLAdaptorOptions_Mutation) property. Below are the required queries for each operation: +The Syncfusion® Blazor DataGrid integrates with GraphQL APIs using the `GraphQLAdaptor` to support **Create**, **Read**, **Update**, **Delete**, and **Batch** operations. These operations are mapped to GraphQL mutations for real-time data interaction. -* **Insert Mutation:** A GraphQL mutation that allows adding new records. +**Configure Mutation Queries** -* **Update Mutation:** A GraphQL mutation for updating existing records. +Define mutation queries in the [GraphQLAdaptorOptions.Mutation](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Data.GraphQLAdaptorOptions.html#Syncfusion_Blazor_Data_GraphQLAdaptorOptions_Mutation) property. Each operation requires a specific mutation: -* **Delete Mutation:** A GraphQL mutation that removes records. - -* **Batch Mutation:** Handles multiple operations (Insert, Update, and Delete) in a single request. +* [Insert](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Data.GraphQLMutation.html#Syncfusion_Blazor_Data_GraphQLMutation_Insert): Adds a new record. +* [Update](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Data.GraphQLMutation.html#Syncfusion_Blazor_Data_GraphQLMutation_Update): Modifies an existing record. +* [Delete](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Data.GraphQLMutation.html#Syncfusion_Blazor_Data_GraphQLMutation_Delete): Removes a record. +* [Batch](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Data.GraphQLMutation.html#Syncfusion_Blazor_Data_GraphQLMutation_Batch): Handles multiple operations(Insert, Update, and Delete) in a single request. **Configuration in GraphQL server application** -The following code is the configuration in GraphQL server application to set GraphQL query and mutation type and to enable CORS. +This configuration sets up the GraphQL server to handle queries and mutations and enables **CORS** for cross-origin requests from the Blazor application: ```cshtml @@ -1223,18 +1247,20 @@ builder.Services.AddCors(options => ``` -The following steps outline how to set up these operations in the Grid. +This configuration ensures: + +* **GraphQLQuery** handles data retrieval. +* **GraphQLMutation** handles insert, update, delete, and batch operations. +* **CORS policy** allows secure communication between the Blazor app and the GraphQL server. **1. Insert Operation:** -To insert a new record into the GraphQL server, define the mutation query in the [Insert](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Data.GraphQLMutation.html#Syncfusion_Blazor_Data_GraphQLMutation_Insert) property of the [Mutation](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Data.GraphQLAdaptorOptions.html#Syncfusion_Blazor_Data_GraphQLAdaptorOptions_Mutation) object within [GraphQLAdaptorOptions](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Data.GraphQLAdaptorOptions.html). +To insert a new record into the GraphQL server, configure the mutation query in the [Insert](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Data.GraphQLMutation.html#Syncfusion_Blazor_Data_GraphQLMutation_Insert) property of the `GraphQLAdaptorOptions.Mutation` object. -This mutation query is executed when a new row is added to the Syncfusion® Blazor DataGrid. The adaptor sends the necessary parameters to the GraphQL server to perform the insertion. +This mutation is executed when a new row is added to the Syncfusion® Blazor DataGrid. The adaptor sends the required parameters to the GraphQL server for processing. **Mutation query configuration** -The `Insert` mutation should be configured as shown below: - ```cs Mutation = new GraphQLMutation { @@ -1251,18 +1277,18 @@ Mutation = new GraphQLMutation **Parameters Sent to the Server** -The following variables are passed as a parameter to the mutation method written for **Insert** operation in server side. +These parameters are passed to the mutation method for the `Insert` operation on the server: -| Properties | Description | +| Parameter | Description | |--------|----------------| -| record | The new record which is need to be inserted. | -| index | Specifies the index at which the newly added record will be inserted. | -| action | Indicates the type of operation being performed. When the same method is used for all CRUD actions, this argument serves to distinguish the action, such as **Add, Delete and Update** | -| additionalParameters | An optional parameter that can be used to perform any operations. | +| record | Represents the new record to be inserted. | +| index | Specifies the position at which the record should be inserted. | +| action | Indicates the type of operation (e.g., Add, Delete, Update). | +| additionalParameters | Optional parameter for custom logic during the operation. | **Server-Side Mutation Implementation** -The following example demonstrates how to implement the insert logic on the GraphQL server using C# with HotChocolate: +This example demonstrates how to implement the insert logic on the GraphQL server using C# with the **HotChocolate**: ```cs @@ -1292,14 +1318,12 @@ namespace GraphQLServer.GraphQL **2. Update Operation:** -To update an existing record on the GraphQL server, define the mutation query in the [Update](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Data.GraphQLMutation.html#Syncfusion_Blazor_Data_GraphQLMutation_Update) property of the [Mutation](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Data.GraphQLAdaptorOptions.html#Syncfusion_Blazor_Data_GraphQLAdaptorOptions_Mutation) object within [GraphQLAdaptorOptions](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Data.GraphQLAdaptorOptions.html). +To update an existing record on the GraphQL server, configure the mutation query in the [Update](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Data.GraphQLMutation.html#Syncfusion_Blazor_Data_GraphQLMutation_Update) property of the [GraphQLAdaptorOptions.Mutation](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Data.GraphQLAdaptorOptions.html#Syncfusion_Blazor_Data_GraphQLAdaptorOptions_Mutation) object. -This mutation query is triggered when an existing row in the Syncfusion® Blazor DataGrid is modified. The adaptor sends the updated data and relevant parameters to the GraphQL server for processing. +This mutation is triggered when a row in the Syncfusion® Blazor DataGrid is modified. The adaptor sends the updated record and related parameters to the GraphQL server for processing. **Mutation query configuration** -The Update mutation should be configured as shown below: - ```cs Mutation = new GraphQLMutation { @@ -1316,19 +1340,19 @@ Mutation = new GraphQLMutation **Parameters Sent to the Server** -The following variables are passed as a parameter to the mutation method written for **Update** operation in server side. +These parameters are passed to the mutation method for the `Update` operation on the server: -| Properties | Description | +| Parameter | Description | |--------|----------------| -| record | The new record which is need to be updated. | -| action | Indicates the type of operation being performed. When the same method is used for all CRUD actions, this argument serves to distinguish the action, such as **Add, Delete and Update** | -| primaryColumnName | Specifies the field name of the primary column. | -| primaryColumnValue | Specifies the primary column value which is needs to be updated in the collection. | -| additionalParameters | An optional parameter that can be used to perform any operations. | +| record | Represents the updated record. | +| action | Indicates the type of operation (e.g., Add, Delete, Update). | +| primaryColumnName | Specifies the name of the primary key column. | +| primaryColumnValue | Specifies the value of the primary key for the record to update. | +| additionalParameters | Optional parameter for custom logic during the operation. | **Server-Side Mutation Implementation** -The following example demonstrates how to implement the update logic on the GraphQL server using C# with HotChocolate: +This example demonstrates how to implement the update logic on the GraphQL server using C# with the **HotChocolate**: ```cs using GraphQLServer.Models; @@ -1356,14 +1380,12 @@ namespace GraphQLServer.GraphQL **3. Delete Operation:** -To delete an existing record from the GraphQL server, define the mutation query in the [Delete](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Data.GraphQLMutation.html#Syncfusion_Blazor_Data_GraphQLMutation_Delete) property of the [Mutation](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Data.GraphQLAdaptorOptions.html#Syncfusion_Blazor_Data_GraphQLAdaptorOptions_Mutation) object within [GraphQLAdaptorOptions](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Data.GraphQLAdaptorOptions.html). +To remove an existing record from the GraphQL server, configure the mutation query in the [Delete](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Data.GraphQLMutation.html#Syncfusion_Blazor_Data_GraphQLMutation_Delete) property of the [GraphQLAdaptorOptions.Mutation](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Data.GraphQLAdaptorOptions.html#Syncfusion_Blazor_Data_GraphQLAdaptorOptions_Mutation) object. -This mutation query is executed when a row is removed from the Syncfusion® Blazor DataGrid. The adaptor passes the required parameters to the GraphQL server to process the deletion. +This mutation is executed when a row is deleted in the Syncfusion® Blazor DataGrid. The adaptor sends the primary key and related parameters to the GraphQL server for processing. **Mutation query configuration** -The Delete mutation should be configured as shown below: - ```cs Mutation = new GraphQLMutation { @@ -1380,18 +1402,18 @@ Mutation = new GraphQLMutation **Parameters Sent to the Server** -The following variables are passed as a parameter to the mutation method written for **Delete** operation in server side. +These parameters are passed to the mutation method for the **Delete** operation on the server: -| Properties | Description | +| Parameter | Description | |--------|----------------| -| primaryColumnValue | Specifies the primary column value which is needs to be removed from the collection. | -| action | Indicates the type of operation being performed. When the same method is used for all CRUD actions, this argument serves to distinguish the action, such as **Add, Delete and Update** | -| primaryColumnName | specifies the field name of the primary column. | -| additionalParameters | An optional parameter that can be used to perform any operations. | +| primaryColumnValue | Specifies the primary key value of the record to delete. | +| action | Indicates the type of operation (e.g., Add, Delete, Update). | +| primaryColumnName | Specifies the name of the primary key column. | +| additionalParameters | Optional parameter for custom logic during the operation. | **Server-Side Mutation Implementation** -The following example demonstrates how to implement the delete logic on the GraphQL server using C# with HotChocolate: +This example demonstrates how to implement the delete logic on the GraphQL server using C# with the **HotChocolate**: ```cs using GraphQLServer.Models; @@ -1415,8 +1437,6 @@ namespace GraphQLServer.GraphQL ``` -The following code shows how to bind the Grid with a GraphQL service and enable CRUD operations. - {% tabs %} {% highlight razor tabtitle="Home.razor" %} @@ -1559,14 +1579,12 @@ namespace GraphQLServer.GraphQL **Batch operation:** -To perform multiple data operations in a single request to the GraphQL server, define the mutation query in the [Batch](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Data.GraphQLMutation.html#Syncfusion_Blazor_Data_GraphQLMutation_Batch) property of the [Mutation](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Data.GraphQLAdaptorOptions.html#Syncfusion_Blazor_Data_GraphQLAdaptorOptions_Mutation) object within [GraphQLAdaptorOptions](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Data.GraphQLAdaptorOptions.html). +To enable multiple data operations such as insert, update, and delete in a single request, configure the mutation query in the [Batch](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Data.GraphQLMutation.html#Syncfusion_Blazor_Data_GraphQLMutation_Batch) property of the [GraphQLAdaptorOptions.Mutation](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Data.GraphQLAdaptorOptions.html#Syncfusion_Blazor_Data_GraphQLAdaptorOptions_Mutation) object. -This `Batch` mutation is triggered when multiple changes (add, edit, delete) are made in batch editing mode of the Syncfusion® Blazor DataGrid and then committed using the Update toolbar button. +This `Batch` mutation executes when multiple changes such as **add**, **edit**, and **delete** are performed in [Batch Edit Mode](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.EditMode.html#Syncfusion_Blazor_Grids_EditMode_Batch) in the Syncfusion® Blazor DataGrid and committed using the **Update** toolbar button. **Mutation query configuration** -The Batch mutation should be configured as shown below: - ```cs Mutation = new GraphQLMutation @@ -1586,21 +1604,21 @@ Mutation = new GraphQLMutation **Parameters Sent to the Server** -The following variables are passed as a parameter to the mutation method written for **Batch** operation in server side. +These parameters are passed to the mutation method for the **Batch** operation on the server: -| Properties | Description | +| Parameter | Description | |--------|----------------| -| changed | Specifies the collection of record to be updated. | -| added | Specifies the collection of record to be inserted. | -| deleted | Specifies the collection of record to be removed. | +| changed | Collection of records to update. | +| added | Collection of records to insert. | +| deleted | Collection of records to remove. | | action | Indicates the type of operation being performed. | -| primaryColumnName | Specifies the field name of the primary column. | -| additionalParameters | An optional parameter that can be used to perform any operations. | -| dropIndex | Specifies the record position, from which new records will be added while performing drag and drop. | +| primaryColumnName | Specifies the name of the primary key column. | +| additionalParameters | Optional parameter for custom logic during the operation. | +| dropIndex | Position where new records should be inserted during drag-and-drop. | **Server-Side Mutation Implementation** -The following example demonstrates how to implement batch logic on the GraphQL server using C# with HotChocolate: +This example demonstrates how to implement the batch logic on the GraphQL server using C# with the **HotChocolate**: ```cs using GraphQLServer.Models; @@ -1663,8 +1681,6 @@ namespace GraphQLServer.GraphQL ``` -The following sections explain how to configure each CRUD and batch operation in the Grid using GraphQL. - {% tabs %} {% highlight razor tabtitle="Home.razor" %} @@ -1797,4 +1813,4 @@ namespace GraphQLServer.GraphQL {% endhighlight %} {% endtabs %} -You can get the entire code in the [github](https://github.com/SyncfusionExamples/Binding-data-from-remote-service-to-blazor-data-grid/tree/master/GraphQLAdaptor) sample. +> The complete implementation is available in the [GitHub](https://github.com/SyncfusionExamples/Binding-data-from-remote-service-to-blazor-data-grid/tree/master/GraphQLAdaptor) sample. diff --git a/blazor/datagrid/connecting-to-adaptors/odatav4-adaptor.md b/blazor/datagrid/connecting-to-adaptors/odatav4-adaptor.md index 2bbfde79ad..040c199504 100644 --- a/blazor/datagrid/connecting-to-adaptors/odatav4-adaptor.md +++ b/blazor/datagrid/connecting-to-adaptors/odatav4-adaptor.md @@ -8,25 +8,36 @@ keywords: adaptors, ODataV4adaptor, ODataV4 adaptor, remotedata documentation: ug --- -# ODataV4Adaptor in Syncfusion® Blazor DataGrid +# ODataV4Adaptor in Syncfusion Blazor DataGrid -The [ODataV4Adaptor](https://blazor.syncfusion.com/documentation/data/adaptors#odatav4-adaptor) in the Syncfusion® Blazor DataGrid enables seamless integration of the Grid with OData V4 services, facilitating efficient data fetching and manipulation. This guide provides detailed instructions for binding data and performing CRUD (Create, Read, Update, and Delete) actions using the `ODataV4Adaptor` in your Syncfusion® Blazor DataGrid. +The Syncfusion® Blazor DataGrid supports integration with **OData V4** services through the [ODataV4Adaptor](https://blazor.syncfusion.com/documentation/data/adaptors#odatav4-adaptor) in [SfDataManager](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Data.SfDataManager.html) component. This adaptor enables efficient communication between the DataGrid and OData-compliant endpoints, allowing server-side operations such as **read**, **create**, **update**, and **delete**. It is designed for applications that require standardized querying and data manipulation using **OData** protocols. + +The ODataV4Adaptor ensures: + +- Seamless data binding with **OData V4** services. +- Support for query options such as **$filter**, **$orderby**, **$skip**, **$top**, and **$count**. +- Compatibility with CRUD operations through **HTTP** methods like **GET**, **POST**, **PATCH**, and **DELETE**. ## Configuring an OData V4 Service -To configure a server with Syncfusion® Blazor DataGrid, follow these steps: +To enable OData V4 integration with Syncfusion® Blazor DataGrid, configure a server-side OData service as follows: **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). +1. Open Visual Studio 2022. +2. Choose **Blazor Web App** and name the project **ODataV4Adaptor**. +3. Use either [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-9.0&pivots=vs) or the Syncfusion® Blazor Extension to create the project. +4. Select the preferred [interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-9.0#render-modes) and [interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-9.0&pivots=vs). **2. Install NuGet packages** -Using the NuGet package manager in Visual Studio (Tools → NuGet Package Manager → Manage NuGet Packages for Solution), install the `Microsoft.AspNetCore.OData` NuGet package. +Install the **Microsoft.AspNetCore.OData** package using the NuGet Package Manager in Visual Studio: + +*Tools → NuGet Package Manager → Manage NuGet Packages for Solution* **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. +Create a **Models** folder and add a class named **OrdersDetails.cs** under **ODataV4Adaptor.Client.Models** to represent order data: ```csharp @@ -78,7 +89,7 @@ namespace ODataV4Adaptor.Client.Models **4. Build the Entity Data Model** -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. +The **ODataConventionModelBuilder** in **Program.cs** defines the EDM: ```csharp // Create an ODataConventionModelBuilder to build the OData model. @@ -88,9 +99,9 @@ var modelBuilder = new ODataConventionModelBuilder(); modelBuilder.EntitySet("Grid"); ``` -**5. Register the OData services** +**5. Register OData services** -After building the Entity Data Model, register the OData services in the `Program.cs` file of your application. Follow these steps: +Add OData services in **Program.cs**: ```cs // Add controllers with OData support to the service collection. @@ -103,7 +114,7 @@ builder.Services.AddControllers().AddOData( **6. Create an API controller** -Create an API controller (aka, **GridController.cs**) file under the **Controllers** folder within the `ODataV4Adaptor` project. This controller facilitates data communication with the Blazor DataGrid. +Add **GridController.cs** under the **Controllers** folder to handle data operations. ```csharp @@ -137,8 +148,6 @@ namespace ODataV4Adaptor.Controllers **7. 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(); @@ -149,21 +158,22 @@ app.MapControllers(); **8. Run the application:** -Run the application in Visual Studio. It will be hosted at the URL **https://localhost:xxxx**. - -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). +Run the application in Visual Studio. The API will be available at a URL such as **https://localhost:xxxx/api/grid**, where **xxxx** represents the port number. ![ODataV4Adaptor Data](../images/odatav4-adaptors-data.png) -## Connecting Syncfusion® Blazor DataGrid to an OData V4 Service +## Connecting Syncfusion Blazor DataGrid to an OData V4 Service + +To bind the Syncfusion® Blazor DataGrid to a remote API using the [ODataV4Adaptor](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Adaptors.html#Syncfusion_Blazor_Adaptors_ODataV4Adaptor), configure the [SfDataManager](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Data.SfDataManager.html) component with the API endpoint and adaptor type. The following steps outline the integration process: -To integrate the Syncfusion® Blazor DataGrid into your project using Visual Studio, follow the below steps: +**1. Install Required NuGet Packages** -**1. Install Syncfusion® Blazor DataGrid and Themes NuGet packages** +* Install the required packages in the `ODataV4Adaptor.Client` project using the NuGet Package Manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), then search and install: -To add the Blazor DataGrid to the app, open the NuGet Package Manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*) for the `ODataV4Adaptor.Client` project, search and install [Syncfusion.Blazor.Grid](https://www.nuget.org/packages/Syncfusion.Blazor.Grid/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/). + - [Syncfusion.Blazor.Grid](https://www.nuget.org/packages/Syncfusion.Blazor.Grid/) + - [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) -Alternatively, use the following Package Manager commands: +* Alternatively, use the Package Manager Console: ```powershell Install-Package Syncfusion.Blazor.Grid -Version {{ site.releaseversion }} @@ -172,16 +182,16 @@ Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }} > Syncfusion® Blazor components are available on [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for a complete list of available packages. -**2. Register Syncfusion® Blazor service** +**2. Register Syncfusion Blazor service** -- Open the **~/_Imports.razor** file and import the required namespaces. +- Add the required namespaces in **~/_Imports.razor**: ```cs @using Syncfusion.Blazor @using Syncfusion.Blazor.Grids ``` -- Register the Syncfusion® Blazor service in the **~/Program.cs** file of `ODataV4Adaptor.Client` project. +- For apps using **WebAssembly** or **Auto** (Server and WebAssembly) render modes, register the service in both **~/Program.cs** files. ```csharp using Syncfusion.Blazor; @@ -189,9 +199,9 @@ using Syncfusion.Blazor; builder.Services.AddSyncfusionBlazor(); ``` -**3. Add stylesheet and script resources** +**3. Add stylesheet and script references** -Include the theme stylesheet and script references in the **~/Components/App.razor** file. +Include the theme and script references in **App.razor**: ```html @@ -205,14 +215,12 @@ Include the theme stylesheet and script references in the **~/Components/App.raz ``` -> * Refer to the [Blazor Themes](https://blazor.syncfusion.com/documentation/appearance/themes) topic for various methods to include themes (e.g., Static Web Assets, CDN, or CRG). -> * Set the render mode to **InteractiveServer** or **InteractiveAuto** in your Blazor Web App configuration. +> * Refer to the [Blazor Themes](https://blazor.syncfusion.com/documentation/appearance/themes) topic for available methods to include themes, such as Static Web Assets, CDN, or CRG. +> * Set the render mode to **InteractiveServer** or **InteractiveAuto** in the Blazor Web App configuration. -**4. Add Blazor DataGrid and configure with server** +**4. Configure DataGrid with ODataV4Adaptor** -To connect the Blazor DataGrid to an OData V4 service, use the [Url](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataManager.html#Syncfusion_Blazor_DataManager_Url) property of [SfDataManager](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataManager.html) and set the [Adaptor](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataManager.html#Syncfusion_Blazor_DataManager_Adaptor) property to `Adaptors.ODataV4Adaptor`. Update the **Index.razor** file as follows. - -The `SfDataManager` offer multiple adaptor options to connect with remote databases based on an API service. Below is an example of the [ODataV4Adaptor](https://blazor.syncfusion.com/documentation/data/adaptors#odatav4-adaptor), which works with an OData V4 API that returns data in the expected `value` and `@odata.context` format. +The [SfDataManager](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataManager.html) component provides multiple adaptors for remote data binding. For **OData V4** services, set the [Adaptor](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataManager.html#Syncfusion_Blazor_DataManager_Adaptor) property to [Adaptors.ODataV4Adaptor](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Adaptors.html#Syncfusion_Blazor_Adaptors_ODataV4Adaptor) and specify the service endpoint in the [Url](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataManager.html#Syncfusion_Blazor_DataManager_Url) property. {% tabs %} {% highlight razor tabtitle="Index.razor"%} @@ -264,21 +272,28 @@ namespace ODataV4Adaptor.Controllers {% endhighlight %} {% endtabs %} -> Replace https://localhost:xxxx/odata/grid with the actual URL of your API endpoint that provides the data in a consumable format (e.g., JSON). +> Replace **https://localhost:xxxx/odata/grid** with the actual API endpoint that returns data in **OData V4** format. **5. Run the application** -When you run the application, the Blazor DataGrid will display data fetched from the OData V4 service. +When the application runs, the DataGrid displays data retrieved from the OData V4 service. ![ODataV4Adaptor Data](../images/blazor-odatav4-adaptors.gif) -> Replace `https://localhost:xxxx/odata/` with the actual URL of your OData V4 service. +## Perform data operations in ODataV4Adaptor + +The Syncfusion® Blazor DataGrid supports server-side operations such as **searching**, **sorting**, **filtering**, **paging**, and **CRUD** when connected to an **OData V4** service through the `ODataV4Adaptor`. These operations are executed on the server using **OData** query options: + +* **$filter** – Applies **filter** conditions and **search** criteria from [DataManagerRequest](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataManagerRequest.html) to the data source. +* **$orderby** – Applies **sort** descriptors from `DataManagerRequest` for ascending or descending order. +* **$skip, $top** – Applies **paging** details from `DataManagerRequest` to skip and retrieve records. +* **$count** – Requests the total record count for **paging** and **aggregation**. -## Handling searching operation +The adaptor ensures efficient communication between the DataGrid and the **OData** service by generating appropriate query parameters for each operation, reducing client-side processing and improving performance for large datasets. -By default, ODataV4 does not support global search, which is the ability to search across all fields simultaneously. To overcome this limitation, Syncfusion® provides a search fallback mechanism that allows you to implement a global search experience using the `EnableODataSearchFallback` option. +### Handling searching operation -To enable search operations in your web application using OData, you first need to configure OData support in your service collection. This involves adding the `Filter` method within the OData setup, allowing you to filter data based on specified criteria. Once enabled, clients can utilize the **$filter** query option in their requests to search for specific data entries. +**OData V4** does not natively support global search across all fields. To enable this functionality, configure the `EnableODataSearchFallback` option in the `ODataV4Adaptor`. This allows the Grid to perform a fallback search when the **$filter** query option cannot handle global search. {% tabs %} {% highlight cs tabtitle="program.cs" %} @@ -341,7 +356,7 @@ builder.Services.AddControllers().AddOData( ## Handling filtering operation -To enable filtering operations in your web application using OData, you first need to configure OData support in your service collection. This involves adding the `Filter` method within the OData setup, allowing you to filter data based on specified criteria. Once enabled, clients can utilize the **$filter** query option in their requests to retrieve specific data entries. +Enable filtering by adding the **Filter** method in the OData configuration and setting [AllowFiltering](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_AllowFiltering) property to **true** in [SfGrid](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html). The **$filter** query option retrieves records based on specified criteria. {% tabs %} {% highlight cs tabtitle="program.cs" %} @@ -394,7 +409,7 @@ builder.Services.AddControllers().AddOData( ## Handling sorting operation -To enable sorting operations in your web application using OData, you first need to configure OData support in your service collection. This involves adding the `OrderBy` method within the OData setup, allowing you to sort data based on specified criteria. Once enabled, clients can utilize the **$orderby** query option in their requests to sort data entries according to the desired attributes. +Enable sorting by adding the **OrderBy** method in the OData configuration and setting [AllowSorting](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_AllowSorting) property to **true** in [SfGrid](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html). The **$orderby** query option sorts records based on specified fields. {% tabs %} {% highlight cs tabtitle="program.cs" %} @@ -448,7 +463,7 @@ builder.Services.AddControllers().AddOData( ## Handling paging operation -To implement paging operations in your web application using OData, you can utilize the `SetMaxTop` method within your OData setup to limit the maximum number of records that can be returned per request. While you configure the maximum limit, clients can utilize the **$skip** and **$top** query options in their requests to specify the number of records to skip and the number of records to take, respectively. +Paging can be enabled using the **SetMaxTop** method in the OData configuration and setting [AllowPaging](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_AllowPaging) property to **true** in [SfGrid](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html). The **$skip** and **$top** query options implement paging by skipping a specified number of records and retrieving the required count. {% tabs %} {% highlight cs tabtitle="program.cs" %} @@ -503,9 +518,16 @@ builder.Services.AddControllers().AddOData( ## Handling CRUD operations -To manage CRUD (Create, Read, Update, and Delete) operations using the ODataV4Adaptor, follow the provided guide for configuring the Syncfusion® DataGrid for [editing](https://blazor.syncfusion.com/documentation/datagrid/editing) and utilize the sample implementation of the `GridController` in your server application. This controller handles HTTP requests for CRUD operations, including GET, POST, PATCH, and DELETE. +The Syncfusion® Blazor DataGrid supports Create, Read, Update, and Delete (CRUD) operations when configured with `ODataV4Adaptor`. These operations are automatically mapped to standard OData endpoints, and the server must implement corresponding **HTTP methods** to handle each action. + +To support full CRUD functionality, define the following methods in the **GridController** class: + +* **GET** – Retrieves data from the service +* **POST** – Inserts new records +* **PATCH** – Updates existing records +* **DELETE** – Removes records -To enable CRUD operations in the Grid within your application, follow these steps. In the example below, the inline edit [Mode](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEditSettings.html#Syncfusion_Blazor_Grids_GridEditSettings_Mode) is enabled, and the [Toolbar](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_Toolbar) property is configured to display toolbar items for editing. +To enable [editing](https://blazor.syncfusion.com/documentation/datagrid/editing) in the DataGrid, configure the [GridEditSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEditSettings.html) and [Toolbar](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_Toolbar) properties to allow **adding**, **editing**, and **deleting** records. {% tabs %} {% highlight razor tabtitle="Index.razor" %} @@ -528,11 +550,11 @@ To enable CRUD operations in the Grid within your application, follow these step {% endhighlight %} {% endtabs %} -> Normal/Inline editing is the default edit [Mode](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEditSettings.html#Syncfusion_Blazor_Grids_GridEditSettings_Mode) for the Grid. To enable CRUD operations, ensure that the [IsPrimaryKey](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_IsPrimaryKey) property is set to **true** for a specific Grid column, ensuring that its value is unique. +> Normal or Inline editing is the default edit [Mode](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEditSettings.html#Syncfusion_Blazor_Grids_GridEditSettings_Mode) for the Grid. To enable CRUD operations, ensure that the [IsPrimaryKey](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_IsPrimaryKey) property is set to **true** for a specific Grid column, ensuring that its value is unique. **Insert Record:** -To insert a new record into your Syncfusion® DataGrid, you can utilize the `HttpPost` method in your server application. Below is a sample implementation of inserting a record using the **GridController**: +To insert a new record, implement the **HttpPost** method in the **GridController** class. This method receives the new record from the client and adds it to the data source. {% tabs %} {% highlight cs tabtitle="GridController.cs" %} @@ -566,7 +588,7 @@ public IActionResult Post([FromBody] OrdersDetails addRecord) **Update Record:** -Updating a record in the Syncfusion® DataGrid can be achieved by utilizing the `HttpPatch` method in your controller. Here's a sample implementation of updating a record: +To update an existing record, implement the **HttpPatch** method. This method performs a partial update based on the provided key and non-null fields. {% tabs %} {% highlight cs tabtitle="GridController.cs" %} @@ -609,7 +631,7 @@ public IActionResult Patch(int key, [FromBody] OrdersDetails updateRecord) **Delete Record:** -To delete a record from your Syncfusion® DataGrid, you can utilize the `HttpDelete` method in your controller. Below is a sample implementation: +To delete a record, implement the **HttpDelete** method. This method removes the record identified by the key from the data source. {% tabs %} {% highlight cs tabtitle="GridController.cs" %} @@ -641,4 +663,4 @@ public IActionResult Delete(int key) ![Delete Record](../images/odatav4-adaptor-delete-record.png) -Please find the sample in this [GitHub location](https://github.com/SyncfusionExamples/Binding-data-from-remote-service-to-blazor-data-grid/tree/master/ODataV4Adaptor). \ No newline at end of file +> The complete implementation is available in the [GitHub location](https://github.com/SyncfusionExamples/Binding-data-from-remote-service-to-blazor-data-grid/tree/master/ODataV4Adaptor). \ No newline at end of file From 57dcc14b7e05ffa4afbd21e39cf36aad4ccba35f Mon Sep 17 00:00:00 2001 From: SadhanaBaskaran Date: Fri, 28 Nov 2025 09:57:30 +0530 Subject: [PATCH 2/3] 992668: Updated the UG content and samples for Adaptors in Blazor DataGrid --- .../connecting-to-adaptors/custom-adaptor.md | 6 ++---- .../connecting-to-adaptors/graphql-adaptor.md | 20 +++++++++---------- .../connecting-to-adaptors/odatav4-adaptor.md | 8 ++++---- 3 files changed, 16 insertions(+), 18 deletions(-) diff --git a/blazor/datagrid/connecting-to-adaptors/custom-adaptor.md b/blazor/datagrid/connecting-to-adaptors/custom-adaptor.md index dde7ca554a..165cb6a734 100644 --- a/blazor/datagrid/connecting-to-adaptors/custom-adaptor.md +++ b/blazor/datagrid/connecting-to-adaptors/custom-adaptor.md @@ -10,7 +10,7 @@ documentation: ug # Custom Binding in Blazor DataGrid -The Syncfusion® Blazor DataGrid supports custom data operations through the [CustomAdaptor](https://blazor.syncfusion.com/documentation/data/custom-binding) in the [SfDataManager](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Data.SfDataManager.html). This adaptor allows complete control over data handling by overriding methods in the [DataAdaptor](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataAdaptor.html) class. It is designed for scenarios where data operations such as **create**, **read**, **update**, and **delete** must be implemented manually or integrated with custom logic. +The Syncfusion® Blazor DataGrid supports custom data operations through the [CustomAdaptor](https://blazor.syncfusion.com/documentation/data/custom-binding) in the [SfDataManager](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Data.SfDataManager.html). This adaptor allows complete control over data handling by overriding methods in the [DataAdaptor](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataAdaptor.html) class. It is designed for scenarios where data operations such as **read**, **insert**, **update**, and **delete** must be implemented manually or integrated with custom logic. The `CustomAdaptor` is ideal for applications that require: @@ -498,8 +498,6 @@ The [DataManagerRequest](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor * [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__) - Applies **aggregate** details from `DataManagerRequest` to the data source using the `DataUtil` class to calculate summary values such as **Sum**, **Average**, **Min**, and **Max**. -These methods enable efficient client-side data handling in a custom adaptor implementation. - N> To enable these operations, install the **Syncfusion.Blazor.Data** package using NuGet Package Manager in Visual Studio: (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*). @@ -1123,7 +1121,7 @@ CRUD operations for custom-bound data in the Syncfusion® Blazor DataGrid allows sending custom parameters with each data request. This is useful for scenarios where additional information such as user role, authentication token, or custom filters must be passed to the server for processing. -Custom parameters can be added using the [Query](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_Query) property of the [SfGrid](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html) along with the [AddParams](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Data.Query.html#Syncfusion_Blazor_Data_Query_AddParams_System_String_System_Object_) method of the `Query` class. +Custom parameters can be added using the [Query](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_Query) property of the [Grid](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html) along with the [AddParams](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Data.Query.html#Syncfusion_Blazor_Data_Query_AddParams_System_String_System_Object_) method of the `Query` class. To enable custom parameters in data requests for the Grid, follow these steps: diff --git a/blazor/datagrid/connecting-to-adaptors/graphql-adaptor.md b/blazor/datagrid/connecting-to-adaptors/graphql-adaptor.md index 542c094af1..fe309ceabd 100644 --- a/blazor/datagrid/connecting-to-adaptors/graphql-adaptor.md +++ b/blazor/datagrid/connecting-to-adaptors/graphql-adaptor.md @@ -557,11 +557,11 @@ The Syncfusion® Blazor DataGrid supports se **Key Operations** -* **Searching**: Uses **Search** property to filter records based on keywords and fields. -* **Filtering**: Uses **Where** property to apply conditional filters on columns. -* **Sorting**: Uses **Sorted** property to define sort fields and directions. -* **Paging**: Uses **Skip** and **Take** properties to retrieve paged data. -* **CRUD**: Uses GraphQL mutations for **Insert**, **Update**, **Delete**, and **Batch** operations. +* **Searching**: Uses the **Search** property to filter records based on keywords and fields. +* **Filtering**: Uses the **Where** property to apply conditional filters on columns. +* **Sorting**: Uses the **Sorted** property to define sort fields and sort directions. +* **Paging**: Uses the **Skip** and **Take** properties to retrieve paged data. +* **CRUD**: Uses GraphQL mutations to perform **Insert, Update, Delete**, and **Batch** operations. Each operation is handled on the server by parsing these parameters and applying the logic to the data source before returning the result to the DataGrid. @@ -998,7 +998,7 @@ public class OrdersDataResponse **Sorting** parameters are sent through the **Sorted** property of `DataManagerRequestInput`. Each sorting instruction includes: * **Name**: The column name to sort. -* **Direction**: The sort order (ascending or descending). +* **Direction**: The sort order (**ascending** or **descending**). When a sort action is triggered in the DataGrid, these parameters are passed to the GraphQL server. The server applies the sorting logic and returns the sorted collection along with the total record count. @@ -1275,7 +1275,7 @@ Mutation = new GraphQLMutation }, ``` -**Parameters Sent to the Server** +**Parameters sent to the Server** These parameters are passed to the mutation method for the `Insert` operation on the server: @@ -1338,7 +1338,7 @@ Mutation = new GraphQLMutation }, ``` -**Parameters Sent to the Server** +**Parameters sent to the Server** These parameters are passed to the mutation method for the `Update` operation on the server: @@ -1400,7 +1400,7 @@ Mutation = new GraphQLMutation }, ``` -**Parameters Sent to the Server** +**Parameters sent to the Server** These parameters are passed to the mutation method for the **Delete** operation on the server: @@ -1602,7 +1602,7 @@ Mutation = new GraphQLMutation ``` -**Parameters Sent to the Server** +**Parameters sent to the Server** These parameters are passed to the mutation method for the **Batch** operation on the server: diff --git a/blazor/datagrid/connecting-to-adaptors/odatav4-adaptor.md b/blazor/datagrid/connecting-to-adaptors/odatav4-adaptor.md index 040c199504..80872a5c04 100644 --- a/blazor/datagrid/connecting-to-adaptors/odatav4-adaptor.md +++ b/blazor/datagrid/connecting-to-adaptors/odatav4-adaptor.md @@ -285,7 +285,7 @@ When the application runs, the DataGrid displays data retrieved from the OData V The Syncfusion® Blazor DataGrid supports server-side operations such as **searching**, **sorting**, **filtering**, **paging**, and **CRUD** when connected to an **OData V4** service through the `ODataV4Adaptor`. These operations are executed on the server using **OData** query options: * **$filter** – Applies **filter** conditions and **search** criteria from [DataManagerRequest](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataManagerRequest.html) to the data source. -* **$orderby** – Applies **sort** descriptors from `DataManagerRequest` for ascending or descending order. +* **$orderby** – Applies **sort** descriptors from `DataManagerRequest` for **ascending** or **descending** order. * **$skip, $top** – Applies **paging** details from `DataManagerRequest` to skip and retrieve records. * **$count** – Requests the total record count for **paging** and **aggregation**. @@ -356,7 +356,7 @@ builder.Services.AddControllers().AddOData( ## Handling filtering operation -Enable filtering by adding the **Filter** method in the OData configuration and setting [AllowFiltering](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_AllowFiltering) property to **true** in [SfGrid](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html). The **$filter** query option retrieves records based on specified criteria. +Enable filtering by adding the **Filter** method in the OData configuration and setting [AllowFiltering](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_AllowFiltering) property to **true** in [Grid](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html). The **$filter** query option retrieves records based on specified criteria. {% tabs %} {% highlight cs tabtitle="program.cs" %} @@ -409,7 +409,7 @@ builder.Services.AddControllers().AddOData( ## Handling sorting operation -Enable sorting by adding the **OrderBy** method in the OData configuration and setting [AllowSorting](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_AllowSorting) property to **true** in [SfGrid](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html). The **$orderby** query option sorts records based on specified fields. +Enable sorting by adding the **OrderBy** method in the OData configuration and setting [AllowSorting](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_AllowSorting) property to **true** in [Grid](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html). The **$orderby** query option sorts records based on specified fields. {% tabs %} {% highlight cs tabtitle="program.cs" %} @@ -463,7 +463,7 @@ builder.Services.AddControllers().AddOData( ## Handling paging operation -Paging can be enabled using the **SetMaxTop** method in the OData configuration and setting [AllowPaging](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_AllowPaging) property to **true** in [SfGrid](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html). The **$skip** and **$top** query options implement paging by skipping a specified number of records and retrieving the required count. +Paging can be enabled using the **SetMaxTop** method in the OData configuration and setting [AllowPaging](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_AllowPaging) property to **true** in [Grid](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html). The **$skip** and **$top** query options implement paging by skipping a specified number of records and retrieving the required count. {% tabs %} {% highlight cs tabtitle="program.cs" %} From c9f1b7925347af0dbf6eee89722602b022d6ee51 Mon Sep 17 00:00:00 2001 From: SadhanaBaskaran Date: Fri, 28 Nov 2025 10:21:53 +0530 Subject: [PATCH 3/3] 992668: Updated the UG content and samples for Adaptors in Blazor DataGrid --- .../datagrid/connecting-to-adaptors/custom-adaptor.md | 2 +- .../datagrid/connecting-to-adaptors/graphql-adaptor.md | 4 ++-- .../datagrid/connecting-to-adaptors/odatav4-adaptor.md | 10 +++++----- 3 files changed, 8 insertions(+), 8 deletions(-) diff --git a/blazor/datagrid/connecting-to-adaptors/custom-adaptor.md b/blazor/datagrid/connecting-to-adaptors/custom-adaptor.md index 165cb6a734..c0ae0bb9a9 100644 --- a/blazor/datagrid/connecting-to-adaptors/custom-adaptor.md +++ b/blazor/datagrid/connecting-to-adaptors/custom-adaptor.md @@ -1,6 +1,6 @@ --- layout: post -title: Bind Data and Perform CRUD with Syncfusion Blazor DataGrid CustomAdaptor +title: Bind Data and Perform CRUD Using Syncfusion Blazor DataGrid CustomAdaptor description: Learn how to implement custom data binding and enable full CRUD operations using CustomAdaptor in the Syncfusion Blazor DataGrid for flexible data handling. platform: Blazor control: DataGrid diff --git a/blazor/datagrid/connecting-to-adaptors/graphql-adaptor.md b/blazor/datagrid/connecting-to-adaptors/graphql-adaptor.md index fe309ceabd..1e5dcf28a9 100644 --- a/blazor/datagrid/connecting-to-adaptors/graphql-adaptor.md +++ b/blazor/datagrid/connecting-to-adaptors/graphql-adaptor.md @@ -1,6 +1,6 @@ --- layout: post -title: Bind GraphQL Data in Blazor DataGrid | Syncfusion +title: GraphQL Data Binding in Syncfusion Blazor DataGrid description: Learn how to bind data from a GraphQL API to the Syncfusion Blazor DataGrid, including querying, mutation, and integration techniques. platform: Blazor control: DataGrid @@ -836,7 +836,7 @@ public class OrdersDataResponse **Filtering** parameters are sent through the **Where** property of `DataManagerRequestInput`. Each filter condition includes: * **Field**: The column name to apply the filter. -* **Operator**: The comparison operator (e.g., equal, contains, greaterthan). +* **Operator**: The comparison operator (e.g., equal, contains, greater than). * **Value**: The value to compare against. * **IgnoreCase**: Indicates whether the comparison should be case-insensitive. * **Predicates**: Nested conditions for complex filtering. diff --git a/blazor/datagrid/connecting-to-adaptors/odatav4-adaptor.md b/blazor/datagrid/connecting-to-adaptors/odatav4-adaptor.md index 80872a5c04..75cba269e1 100644 --- a/blazor/datagrid/connecting-to-adaptors/odatav4-adaptor.md +++ b/blazor/datagrid/connecting-to-adaptors/odatav4-adaptor.md @@ -223,7 +223,7 @@ Include the theme and script references in **App.razor**: The [SfDataManager](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataManager.html) component provides multiple adaptors for remote data binding. For **OData V4** services, set the [Adaptor](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataManager.html#Syncfusion_Blazor_DataManager_Adaptor) property to [Adaptors.ODataV4Adaptor](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Adaptors.html#Syncfusion_Blazor_Adaptors_ODataV4Adaptor) and specify the service endpoint in the [Url](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataManager.html#Syncfusion_Blazor_DataManager_Url) property. {% tabs %} -{% highlight razor tabtitle="Index.razor"%} +{% highlight razor tabtitle="Index.razor" %} @using Syncfusion.Blazor.Grids @using Syncfusion.Blazor.Data @@ -320,7 +320,7 @@ builder.Services.AddControllers().AddOData( ); {% endhighlight %} -{% highlight razor tabtitle="Index.razor"%} +{% highlight razor tabtitle="Index.razor" %} @using Syncfusion.Blazor.Grids @using Syncfusion.Blazor.Data @@ -382,7 +382,7 @@ builder.Services.AddControllers().AddOData( ); {% endhighlight %} -{% highlight razor tabtitle="Index.razor"%} +{% highlight razor tabtitle="Index.razor" %} @using Syncfusion.Blazor.Grids @using Syncfusion.Blazor.Data @@ -436,7 +436,7 @@ builder.Services.AddControllers().AddOData( ); {% endhighlight %} -{% highlight razor tabtitle="Index.razor"%} +{% highlight razor tabtitle="Index.razor" %} @using Syncfusion.Blazor.Grids @using Syncfusion.Blazor.Data @@ -495,7 +495,7 @@ builder.Services.AddControllers().AddOData( ); {% endhighlight %} -{% highlight razor tabtitle="Index.razor"%} +{% highlight razor tabtitle="Index.razor" %} @using Syncfusion.Blazor.Grids @using Syncfusion.Blazor.Data