diff --git a/ej2-react-toc.html b/ej2-react-toc.html
index 4d2647431..bb3e9d6a9 100644
--- a/ej2-react-toc.html
+++ b/ej2-react-toc.html
@@ -1217,8 +1217,10 @@
Connecting to Adaptors
Adaptive View
diff --git a/ej2-react/grid/connecting-to-adaptors/odatav4-adaptor.md b/ej2-react/grid/connecting-to-adaptors/odatav4-adaptor.md
new file mode 100644
index 000000000..cdff524ed
--- /dev/null
+++ b/ej2-react/grid/connecting-to-adaptors/odatav4-adaptor.md
@@ -0,0 +1,547 @@
+---
+layout: post
+title: Bind & perform CRUD action with ODataV4Adaptor in Syncfusion Grid
+description: Learn here all about how to bind data and perform CRUD action using ODataV4Adaptor in Syncfusion React Grid component of Syncfusion Essential JS 2 and more.
+control: ODataV4 Adaptor
+platform: ej2-react
+documentation: ug
+domainurl: ##DomainURL##
+---
+
+# ODataV4Adaptor in Syncfusion React Grid Component
+
+The `ODataV4Adaptor` in the Syncfusion React Grid Component allows seamless integration of the React Grid with OData V4 services, enabling efficient data fetching and manipulation. This guide provides detailed instructions on binding data and performing CRUD (Create, Read, Update, Delete) actions using the `ODataV4Adaptor` in your Syncfusion React Grid Component.
+
+## Creating an OData service
+
+To configure a server with Syncfusion React Grid, you need to follow the below steps:
+
+**1. Project Creation:**
+
+Open Visual Studio and create an React and ASP.NET Core project named **ODataV4Adaptor**. To create an React and ASP.NET Core application, follow the documentation [link](https://learn.microsoft.com/en-us/visualstudio/javascript/tutorial-asp-net-core-with-react?view=vs-2022) for detailed steps.
+
+**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.
+
+**3. Model Class Creation:**
+
+Create a model class named **OrdersDetails.cs** in the server-side **Models** folder to represent the order data.
+
+{% tabs %}
+{% highlight cs tabtitle="OrdersDetails.cs" %}
+
+using System.ComponentModel.DataAnnotations;
+
+namespace ODataV4Adaptor.Server.Models
+{
+ public class OrdersDetails
+ {
+ public static List order = new List();
+ public OrdersDetails()
+ {
+
+ }
+ public OrdersDetails(
+ int OrderID, string CustomerId, int EmployeeId, string ShipCountry)
+ {
+ this.OrderID = OrderID;
+ this.CustomerID = CustomerId;
+ this.EmployeeID = EmployeeId;
+ this.ShipCountry = ShipCountry;
+ }
+
+ public static List GetAllRecords()
+ {
+ if (order.Count() == 0)
+ {
+ int code = 10000;
+ for (int i = 1; i < 10; i++)
+ {
+ order.Add(new OrdersDetails(code + 1, "ALFKI", i + 0, "Denmark"));
+ order.Add(new OrdersDetails(code + 2, "ANATR", i + 2, "Brazil"));
+ order.Add(new OrdersDetails(code + 3, "ANTON", i + 1, "Germany"));
+ order.Add(new OrdersDetails(code + 4, "BLONP", i + 3, "Austria"));
+ order.Add(new OrdersDetails(code + 5, "BOLID", i + 4, "Switzerland"));
+ code += 5;
+ }
+ }
+ return order;
+ }
+ [Key]
+ public int? OrderID { get; set; }
+ public string? CustomerID { get; set; }
+ public int? EmployeeID { get; set; }
+ public string? ShipCountry { get; set; }
+ }
+}
+
+{% endhighlight %}
+{% endtabs %}
+
+**4. Build the Entity Data Model**
+
+To construct the Entity Data Model for your OData service, utilize the `ODataConventionModelBuilder` to define the model's structure. Start by creating an instance of the `ODataConventionModelBuilder`, then register the entity set **Orders** using the `EntitySet` method, where `OrdersDetails` represents the CLR type containing order details.
+
+```cs
+// Create an ODataConventionModelBuilder to build the OData model
+var modelBuilder = new ODataConventionModelBuilder();
+
+// Register the "Orders" entity set with the OData model builder
+modelBuilder.EntitySet("Orders");
+```
+
+**5. Register the OData Services**
+
+Once the Entity Data Model is built, you need to register the OData services in your ASP.NET Core application. Here's how:
+
+```cs
+// Add controllers with OData support to the service collection
+builder.Services.AddControllers().AddOData(
+ options => options
+ .Count()
+ .AddRouteComponents("odata", modelBuilder.GetEdmModel()));
+```
+
+**6. Add controllers**
+
+Finally, add controllers to expose the OData endpoints. Here's an example:
+
+```cs
+using Microsoft.AspNetCore.Mvc;
+using Microsoft.AspNetCore.OData.Query;
+using ODataV4Adaptor.Server.Models;
+
+namespace ODataV4Adaptor.Server.Controllers
+{
+ [Route("[controller]")]
+ [ApiController]
+ public class OrdersController : ControllerBase
+ {
+ ///
+ /// Retrieves all orders.
+ ///
+ /// The collection of orders.
+ [HttpGet]
+ [EnableQuery]
+ public IActionResult Get()
+ {
+ var data = OrdersDetails.GetAllRecords().AsQueryable();
+ return Ok(data);
+ }
+ }
+}
+```
+
+**7. Run the Application:**
+
+Run the application in Visual Studio. It will be accessible on a URL like **https://localhost:xxxx**.
+
+After running the application, you can verify that the server-side API controller is successfully returning the order data in the URL(https://localhost:xxxx/odata/Orders). Here **xxxx** denotes the port number.
+
+## Connecting Syncfusion React Grid to an OData service
+
+To integrate the Syncfusion Grid component into your React and ASP.NET Core project using Visual Studio, follow the below steps:
+
+**Step 1: Install Syncfusion Package**
+
+Open your terminal in the project's client folder and install the required Syncfusion packages using npm:
+
+```bash
+npm install @syncfusion/ej2-react-grids --save
+npm install @syncfusion/ej2-data --save
+```
+
+**Step 2: Adding CSS reference**
+
+Include the necessary CSS files in your `styles.css` file to style the Syncfusion React component:
+
+{% tabs %}
+{% highlight css tabtitle="styles.css" %}
+
+@import '../node_modules/@syncfusion/ej2-base/styles/material.css';
+@import '../node_modules/@syncfusion/ej2-buttons/styles/material.css';
+@import '../node_modules/@syncfusion/ej2-calendars/styles/material.css';
+@import '../node_modules/@syncfusion/ej2-dropdowns/styles/material.css';
+@import '../node_modules/@syncfusion/ej2-inputs/styles/material.css';
+@import '../node_modules/@syncfusion/ej2-navigations/styles/material.css';
+@import '../node_modules/@syncfusion/ej2-popups/styles/material.css';
+@import '../node_modules/@syncfusion/ej2-splitbuttons/styles/material.css';
+@import '../node_modules/@syncfusion/ej2-react-grids/styles/material.css';
+
+{% endhighlight %}
+{% endtabs %}
+
+**Step 4: Adding Syncfusion Component**
+
+In your component file (e.g., App.tsx), import `DataManager` and `ODataV4Adaptor` from `@syncfusion/ej2-data`. Create a `DataManager` instance specifying the URL of your API endpoint(https:localhost:xxxx/odata/Orders) using the `url` property and set the adaptor `ODataV4Adaptor`.
+
+{% tabs %}
+{% highlight ts tabtitle="App.tsx" %}
+import { DataManager, ODataV4Adaptor } from '@syncfusion/ej2-data';
+import { ColumnDirective, ColumnsDirective, GridComponent } from '@syncfusion/ej2-react-grids';
+
+function App() {
+ const data = new DataManager({
+ url:'https://localhost:xx/odata/Orders', // Here xx represents the port number
+ adaptor: new ODataV4Adaptor()
+ });
+ return
+
+
+
+
+
+
+
+};
+export default App;
+{% endhighlight %}
+{% endtabs %}
+
+> Replace https://localhost:xxxx/odata/Orders with the actual **URL** of your API endpoint that provides the data in a consumable format (e.g., JSON).
+
+Run the application in Visual Studio. It will be accessible on a URL like **https://localhost:xxxx**.
+
+> Ensure your API service is configured to handle CORS (Cross-Origin Resource Sharing) if necessary.
+
+ ```cs
+ [program.cs]
+ builder.Services.AddCors(options =>
+ {
+ options.AddDefaultPolicy(builder =>
+ {
+ builder.AllowAnyOrigin().AllowAnyMethod().AllowAnyHeader();
+ });
+ });
+ var app = builder.Build();
+ app.UseCors();
+ ```
+
+## Handling filtering operation
+
+To enable filter operations in your web application using OData, you first need to configure the 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 your requests to filter for specific data entries.
+
+{% tabs %}
+{% highlight cs tabtitle="Program.cs" %}
+// Create a new instance of the web application builder
+var builder = WebApplication.CreateBuilder(args);
+
+// Create an ODataConventionModelBuilder to build the OData model
+var modelBuilder = new ODataConventionModelBuilder();
+
+// Register the "Orders" entity set with the OData model builder
+modelBuilder.EntitySet("Orders");
+
+// Add services to the container.
+
+// Add controllers with OData support to the service collection
+builder.Services.AddControllers().AddOData(
+ options => options
+ .Count()
+ .Filter() //filtering
+ .AddRouteComponents("odata", modelBuilder.GetEdmModel()));
+{% endhighlight %}
+{% highlight ts tabtitle="App.tsx" %}
+import { DataManager, ODataV4Adaptor } from '@syncfusion/ej2-data';
+import { ColumnDirective, ColumnsDirective, GridComponent, Filter } from '@syncfusion/ej2-react-grids';
+
+function App() {
+ const data = new DataManager({
+ url:'https://localhost:xxxx/odata/Orders', // Replace your hosted link
+ adaptor: new ODataV4Adaptor()
+ });
+ return
+
+
+
+
+
+
+
+
+};
+export default App;
+{% endhighlight %}
+{% endtabs %}
+
+**Single column filtering**
+
+
+
+**Multi column filtering**
+
+
+
+## Handling searching operation
+
+To enable search operations in your web application using OData, you first need to configure the 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.
+
+{% tabs %}
+{% highlight cs tabtitle="program.cs" %}
+// Create a new instance of the web application builder
+var builder = WebApplication.CreateBuilder(args);
+
+// Create an ODataConventionModelBuilder to build the OData model
+var modelBuilder = new ODataConventionModelBuilder();
+
+// Register the "Orders" entity set with the OData model builder
+modelBuilder.EntitySet("Orders");
+
+// Add services to the container.
+
+// Add controllers with OData support to the service collection
+builder.Services.AddControllers().AddOData(
+ options => options
+ .Count()
+ .Filter() // searching
+ .AddRouteComponents("odata", modelBuilder.GetEdmModel()));
+{% endhighlight %}
+{% highlight ts tabtitle="App.tsx" %}
+import { DataManager, ODataV4Adaptor } from '@syncfusion/ej2-data';
+import { ColumnDirective, ColumnsDirective, GridComponent, Toolbar, ToolbarItems } from '@syncfusion/ej2-react-grids';
+
+function App() {
+ const data = new DataManager({
+ url:'https://localhost:xxxx/odata/Orders', // Replace your hosted link
+ adaptor: new ODataV4Adaptor()
+ });
+ const toolbar: ToolbarItems[] = ['Search'];
+ return
+
+
+
+
+
+
+
+
+};
+export default App;
+{% endhighlight %}
+{% endtabs %}
+
+
+
+## Handling sorting operation
+
+To enable sorting operations in your web application using OData, you first need to configure the 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 desired attributes.
+
+{% tabs %}
+{% highlight cs tabtitle="program.cs" %}
+// Create a new instance of the web application builder
+var builder = WebApplication.CreateBuilder(args);
+
+// Create an ODataConventionModelBuilder to build the OData model
+var modelBuilder = new ODataConventionModelBuilder();
+
+// Register the "Orders" entity set with the OData model builder
+modelBuilder.EntitySet("Orders");
+
+// Add services to the container.
+
+// Add controllers with OData support to the service collection
+builder.Services.AddControllers().AddOData(
+ options => options
+ .Count()
+ .OrderBy() // sorting
+ .AddRouteComponents("odata", modelBuilder.GetEdmModel()));
+{% endhighlight %}
+{% highlight ts tabtitle="App.tsx" %}
+import { DataManager, ODataV4Adaptor } from '@syncfusion/ej2-data';
+import { ColumnDirective, ColumnsDirective, GridComponent, Sort } from '@syncfusion/ej2-react-grids';
+
+function App() {
+ const data = new DataManager({
+ url:'https://localhost:xxxx/odata/Orders', // Replace your hosted link
+ adaptor: new ODataV4Adaptor()
+ });
+ return
+
+
+
+
+
+
+
+
+};
+export default App;
+{% endhighlight %}
+{% endtabs %}
+
+**Single column sorting**
+
+
+
+**Multi column sorting**
+
+
+
+## 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.
+
+{% tabs %}
+{% highlight cs tabtitle="Program.cs" %}
+
+// Create a new instance of the web application builder
+var builder = WebApplication.CreateBuilder(args);
+
+// Create an ODataConventionModelBuilder to build the OData model
+var modelBuilder = new ODataConventionModelBuilder();
+
+// Register the "Orders" entity set with the OData model builder
+modelBuilder.EntitySet("Orders");
+
+// Add services to the container.
+
+// Add controllers with OData support to the service collection
+builder.Services.AddControllers().AddOData(
+ options => options
+ .Count()
+ .SetMaxTop(null)
+ .AddRouteComponents("odata", modelBuilder.GetEdmModel()));
+
+{% endhighlight %}
+{% highlight ts tabtitle="App.tsx" %}
+import { DataManager, ODataV4Adaptor } from '@syncfusion/ej2-data';
+import { ColumnDirective, ColumnsDirective, GridComponent, Page } from '@syncfusion/ej2-react-grids';
+
+function App() {
+ const data = new DataManager({
+ url: 'https://localhost:xxxx/odata/Orders', // Replace your hosted link
+ adaptor: new ODataV4Adaptor()
+ });
+ return
+
+
+
+
+
+
+
+
+};
+export default App;
+{% endhighlight %}
+{% endtabs %}
+
+
+
+## Handling CRUD operations
+
+To manage CRUD (Create, Read, Update, Delete) operations using the ODataV4Adaptor, follow the provided guide for configuring the Syncfusion Grid for [editing](https://ej2.syncfusion.com/react/documentation/grid/editing/edit) and utilize the sample implementation of the `OrdersController` in your server application. This controller handles HTTP requests for CRUD operations such as GET, POST, PATCH, and DELETE.
+
+To enable CRUD operations in the Syncfusion Grid component within an React application, follow the below steps:
+
+{% tabs %}
+{% highlight ts tabtitle="App.tsx" %}
+import { ColumnDirective, ColumnsDirective, GridComponent, ToolbarItems, EditSettingsModel, Toolbar, Edit, Inject } from '@syncfusion/ej2-react-grids';
+import { DataManager, ODataV4Adaptor } from '@syncfusion/ej2-data';
+
+function App() {
+ const data = new DataManager({
+ url: 'https://localhost:xxxx/odata/Orders', // xxxx denotes port number
+ adaptor: new ODataV4Adaptor()
+ });
+ const editSettings: EditSettingsModel = { allowEditing: true, allowAdding: true, allowDeleting: true, mode: 'Normal' };
+ const toolbar: ToolbarItems[] = ['Add', 'Edit', 'Delete', 'Update', 'Cancel', 'Search'];
+ const orderIDRules: object = {required: true};
+ const customerIDRules: object = {required: true, minLength: 3};
+ return
+
+
+
+
+
+
+
+
+};
+export default App;
+{% endhighlight %}
+{% endtabs %}
+
+> Normal/Inline editing is the default edit [mode](https://ej2.syncfusion.com/react/documentation/api/grid/editSettings/#mode) for the Grid component. To enable CRUD operations, ensure that the [isPrimaryKey](https://ej2.syncfusion.com/react/documentation/api/grid/column/#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 Grid, you can utilize the `HttpPost` method in your server application. Below is a sample implementation of inserting a record using the **OrdersController**:
+
+```cs
+///
+/// Inserts a new order to the collection.
+///
+/// The order to be inserted.
+/// It returns the newly inserted record detail.
+[HttpPost]
+[EnableQuery]
+public IActionResult Post([FromBody] OrdersDetails addRecord)
+{
+ if (order == null)
+ {
+ return BadRequest("Null order");
+ }
+
+ OrdersDetails.GetAllRecords().Insert(0, addRecord);
+ return Ok(addRecord);
+}
+```
+
+
+
+**Update Record**
+
+Updating a record in the Syncfusion Grid can be achieved by utilizing the `HttpPatch` method in your controller. Here's a sample implementation of updating a record:
+
+```cs
+///
+/// Updates an existing order.
+///
+/// The ID of the order to update.
+/// The updated order details.
+/// It returns the updated order details.
+[HttpPatch("{key}")]
+public IActionResult Patch(int key, [FromBody] OrdersDetails updatedOrder)
+{
+ if (updatedOrder == null)
+ {
+ return BadRequest("No records");
+ }
+ var existingOrder = OrdersDetails.GetAllRecords().FirstOrDefault(o => o.OrderID == key);
+ if (existingOrder != null)
+ {
+ // If the order exists, update its properties
+ existingOrder.CustomerID = updatedOrder.CustomerID ?? existingOrder.CustomerID;
+ existingOrder.EmployeeID = updatedOrder.EmployeeID ?? existingOrder.EmployeeID;
+ existingOrder.ShipCountry = updatedOrder.ShipCountry ?? existingOrder.ShipCountry;
+ }
+ return Ok(existingOrder);
+}
+```
+
+
+**Delete Record**
+
+To delete a record from your Syncfusion Grid, you can utilize the `HttpDelete` method in your controller. Below is a sample implementation:
+
+```cs
+///
+/// Deletes an order.
+///
+/// The key of the order to be deleted.
+/// The deleted order.
+[HttpDelete("{key}")]
+public IActionResult Delete(int key)
+{
+ var order = OrdersDetails.GetAllRecords().FirstOrDefault(o => o.OrderID == key);
+ if (order != null)
+ {
+ OrdersDetails.GetAllRecords().Remove(order);
+ }
+ return Ok(order);
+}
+```
+
+
\ No newline at end of file
diff --git a/ej2-react/grid/connecting-to-adaptors/url-adaptor.md b/ej2-react/grid/connecting-to-adaptors/url-adaptor.md
index 6766dbd93..6a852b144 100644
--- a/ej2-react/grid/connecting-to-adaptors/url-adaptor.md
+++ b/ej2-react/grid/connecting-to-adaptors/url-adaptor.md
@@ -137,9 +137,9 @@ namespace UrlAdaptor.Server.Controllers
**4. Run the Application:**
-Run the application in Visual Studio. It will be accessible on a URL like **https://localhost:xx**.
+Run the application in Visual Studio. It will be accessible on a URL like **https://localhost:xxxx**.
-After running the application, you can verify that the server-side API controller is successfully returning the order data in the URL(https://localhost:xx/api/Grid). Here **xx** denotes the port number.
+After running the application, you can verify that the server-side API controller is successfully returning the order data in the URL(https://localhost:xxxx/api/Grid). Here **xxxx** denotes the port number.
@@ -178,7 +178,7 @@ Include the necessary CSS files in your `styles.css` file to style the Syncfusio
**Step 4: Adding Syncfusion component**
-In your component file (e.g., App.ts), import `DataManager` and `UrlAdaptor` from `@syncfusion/ej2-data`. Create a `DataManager` instance specifying the URL of your API endpoint(https:localhost:xx/api/Grid) using the `url` property and set the adaptor `UrlAdaptor`.
+In your component file (e.g., App.ts), import `DataManager` and `UrlAdaptor` from `@syncfusion/ej2-data`. Create a `DataManager` instance specifying the URL of your API endpoint(https:localhost:xxxx/api/Grid) using the `url` property and set the adaptor `UrlAdaptor`.
{% tabs %}
{% highlight ts tabtitle="App.tsx" %}
@@ -206,9 +206,9 @@ export default App;
{% endhighlight %}
{% endtabs %}
-> Replace https://localhost:****/api/grid with the actual **URL** of your API endpoint that provides the data in a consumable format (e.g., JSON).
+> Replace https://localhost:xxxx/api/grid with the actual **URL** of your API endpoint that provides the data in a consumable format (e.g., JSON).
-Run the application in Visual Studio. It will be accessible on a URL like https://localhost:xx.
+Run the application in Visual Studio. It will be accessible on a URL like https://localhost:xxxx.
> Ensure your API service is configured to handle CORS (Cross-Origin Resource Sharing) if necessary.
diff --git a/ej2-react/grid/connecting-to-adaptors/web-method-adaptor.md b/ej2-react/grid/connecting-to-adaptors/web-method-adaptor.md
new file mode 100644
index 000000000..ba5a6e874
--- /dev/null
+++ b/ej2-react/grid/connecting-to-adaptors/web-method-adaptor.md
@@ -0,0 +1,792 @@
+---
+layout: post
+title: Bind & perform CRUD action with WebMethodAdaptor in Syncfusion Grid
+description: Learn here all about how to bind data and perform CRUD action using WebMethodAdaptor in Syncfusion React Grid component of Syncfusion Essential JS 2 and more.
+control: WebMethod Adaptor
+platform: ej2-react
+documentation: ug
+domainurl: ##DomainURL##
+---
+
+# WebMethodAdaptor in Syncfusion React Grid Component
+
+The [WebMethodAdaptor](https://ej2.syncfusion.com/react/documentation/data/adaptors#webmethod-adaptor) in Syncfusion React Grid facilitates data binding from remote services using web methods. This powerful feature enables efficient communication between the client-side application and the server. The WebMethodAdaptor, like the URL adaptor, sends query parameters encapsulated within an object named **value**. Within this **value** object, various datamanager properties such as **requiresCounts**, **skip**, **take**, **sorted**, and **where** queries are included.
+
+
+
+This section describes a step-by-step process for retrieving data using WebMethodAdaptor, then binding it to the React Grid component to facilitate data and CRUD operations.
+
+## Creating an API service
+
+To configure a server with Syncfusion React Grid, you need to follow the below steps:
+
+**1. Project Creation:**
+
+Open Visual Studio and create an React and ASP.NET Core project named **WebMethodAdaptor**. To create an React and ASP.NET Core application, follow the documentation [link](https://learn.microsoft.com/en-us/visualstudio/javascript/tutorial-asp-net-core-with-react?view=vs-2022) for detailed steps.
+
+**2. Model Class Creation:**
+
+Create a model class named **OrdersDetails.cs** in the server-side **Models** folder to represent the order data.
+
+{% tabs %}
+{% highlight cs tabtitle="OrdersDetails.cs" %}
+
+ namespace WebMethodAdaptor.Server.Models
+ {
+ public class OrdersDetails
+ {
+ public static List order = new List();
+ public OrdersDetails()
+ {
+
+ }
+ public OrdersDetails(
+ int OrderID, string CustomerId, int EmployeeId, double Freight, bool Verified,
+ DateTime OrderDate, string ShipCity, string ShipName, string ShipCountry,
+ DateTime ShippedDate, string ShipAddress)
+ {
+ this.OrderID = OrderID;
+ this.CustomerID = CustomerId;
+ this.EmployeeID = EmployeeId;
+ this.Freight = Freight;
+ this.ShipCity = ShipCity;
+ this.Verified = Verified;
+ this.OrderDate = OrderDate;
+ this.ShipName = ShipName;
+ this.ShipCountry = ShipCountry;
+ this.ShippedDate = ShippedDate;
+ this.ShipAddress = ShipAddress;
+ }
+
+ public static List GetAllRecords()
+ {
+ if (order.Count() == 0)
+ {
+ int code = 10000;
+ for (int i = 1; i < 10; i++)
+ {
+ order.Add(new OrdersDetails(code + 1, "ALFKI", i + 0, 2.3 * i, false, new DateTime(1991, 05, 15), "Berlin", "Simons bistro", "Denmark", new DateTime(1996, 7, 16), "Kirchgasse 6"));
+ order.Add(new OrdersDetails(code + 2, "ANATR", i + 2, 3.3 * i, true, new DateTime(1990, 04, 04), "Madrid", "Queen Cozinha", "Brazil", new DateTime(1996, 9, 11), "Avda. Azteca 123"));
+ order.Add(new OrdersDetails(code + 3, "ANTON", i + 1, 4.3 * i, true, new DateTime(1957, 11, 30), "Cholchester", "Frankenversand", "Germany", new DateTime(1996, 10, 7), "Carrera 52 con Ave. Bolívar #65-98 Llano Largo"));
+ order.Add(new OrdersDetails(code + 4, "BLONP", i + 3, 5.3 * i, false, new DateTime(1930, 10, 22), "Marseille", "Ernst Handel", "Austria", new DateTime(1996, 12, 30), "Magazinweg 7"));
+ order.Add(new OrdersDetails(code + 5, "BOLID", i + 4, 6.3 * i, true, new DateTime(1953, 02, 18), "Tsawassen", "Hanari Carnes", "Switzerland", new DateTime(1997, 12, 3), "1029 - 12th Ave. S."));
+ code += 5;
+ }
+ }
+ return order;
+ }
+
+ public int? OrderID { get; set; }
+ public string? CustomerID { get; set; }
+ public int? EmployeeID { get; set; }
+ public double? Freight { get; set; }
+ public string? ShipCity { get; set; }
+ public bool? Verified { get; set; }
+ public DateTime OrderDate { get; set; }
+ public string? ShipName { get; set; }
+ public string? ShipCountry { get; set; }
+ public DateTime ShippedDate { get; set; }
+ public string? ShipAddress { get; set; }
+ }
+}
+
+{% endhighlight %}
+{% endtabs %}
+
+**3. API Controller Creation:**
+
+Create a file named `GridController.cs` under the **Controllers** folder. This controller will handle data communication with the React Grid component.
+
+{% tabs %}
+{% highlight cs tabtitle="GridController.cs" %}
+
+using Microsoft.AspNetCore.Http;
+using Microsoft.AspNetCore.Mvc;
+using WebMethodAdaptor.Server.Models;
+
+namespace WebMethodAdaptor.Server.Controllers
+{
+ [Route("api/[controller]")]
+ [ApiController]
+ public class GridController : ControllerBase
+ {
+
+ // method to retrieve data
+ [HttpGet]
+ [Route("api/[controller]")]
+ public List GetOrderData()
+ {
+ // Retrieve all records and convert to list
+ var data = OrdersDetails.GetAllRecords().ToList();
+ return data;
+ }
+
+ // method to handle incoming data manager requests
+ [HttpPost]
+ [Route("api/[controller]")]
+ public object Post()
+ {
+ // Retrieve data source and convert to queryable
+ IQueryable DataSource = GetOrderData().AsQueryable();
+
+ // Initialize QueryableOperation
+ QueryableOperation queryableOperation = new QueryableOperation();
+
+ // Get total record count
+ int totalRecordsCount = DataSource.Count();
+
+ // Return result and total record count
+ return new { result = DataSource, count = totalRecordsCount };
+ }
+ }
+}
+
+{% endhighlight %}
+{% endtabs %}
+
+> The **GetOrderData** method retrieves sample order data. You can replace it with your custom logic to fetch data from a database or any other source.
+
+**4. Run the Application:**
+
+Run the application in Visual Studio. It will be accessible on a URL like **https://localhost:xxxx**.
+
+After running the application, you can verify that the server-side API controller is successfully returning the order data in the URL(https://localhost:xxxx/api/Grid). Here **xxxx** denotes the port number.
+
+
+
+## Connecting Syncfusion React Grid to an API service
+
+To integrate the Syncfusion Grid component into your React and ASP.NET Core project using Visual Studio, follow the below steps:
+
+**Step 1: Install Syncfusion Package**
+
+Open your terminal in the project's client folder and install the required Syncfusion packages using npm:
+
+```bash
+npm install @syncfusion/ej2-react-grids --save
+npm install @syncfusion/ej2-data --save
+```
+
+**Step 2: Adding CSS reference**
+
+Include the necessary CSS files in your `styles.css` file to style the Syncfusion React component:
+
+{% tabs %}
+{% highlight css tabtitle="styles.css" %}
+
+@import '../node_modules/@syncfusion/ej2-base/styles/material.css';
+@import '../node_modules/@syncfusion/ej2-buttons/styles/material.css';
+@import '../node_modules/@syncfusion/ej2-calendars/styles/material.css';
+@import '../node_modules/@syncfusion/ej2-dropdowns/styles/material.css';
+@import '../node_modules/@syncfusion/ej2-inputs/styles/material.css';
+@import '../node_modules/@syncfusion/ej2-navigations/styles/material.css';
+@import '../node_modules/@syncfusion/ej2-popups/styles/material.css';
+@import '../node_modules/@syncfusion/ej2-splitbuttons/styles/material.css';
+@import '../node_modules/@syncfusion/ej2-react-grids/styles/material.css';
+
+{% endhighlight %}
+{% endtabs %}
+
+**Step 3: Adding Syncfusion Component**
+
+In your component file (e.g., App.tsx), import `DataManager` and `WebMethodAdaptor` from `@syncfusion/ej2-data`. Create a `DataManager` instance specifying the URL of your API endpoint(https:localhost:xxxx/api/Grid) using the `url` property and set the adaptor `WebMethodAdaptor`.
+
+{% tabs %}
+{% highlight ts tabtitle="App.tsx" %}
+import { DataManager, WebMethodAdaptor } from '@syncfusion/ej2-data';
+import { ColumnDirective, ColumnsDirective, GridComponent } from '@syncfusion/ej2-react-grids';
+
+function App() {
+ const data = new DataManager({
+ url:'https://localhost:xxxx/api/grid', // Here xxxx represents the port number
+ adaptor: new WebMethodAdaptor()
+ });
+ return
+
+
+
+
+
+
+
+};
+export default App;
+{% endhighlight %}
+{% endtabs %}
+
+> Replace https://localhost:xxxx/api/grid with the actual **URL** of your API endpoint that provides the data in a consumable format (e.g., JSON).
+
+Run the application in Visual Studio. It will be accessible on a URL like **https://localhost:xxxx**.
+
+> Ensure your API service is configured to handle CORS (Cross-Origin Resource Sharing) if necessary.
+
+ ```cs
+ [program.cs]
+ builder.Services.AddCors(options =>
+ {
+ options.AddDefaultPolicy(builder =>
+ {
+ builder.AllowAnyOrigin().AllowAnyMethod().AllowAnyHeader();
+ });
+ });
+ var app = builder.Build();
+ app.UseCors();
+ ```
+
+
+
+> * The Syncfusion Grid component provides built-in support for handling various data operations such as searching, sorting, filtering, aggregate and paging on the server-side. These operations can be handled using methods such as [PerformSearching](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Base.QueryableOperation.html#Syncfusion_EJ2_Base_QueryableOperation_PerformSearching__1_System_Linq_IQueryable___0__System_Collections_Generic_List_Syncfusion_EJ2_Base_SearchFilter__), [PerformFiltering](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Base.QueryableOperation.html#Syncfusion_EJ2_Base_QueryableOperation_PerformFiltering__1_System_Linq_IQueryable___0__System_Collections_Generic_List_Syncfusion_EJ2_Base_WhereFilter__System_String_), [PerformSorting](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Base.QueryableOperation.html#Syncfusion_EJ2_Base_QueryableOperation_PerformSorting__1_System_Linq_IQueryable___0__System_Collections_Generic_List_Syncfusion_EJ2_Base_Sort__), [PerformTake](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Base.QueryableOperation.html#Syncfusion_EJ2_Base_QueryableOperation_PerformTake__1_System_Linq_IQueryable___0__System_Int32_) and [PerformSkip](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Base.QueryableOperation.html#Syncfusion_EJ2_Base_QueryableOperation_PerformSkip__1_System_Linq_IQueryable___0__System_Int32_) available in the `Syncfusion.EJ2.AspNet.Core` package. Let’s explore how to manage these data operations using the `WebMethodAdaptor`.
+> * In an API service project, add `Syncfusion.EJ2.AspNet.Core` by opening the NuGet package manager in Visual Studio (Tools → NuGet Package Manager → Manage NuGet Packages for Solution), search and install it.
+> * To access [DataManagerRequest](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Base.DataManagerRequest.html) and [QueryableOperation](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Base.QueryableOperation.html), import `Syncfusion.EJ2.Base` in `GridController.cs` file.
+> * In the WebMethodAdaptor configuration, the properties of the DataManager object are encapsulated within an object named **value**. To access the DataManager properties, a dedicated class is created, representing the **value** object.
+ ```cs
+ // Model for handling data manager requests
+ public class DataManager
+ {
+ public required DataManagerRequest Value { get; set; }
+ }
+ ```
+
+## Handling filtering operation
+
+To handle filtering operation, ensure that your API endpoint supports custom filtering criteria. Implement the filtering logic on the server-side using the [PerformFiltering](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Base.QueryableOperation.html#Syncfusion_EJ2_Base_QueryableOperation_PerformFiltering__1_System_Linq_IQueryable___0__System_Collections_Generic_List_Syncfusion_EJ2_Base_WhereFilter__System_String_) method from the [QueryableOperation](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Base.QueryableOperation.html) class. This allows the custom data source to undergo filtering based on the criteria specified in the incoming [DataManagerRequest](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Base.DataManagerRequest.html) object.
+
+**Single column filtering**
+
+
+
+**Multi column filtering**
+
+
+
+{% tabs %}
+{% highlight cs tabtitle="GridController.cs" %}
+[HttpPost]
+public object Post([FromBody] DataManager DataManagerRequest)
+{
+ // Retrieve data from the data source (e.g., database)
+ IQueryable DataSource = GetOrderData().AsQueryable();
+
+ QueryableOperation queryableOperation = new QueryableOperation(); // Initialize QueryableOperation instance
+
+ // Retrieve data manager value
+ DataManagerRequest DataManagerParams = DataManagerRequest.Value;
+
+ if (DataManagerParams.Where != null && DataManagerParams.Where.Count > 0)
+ {
+ // Handling filtering operation
+ foreach (var condition in DataManagerParams.Where)
+ {
+ foreach (var predicate in condition.predicates)
+ {
+ DataSource = queryableOperation.PerformFiltering(DataSource, DataManagerParams.Where, predicate.Operator);
+ }
+ }
+ }
+ // Get the total records count
+ int totalRecordsCount = DataSource.Count();
+
+ // Return data based on the request
+ return new { result = DataSource, count = totalRecordsCount };
+}
+
+// Model for handling data manager requests
+public class DataManager
+{
+ public required DataManagerRequest Value { get; set; }
+}
+{% endhighlight %}
+{% highlight ts tabtitle="App.tsx" %}
+import { DataManager, WebMethodAdaptor } from '@syncfusion/ej2-data';
+import { ColumnDirective, ColumnsDirective, GridComponent, Inject, Filter } from '@syncfusion/ej2-react-grids';
+
+function App() {
+ const data = new DataManager({
+ url:'https://localhost:xxxx/api/Grid', // Replace your hosted link
+ adaptor: new WebMethodAdaptor()
+ });
+ return
+
+
+
+
+
+
+
+};
+export default App;
+{% endhighlight %}
+{% endtabs %}
+
+## Handling searching operation
+
+To handle searching operation, ensure that your API endpoint supports custom searching criteria. Implement the searching logic on the server-side using the [PerformSearching](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Base.QueryableOperation.html#Syncfusion_EJ2_Base_QueryableOperation_PerformSearching__1_System_Linq_IQueryable___0__System_Collections_Generic_List_Syncfusion_EJ2_Base_SearchFilter__) method from the [QueryableOperation](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Base.QueryableOperation.html) class. This allows the custom data source to undergo searching based on the criteria specified in the incoming [DataManagerRequest](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Base.DataManagerRequest.html) object
+
+
+
+{% tabs %}
+{% highlight cs tabtitle="GridController.cs" %}
+ [HttpPost]
+ public object Post([FromBody] DataManager DataManagerRequest)
+ {
+ // Retrieve data from the data source (e.g., database)
+ IQueryable DataSource = GetOrderData().AsQueryable();
+
+ QueryableOperation queryableOperation = new QueryableOperation(); // Initialize QueryableOperation instance
+
+ // Retrieve data manager value
+ DataManagerRequest DataManagerParams = DataManagerRequest.Value;
+
+ // Handling Searching
+ if (DataManagerParams.Search != null && DataManagerParams.Search.Count > 0)
+ {
+ DataSource = queryableOperation.PerformSearching(DataSource, DataManagerParams.Search);
+ }
+ // Get the total records count
+ int totalRecordsCount = DataSource.Count();
+
+ // Return data based on the request
+ return new { result = DataSource, count = totalRecordsCount };
+ }
+
+ // Model for handling data manager requests
+ public class DataManager
+ {
+ public required DataManagerRequest Value { get; set; }
+ }
+{% endhighlight %}
+{% highlight ts tabtitle="App.tsx" %}
+import { DataManager, WebMethodAdaptor } from '@syncfusion/ej2-data';
+import { ColumnDirective, ColumnsDirective, GridComponent, Toolbar, ToolbarItems } from '@syncfusion/ej2-react-grids';
+
+function App() {
+ const data = new DataManager({
+ url:'https://localhost:xxxx/api/Grid', // Replace your hosted link
+ adaptor: new WebMethodAdaptor()
+ });
+ const toolbar: ToolbarItems[] = ['Search'];
+ return
+
+
+
+
+
+
+
+};
+export default App;
+{% endhighlight %}
+{% endtabs %}
+
+## Handling sorting operation
+
+To handle sorting operation, ensure that your API endpoint supports custom sorting criteria. Implement the sorting logic on the server-side using the [PerformSorting](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Base.QueryableOperation.html#Syncfusion_EJ2_Base_QueryableOperation_PerformSorting__1_System_Linq_IQueryable___0__System_Collections_Generic_List_Syncfusion_EJ2_Base_Sort__) method from the [QueryableOperation](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Base.QueryableOperation.html) class. This allows the custom data source to undergo sorting based on the criteria specified in the incoming [DataManagerRequest](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Base.DataManagerRequest.html) object.
+
+**Single column sorting**
+
+
+
+**Multi column sorting**
+
+
+
+{% tabs %}
+{% highlight cs tabtitle="GridController.cs" %}
+[HttpPost]
+public object Post([FromBody] DataManager DataManagerRequest)
+{
+ // Retrieve data from the data source (e.g., database)
+ IQueryable DataSource = GetOrderData().AsQueryable();
+
+ QueryableOperation queryableOperation = new QueryableOperation(); // Initialize QueryableOperation instance
+
+ // Retrieve data manager value
+ DataManagerRequest DataManagerParams = DataManagerRequest.Value;
+
+ // Handling Sorting operation
+ if (DataManagerParams.Sorted != null && DataManagerParams.Sorted.Count > 0)
+ {
+ DataSource = queryableOperation.PerformSorting(DataSource, DataManagerParams.Sorted);
+ }
+
+ // Get the total count of records
+ int totalRecordsCount = DataSource.Count();
+
+ // Return data based on the request
+ return new { result = DataSource, count = totalRecordsCount };
+}
+
+// Model for handling data manager requests
+public class DataManager
+{
+ public required DataManagerRequest Value { get; set; }
+}
+{% endhighlight %}
+{% highlight ts tabtitle="App.tsx" %}
+import { DataManager, WebMethodAdaptor } from '@syncfusion/ej2-data';
+import { ColumnDirective, ColumnsDirective, GridComponent, Sort } from '@syncfusion/ej2-react-grids';
+
+function App() {
+ const data = new DataManager({
+ url:'https://localhost:xxxx//Orders', // Replace your hosted link
+ adaptor: new WebMethodAdaptor()
+ });
+ return
+
+
+
+
+
+
+
+};
+export default App;
+{% endhighlight %}
+{% endtabs %}
+
+## Handling paging operation
+
+To handle paging operation, ensure that your API endpoint supports custom paging criteria. Implement the paging logic on the server-side using the [PerformTake](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Base.QueryableOperation.html#Syncfusion_EJ2_Base_QueryableOperation_PerformTake__1_System_Linq_IQueryable___0__System_Int32_) and [PerformSkip](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Base.QueryableOperation.html#Syncfusion_EJ2_Base_QueryableOperation_PerformSkip__1_System_Linq_IQueryable___0__System_Int32_) method from the [QueryableOperation](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Base.QueryableOperation.html) class. This allows the custom data source to undergo paging based on the criteria specified in the incoming [DataManagerRequest](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Base.DataManagerRequest.html) object.
+
+
+
+{% tabs %}
+{% highlight cs tabtitle="GridController.cs" %}
+[HttpPost]
+public object Post([FromBody] DataManager DataManagerRequest)
+{
+ // Retrieve data from the data source (e.g., database)
+ IQueryable DataSource = GetOrderData().AsQueryable();
+
+ // Get the total records count
+ int totalRecordsCount = DataSource.Count();
+
+ QueryableOperation queryableOperation = new QueryableOperation(); // Initialize QueryableOperation instance
+
+ // Retrieve data manager value
+ DataManagerRequest DataManagerParams = DataManagerRequest.Value;
+
+ // Handling paging operation.
+ if (DataManagerParams.Skip != 0)
+ {
+ // Paging
+ DataSource = queryableOperation.PerformSkip(DataSource, DataManagerParams.Skip);
+ }
+ if (DataManagerParams.Take != 0)
+ {
+ DataSource = queryableOperation.PerformTake(DataSource, DataManagerParams.Take);
+ }
+
+ // Return data based on the request
+ return new { result = DataSource, count = totalRecordsCount };
+}
+
+// Model for handling data manager requests
+public class DataManager
+{
+ public required DataManagerRequest Value { get; set; }
+}
+{% endhighlight %}
+{% highlight ts tabtitle="App.tsx" %}
+import { DataManager, WebMethodAdaptor } from '@syncfusion/ej2-data';
+import { ColumnDirective, ColumnsDirective, GridComponent, Page, Inject } from '@syncfusion/ej2-react-grids';
+
+function App() {
+ const data = new DataManager({
+ url:'https://localhost:xxxx/odata/Orders', // Replace your hosted link
+ adaptor: new WebMethodAdaptor()
+ });
+ return
+
+
+
+
+
+
+
+};
+export default App;
+{% endhighlight %}
+{% endtabs %}
+
+## Handling CRUD operations
+
+The Syncfusion React Grid Component seamlessly integrates CRUD (Create, Read, Update, Delete) operations with server-side controller actions through specific properties: [insertUrl](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.DataManager.html#Syncfusion_EJ2_DataManager_InsertUrl), [removeUrl](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.DataManager.html#Syncfusion_EJ2_DataManager_RemoveUrl), [updateUrl](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.DataManager.html#Syncfusion_EJ2_DataManager_UpdateUrl), [crudUrl](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.DataManager.html#Syncfusion_EJ2_DataManager_CrudUrl), and [batchUrl](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.DataManager.html#Syncfusion_EJ2_DataManager_BatchUrl). These properties enable the grid to communicate with the data service for every grid action, facilitating server-side operations.
+
+**CRUD Operations Mapping**
+
+CRUD operations within the grid can be mapped to server-side controller actions using specific properties:
+
+1. **insertUrl**: Specifies the URL for inserting new data.
+2. **removeUrl**: Specifies the URL for removing existing data.
+3. **updateUrl**: Specifies the URL for updating existing data.
+4. **crudUrl**: Specifies a single URL for all CRUD operations.
+5. **batchUrl**: Specifies the URL for batch editing.
+
+To enable editing in React Grid component, refer to the editing [documentation](https://ej2.syncfusion.com/react/documentation/grid/editing/edit). In the below example, the inline edit [mode](https://ej2.syncfusion.com/react/documentation/api/grid/editSettings/#mode) is enabled and [toolbar](https://helpej2.syncfusion.com/react/documentation/api/grid/#toolbar) property is configured to display toolbar items for editing purposes.
+
+{% tabs %}
+{% highlight ts tabtitle="App.tsx" %}
+import { DataManager, WebMethodAdaptor } from '@syncfusion/ej2-data';
+import { ColumnDirective, ColumnsDirective, GridComponent, ToolbarItems, EditSettingsModel, Toolbar, Edit, Inject } from '@syncfusion/ej2-react-grids';
+
+function App() {
+ const data = new DataManager({
+ url: 'https://localhost:xxxx/api/grid', // Replace your hosted link
+ insertUrl: 'https://localhost:xxxx/api/grid/Insert',
+ updateUrl: 'https://localhost:xxxx/api/grid/Update',
+ removeUrl: 'https://localhost:xxxx/api/grid/Remove',
+ adaptor: new WebMethodAdaptor()
+ });
+ const editSettings: EditSettingsModel = { allowEditing: true, allowAdding: true, allowDeleting: true, mode: 'Batch' };
+ const toolbar: ToolbarItems[] = ['Add', 'Edit', 'Delete', 'Update', 'Cancel'];
+ return
+
+
+
+
+
+
+
+
+};
+export default App;
+{% endhighlight %}
+{% endtabs %}
+
+> Normal/Inline editing is the default edit [mode](https://ej2.syncfusion.com/react/documentation/api/grid/editSettings/#mode) for the Grid component. To enable CRUD operations, ensure that the [isPrimaryKey](https://ej2.syncfusion.com/react/documentation/api/grid/column/#isprimarykey) property is set to **true** for a specific Grid column, ensuring that its value is unique.
+The below class is used to structure data sent during CRUD operations.
+
+```cs
+public class CRUDModel where T : class
+{
+ public string? action { get; set; }
+ public string? keyColumn { get; set; }
+ public object? key { get; set; }
+ public T? value { get; set; }
+ public List? added { get; set; }
+ public List? changed { get; set; }
+ public List? deleted { get; set; }
+ public IDictionary? @params { get; set; }
+}
+```
+
+**Insert operation:**
+
+To insert a new record, utilize the [insertUrl](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.DataManager.html#Syncfusion_EJ2_DataManager_InsertUrl) property to specify the controller action mapping URL for the insert operation. The newly added record details are bound to the **newRecord** parameter.
+
+
+
+```cs
+
+///
+/// Inserts a new data item into the data collection.
+///
+/// It contains the new record detail which is need to be inserted.
+/// Returns void
+[HttpPost]
+[Route("api/[controller]/Insert")]
+public void Insert([FromBody] CRUDModel newRecord)
+{
+ // Check if new record is not null
+ if (newRecord.value != null)
+ {
+ // Insert new record
+ OrdersDetails.GetAllRecords().Insert(0, newRecord.value);
+ }
+}
+```
+
+**Update operation:**
+
+For updating existing records, utilize the [updateUrl](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.DataManager.html#Syncfusion_EJ2_DataManager_UpdateUrl) property to specify the controller action mapping URL for the update operation. The updated record details are bound to the **updatedRecord** parameter.
+
+
+
+```cs
+
+///
+/// Update a existing data item from the data collection.
+///
+/// It contains the updated record detail which is need to be updated.
+/// Returns void
+[HttpPost]
+[Route("api/[controller]/Update")]
+public void Update([FromBody] CRUDModel updatedRecord)
+{
+ // Retrieve updated order
+ var updatedOrder = updatedRecord.value;
+ if (updatedOrder != null)
+ {
+ // Find existing record
+ var data = OrdersDetails.GetAllRecords().FirstOrDefault(or => or.OrderID == updatedOrder.OrderID);
+ if (data != null)
+ {
+ // Update existing record
+ data.OrderID = updatedOrder.OrderID;
+ data.CustomerID = updatedOrder.CustomerID;
+ data.ShipCity = updatedOrder.ShipCity;
+ data.ShipCountry = updatedOrder.ShipCountry;
+ // Update other properties similarly
+ }
+ }
+}
+```
+
+**Delete operation**
+
+To delete existing records, use the [removeUrl](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.DataManager.html#Syncfusion_EJ2_DataManager_RemoveUrl) property to specify the controller action mapping URL for the delete operation. The primary key value of the deleted record is bound to the **deletedRecord** parameter.
+
+
+
+```cs
+///
+/// Remove a specific data item from the data collection.
+///
+/// It contains the specific record detail which is need to be removed.
+/// Returns void
+[HttpPost]
+[Route("api/[controller]/Remove")]
+public void Remove([FromBody] CRUDModel deletedRecord)
+{
+ int orderId = int.Parse(deletedRecord.key.ToString()); // get key value from the deletedRecord
+ var data = OrdersDetails.GetAllRecords().FirstOrDefault(orderData => orderData.OrderID == orderId);
+ if (data != null)
+ {
+ // Remove the record from the data collection
+ OrdersDetails.GetAllRecords().Remove(data);
+ }
+}
+```
+
+
+
+**Single method for performing all CRUD operations**
+
+Using the `crudUrl` property, the controller action mapping URL can be specified to perform all the CRUD operation at server-side using a single method instead of specifying separate controller action method for CRUD (insert, update and delete) operations.
+
+The following code example describes the above behavior.
+
+```ts
+import { DataManager, WebMethodAdaptor } from '@syncfusion/ej2-data';
+import { ColumnDirective, ColumnsDirective, GridComponent, ToolbarItems, EditSettingsModel, Toolbar, Edit, Inject } from '@syncfusion/ej2-react-grids';
+
+function App() {
+ const data = new DataManager({
+ url: 'https://localhost:xxxx/api/grid', // Replace your hosted link
+ crudUrl:'https://localhost:xxxx/api/grid/CrudUpdate',
+ adaptor: new WebMethodAdaptor()
+ });
+ const editSettings: EditSettingsModel = { allowEditing: true, allowAdding: true, allowDeleting: true, mode: 'Batch' };
+ const toolbar: ToolbarItems[] = ['Add', 'Edit', 'Delete', 'Update', 'Cancel'];
+ return
+
+
+
+
+
+
+
+
+};
+export default App;
+```
+
+```cs
+
+[HttpPost]
+[Route("api/[controller]/CrudUpdate")]
+public void CrudUpdate([FromBody] CRUDModel request)
+{
+ // perform update operation
+ if (request.action == "update")
+ {
+ var orderValue = request.value;
+ OrdersDetails existingRecord = OrdersDetails.GetAllRecords().Where(or => or.OrderID == orderValue.OrderID).FirstOrDefault();
+ existingRecord.OrderID = orderValue.OrderID;
+ existingRecord.CustomerID = orderValue.CustomerID;
+ existingRecord.ShipCity = orderValue.ShipCity;
+ }
+ // perform insert operation
+ else if (request.action == "insert")
+ {
+ OrdersDetails.GetAllRecords().Insert(0, request.value);
+ }
+ // perform remove operation
+ else if (request.action == "remove")
+ {
+ OrdersDetails.GetAllRecords().Remove(OrdersDetails.GetAllRecords().Where(or => or.OrderID == int.Parse(request.key.ToString())).FirstOrDefault());
+ }
+}
+```
+
+**Batch operation**
+
+To perform batch operation, define the edit [mode](https://ej2.syncfusion.com/react/documentation/api/grid/editSettings/#mode) as **Batch** and specify the `batchUrl` property in the DataManager. Use the **Add** toolbar button to insert new row in batch editing mode. To edit a cell, double-click the desired cell and update the value as required. To delete a record, simply select the record and press the **Delete** toolbar button. Now, all CRUD operations will be executed in single request. Clicking the **Update** toolbar button will update the newly added, edited, or deleted records from the OrdersDetails table using a single API POST request.
+
+```ts
+[App.tsx]
+import { DataManager, WebMethodAdaptor } from '@syncfusion/ej2-data';
+import { ColumnDirective, ColumnsDirective, GridComponent, ToolbarItems, EditSettingsModel, Toolbar, Edit, Inject } from '@syncfusion/ej2-react-grids';
+
+function App() {
+ const data = new DataManager({
+ url: 'https://localhost:xxxx/api/grid', // Replace your hosted link
+ batchUrl:'https://localhost:xxxx/api/grid/BatchUpdate',
+ adaptor: new WebMethodAdaptor()
+ });
+ const editSettings: EditSettingsModel = { allowEditing: true, allowAdding: true, allowDeleting: true, mode: 'Batch' };
+ const toolbar: ToolbarItems[] = ['Add', 'Edit', 'Delete', 'Update', 'Cancel'];
+ return
+
+
+
+
+
+
+
+
+};
+export default App;
+```
+
+```cs
+[HttpPost]
+[Route("api/[controller]/BatchUpdate")]
+public IActionResult BatchUpdate([FromBody] CRUDModel batchOperation)
+{
+ if (batchOperation.added != null)
+ {
+ foreach (var addedOrder in batchOperation.added)
+ {
+ OrdersDetails.GetAllRecords().Insert(0, addedOrder);
+ }
+ }
+ if (batchOperation.changed != null)
+ {
+ foreach (var changedOrder in batchOperation.changed)
+ {
+ var existingOrder = OrdersDetails.GetAllRecords().FirstOrDefault(or => or.OrderID == changedOrder.OrderID);
+ if (existingOrder != null)
+ {
+ existingOrder.CustomerID = changedOrder.CustomerID;
+ existingOrder.ShipCity = changedOrder.ShipCity;
+ // Update other properties as needed
+ }
+ }
+ }
+if (batchOperation.deleted != null)
+ {
+ foreach (var deletedOrder in batchOperation.deleted)
+ {
+ var orderToDelete = OrdersDetails.GetAllRecords().FirstOrDefault(or => or.OrderID == deletedOrder.OrderID);
+ if (orderToDelete != null)
+ {
+ OrdersDetails.GetAllRecords().Remove(orderToDelete);
+ }
+ }
+ }
+ return Json(batchOperation);
+}
+```
+
\ No newline at end of file
diff --git a/ej2-react/grid/connecting-to-adaptors/webapi-adaptor.md b/ej2-react/grid/connecting-to-adaptors/webapi-adaptor.md
index d8acbac3e..6c4a77463 100644
--- a/ej2-react/grid/connecting-to-adaptors/webapi-adaptor.md
+++ b/ej2-react/grid/connecting-to-adaptors/webapi-adaptor.md
@@ -124,9 +124,9 @@ namespace WebApiAdaptor.Server.Controllers
**4. Run the Application:**
-Run the application in Visual Studio. It will be accessible on a URL like **https://localhost:xx**.
+Run the application in Visual Studio. It will be accessible on a URL like **https://localhost:xxxx**.
-After running the application, you can verify that the server-side API controller is successfully returning the order data in the URL(https://localhost:xx/api/Orders). Here **xx** denotes the port number.
+After running the application, you can verify that the server-side API controller is successfully returning the order data in the URL(https://localhost:xxxx/api/Orders). Here **xxxx** denotes the port number.
@@ -165,7 +165,7 @@ Include the necessary CSS files in your `styles.css` file to style the Syncfusio
**Step 3: Adding Syncfusion component**
-In your component file (e.g., App.ts), import `DataManager` and `WebApiAdaptor` from `@syncfusion/ej2-data`. Create a `DataManager` instance specifying the URL of your API endpoint(https:localhost:xx/api/Orders) using the `url` property and set the adaptor `WebApiAdaptor`.
+In your component file (e.g., App.ts), import `DataManager` and `WebApiAdaptor` from `@syncfusion/ej2-data`. Create a `DataManager` instance specifying the URL of your API endpoint(https:localhost:xxxx/api/Orders) using the `url` property and set the adaptor `WebApiAdaptor`.
{% tabs %}
{% highlight ts tabtitle="App.tsx" %}
@@ -190,8 +190,8 @@ export default App;
{% endhighlight %}
{% endtabs %}
-> Replace https://localhost:xx/api/Orders with the actual URL of your API endpoint that provides the data in a consumable format (e.g., JSON).
-Run the application in Visual Studio. It will be accessible on a URL like **https://localhost:xx**.
+> Replace https://localhost:xxxx/api/Orders with the actual URL of your API endpoint that provides the data in a consumable format (e.g., JSON).
+Run the application in Visual Studio. It will be accessible on a URL like **https://localhost:xxxx**.
> Ensure your API service is configured to handle CORS (Cross-Origin Resource Sharing) if necessary.
diff --git a/ej2-react/grid/context-menu.md b/ej2-react/grid/context-menu.md
index c40b01afa..da616ba27 100644
--- a/ej2-react/grid/context-menu.md
+++ b/ej2-react/grid/context-menu.md
@@ -80,14 +80,12 @@ The following example demonstrates how to enable context menu feature in the gri
## Custom context menu items
The Syncfusion React Grid empowers you to enhance your user experience by incorporating custom context menu items into the default context menu. These customized options enable you to tailor the context menu to meet the unique requirements of your application.
-
-By adding custom context menu items, you can introduce additional actions or operations that are directly relevant to your specific use case. This flexibility allows you to create a highly personalized and efficient interaction with your grid, making it a powerful tool for data management and manipulation.
-
-To add custom context menu items by defining the [contextMenuItems](https://ej2.syncfusion.com/react/documentation/api/grid/#contextmenuitems) property as a collection of [contextMenuItemModel](https://ej2.syncfusion.com/react/documentation/api/grid/contextMenuItemModel). You can also define actions for these customized items using the [contextMenuClick](https://ej2.syncfusion.com/react/documentation/api/grid/#contextmenuclick) event.
-
+
To incorporate custom context menu items in the Syncfusion React Grid, you can achieve this by specifying the [contextMenuItems](https://ej2.syncfusion.com/react/documentation/api/grid/#contextmenuitems) property as a collection of [contextMenuItemModel](https://ej2.syncfusion.com/react/documentation/api/grid/contextMenuItemModel). This allows you to define and customize the appearance and behavior of these additional context menu items according to your requirements.
-
-Furthermore, you can assign actions to these custom items by utilizing the [contextMenuClick](https://ej2.syncfusion.com/react/documentation/api/grid/#contextmenuclick) event. This event provides you with the means to handle user interactions with the custom context menu items, enabling you to execute specific actions or operations when these items are clicked.
+
+Furthermore, you can assign actions to these custom items by utilizing the [contextMenuClick](https://ej2.syncfusion.com/react/documentation/api/grid/#contextmenuclick) event. This event provides you with the means to handle user interactions with the custom context menu items, enabling you to execute specific actions or operations when these items are clicked.
+
+The following example demonstrates how to add custom context menu items in the Grid component.
The following example demonstrates how to add custom context menu items in the Grid component.
@@ -114,7 +112,7 @@ The Syncfusion React Grid provides the ability to show the context menu items on
This can be achieved by using the [created](https://ej2.syncfusion.com/react/documentation/api/grid/#created) event and the context menu's `beforeOpen` event of the Grid.
-By using the `onclick` event listener of the Grid, you can obtain the clicked position values through the `ngAfterViewInit` method. This method is appropriate for interacting with the Document Object Model (DOM) and performing operations that require access to the rendered elements. The obtained positions are then sent to the `open` method of the context menu within the `onclick` event of the Grid. Additionally, the default action of right-clicking to open the context menu items items is prevented by utilizing the `created` event of the Grid.
+By using the `onclick` event listener of the Grid, you can obtain the clicked position values through the `useEffect` method. The obtained positions are then sent to the `open` method of the context menu within the `onclick` event of the Grid. Additionally, the default action of right-clicking to open the context menu items items is prevented by utilizing the `created` event of the Grid.
The following example demonstrates how to show context menu on left click using `created` event.
diff --git a/ej2-react/grid/images/odatav4-adaptor-data.png b/ej2-react/grid/images/odatav4-adaptor-data.png
new file mode 100644
index 000000000..02a8b7804
Binary files /dev/null and b/ej2-react/grid/images/odatav4-adaptor-data.png differ
diff --git a/ej2-react/grid/images/odatav4-adaptor-delete-record.png b/ej2-react/grid/images/odatav4-adaptor-delete-record.png
new file mode 100644
index 000000000..d78917bba
Binary files /dev/null and b/ej2-react/grid/images/odatav4-adaptor-delete-record.png differ
diff --git a/ej2-react/grid/images/odatav4-adaptor-filtering.png b/ej2-react/grid/images/odatav4-adaptor-filtering.png
new file mode 100644
index 000000000..9d652331e
Binary files /dev/null and b/ej2-react/grid/images/odatav4-adaptor-filtering.png differ
diff --git a/ej2-react/grid/images/odatav4-adaptor-insert-record.png b/ej2-react/grid/images/odatav4-adaptor-insert-record.png
new file mode 100644
index 000000000..c97292068
Binary files /dev/null and b/ej2-react/grid/images/odatav4-adaptor-insert-record.png differ
diff --git a/ej2-react/grid/images/odatav4-adaptor-multi-column-filtering.png b/ej2-react/grid/images/odatav4-adaptor-multi-column-filtering.png
new file mode 100644
index 000000000..8903bb638
Binary files /dev/null and b/ej2-react/grid/images/odatav4-adaptor-multi-column-filtering.png differ
diff --git a/ej2-react/grid/images/odatav4-adaptor-multi-column-sorting.png b/ej2-react/grid/images/odatav4-adaptor-multi-column-sorting.png
new file mode 100644
index 000000000..2d631b2bf
Binary files /dev/null and b/ej2-react/grid/images/odatav4-adaptor-multi-column-sorting.png differ
diff --git a/ej2-react/grid/images/odatav4-adaptor-paging.png b/ej2-react/grid/images/odatav4-adaptor-paging.png
new file mode 100644
index 000000000..d01165d3c
Binary files /dev/null and b/ej2-react/grid/images/odatav4-adaptor-paging.png differ
diff --git a/ej2-react/grid/images/odatav4-adaptor-searching.png b/ej2-react/grid/images/odatav4-adaptor-searching.png
new file mode 100644
index 000000000..d1a068dd2
Binary files /dev/null and b/ej2-react/grid/images/odatav4-adaptor-searching.png differ
diff --git a/ej2-react/grid/images/odatav4-adaptor-sorting.png b/ej2-react/grid/images/odatav4-adaptor-sorting.png
new file mode 100644
index 000000000..084220205
Binary files /dev/null and b/ej2-react/grid/images/odatav4-adaptor-sorting.png differ
diff --git a/ej2-react/grid/images/odatav4-adaptor-update-record.png b/ej2-react/grid/images/odatav4-adaptor-update-record.png
new file mode 100644
index 000000000..265fdf465
Binary files /dev/null and b/ej2-react/grid/images/odatav4-adaptor-update-record.png differ
diff --git a/ej2-react/grid/images/web-method-adaptor-delete-record.png b/ej2-react/grid/images/web-method-adaptor-delete-record.png
new file mode 100644
index 000000000..0de89dc4b
Binary files /dev/null and b/ej2-react/grid/images/web-method-adaptor-delete-record.png differ
diff --git a/ej2-react/grid/images/web-method-adaptor-filtering.png b/ej2-react/grid/images/web-method-adaptor-filtering.png
new file mode 100644
index 000000000..ab5263a14
Binary files /dev/null and b/ej2-react/grid/images/web-method-adaptor-filtering.png differ
diff --git a/ej2-react/grid/images/web-method-adaptor-insert-record.png b/ej2-react/grid/images/web-method-adaptor-insert-record.png
new file mode 100644
index 000000000..3a4d2ef26
Binary files /dev/null and b/ej2-react/grid/images/web-method-adaptor-insert-record.png differ
diff --git a/ej2-react/grid/images/web-method-adaptor-multi-filtering.png b/ej2-react/grid/images/web-method-adaptor-multi-filtering.png
new file mode 100644
index 000000000..0bb52c788
Binary files /dev/null and b/ej2-react/grid/images/web-method-adaptor-multi-filtering.png differ
diff --git a/ej2-react/grid/images/web-method-adaptor-multi-sorting.png b/ej2-react/grid/images/web-method-adaptor-multi-sorting.png
new file mode 100644
index 000000000..cd46e7f2f
Binary files /dev/null and b/ej2-react/grid/images/web-method-adaptor-multi-sorting.png differ
diff --git a/ej2-react/grid/images/web-method-adaptor-paging.png b/ej2-react/grid/images/web-method-adaptor-paging.png
new file mode 100644
index 000000000..0b63b7fea
Binary files /dev/null and b/ej2-react/grid/images/web-method-adaptor-paging.png differ
diff --git a/ej2-react/grid/images/web-method-adaptor-searching.png b/ej2-react/grid/images/web-method-adaptor-searching.png
new file mode 100644
index 000000000..9ce945fbb
Binary files /dev/null and b/ej2-react/grid/images/web-method-adaptor-searching.png differ
diff --git a/ej2-react/grid/images/web-method-adaptor-sorting.png b/ej2-react/grid/images/web-method-adaptor-sorting.png
new file mode 100644
index 000000000..abc060a53
Binary files /dev/null and b/ej2-react/grid/images/web-method-adaptor-sorting.png differ
diff --git a/ej2-react/grid/images/web-method-adaptor-update-record.png b/ej2-react/grid/images/web-method-adaptor-update-record.png
new file mode 100644
index 000000000..282a260cf
Binary files /dev/null and b/ej2-react/grid/images/web-method-adaptor-update-record.png differ
diff --git a/ej2-react/grid/images/web-method-adaptor-value.png b/ej2-react/grid/images/web-method-adaptor-value.png
new file mode 100644
index 000000000..a253269f6
Binary files /dev/null and b/ej2-react/grid/images/web-method-adaptor-value.png differ