Repository: syncfusion-content/ej2-asp-core-mvc-docs
Pull request #3969: 942316: CustomAdaptor in Core and MVC platform
Author: login: NithyaSivaprakasam
Created: 2025-03-05T05:47:51Z | Merged: 2025-03-13T10:13:16Z



Diff:
diff --git a/ej2-asp-core-mvc/grid/EJ2_ASP.MVC/connecting-to-adaptors/custom-adaptor.md b/ej2-asp-core-mvc/grid/EJ2_ASP.MVC/connecting-to-adaptors/custom-adaptor.md
new file mode 100644
index 0000000000..53e601dee8
--- /dev/null
+++ b/ej2-asp-core-mvc/grid/EJ2_ASP.MVC/connecting-to-adaptors/custom-adaptor.md
@@ -0,0 +1,732 @@
+---
+layout: post
+title: Bind data & perform CRUD action with CustomAdaptor in Syncfusion Grid
+description: Learn here all about Bind data and perform CRUD action with CustomAdaptor in Syncfusion ##Platform_Name## Grid of Syncfusion Essential JS 2 and more.
+control: Custom Adaptor
+platform: ej2-asp-core-mvc
+documentation: ug
+domainurl: ##DomainURL##
+---
+
+# CustomAdaptor in Syncfusion ASP.NET MVC Grid
+
+The `CustomAdaptor` in the Syncfusion ASP.NET MVC Grid allows to create their own custom adaptors by extending the built-in adaptors. The custom adaptor involves handling the query process, requests, and responses of the built-in adaptor. The `CustomAdaptor` can be used to extend OData V4 services, enabling efficient data fetching and manipulation. By default, there are three built-in methods available for `CustomAdaptor`.
+
+## Types of CustomAdaptor methods
+
+There are three types of methods in custom adaptors.
+
+### processQuery
+
+The `processQuery` method handles the execution of a query sent to a `DataSource`, such as a database or custom data service. This query is responsible for performing operations like data retrieval, insertion, updating, or deletion. The `processQuery` method accepts two arguments: 
+
+* `DataManager`: Used to modify the URL dynamically.
+
+* `Query`: Allows setting additional parameter values or modifying queries such as sorting, filtering, and grouping, etc.
+
+**DataManager**
+
+![DataManager](../../images/adaptors/customadaptor/custom-adaptor-datamanager.png)
+
+**Query**
+
+![Query](../../images/adaptors/customadaptor/custom-adaptor-query.png)
+
+```js
+processQuery(dm, query) {
+    query.addParams('Syncfusion in ASP.NET MVC Grid', 'true'); // Add additional parameter.
+    return super.processQuery.apply(this, arguments);
+}
+```
+
+### beforeSend
+
+The `beforeSend` method is executed before a request is sent to the server. This function allows modifying parameters, request headers, and data, or performing validation before the request is processed. It accepts three arguments:
+
+* `DataManager`: Provides the `DataSource` and `Adaptor` value.
+
+* `Request`: Used to send custom headers, such as setting the `Authorization` header.
+
+* `Settings`: An optional argument that allows additional configurations.
+
+**DataManager**
+
+![DataManager](../../images/adaptors/customadaptor/custom-adaptor-datamanager.png)
+
+**Request**
+
+![Request](../../images/adaptors/customadaptor/custom-adaptor-request.png)
+
+**Settings**
+
+![Settings](../../images/adaptors/customadaptor/custom-adaptor-fetch.png)
+
+```js
+beforeSend(dm, request, settings) {
+    request.headers.set('Authorization', `true`);
+    return super.beforeSend(dm, request, settings);
+}
+```
+
+### processResponse
+
+The `processResponse` method handles the response received from the server after an asynchronous request. It is responsible for parsing the response data, managing errors, and preparing the data for further processing. This method can accept multiple optional arguments, allowing customization based on specific requirements.
+
+```js
+processResponse(data, ds, query, xhr, request, changes) {
+    let i =0;
+    const original = super.processResponse(data, ds, query, xhr, request, changes);
+    // Adding serial number.
+    if (original.result){
+        original.result.forEach((item) => ej.base.setValue('SNo', ++i, item));
+    }
+return original;
+}
+```
+
+This guide provides detailed instructions on binding data and performing CRUD (Create, Read, Update, Delete) actions using the `CustomAdaptor` by extending the `ODataV4Adaptor` in your Syncfusion ASP.NET MVC Grid.
+
+## Creating an custom service
+
+To configure a server with Syncfusion ASP.NET MVC Grid using OData, follow these steps:
+
+**1. Project Creation**
+
+1. Open **Visual Studio**.
+2. Select **Create a new project** → Choose **ASP.NET Web Application (.NET Framework)**.
+3. Name the project **CustomAdaptor** and select **MVC** as the project template.
+4. Ensure that the **Web API** option is selected.
+
+For detailed information, refer to this [documentation](https://learn.microsoft.com/en-us/aspnet/mvc/overview/getting-started/introduction/getting-started#create-your-first-app).
+
+**2. Install NuGet Packages**
+
+Using the NuGet package manager in Visual Studio (Tools → NuGet Package Manager → Manage NuGet Packages for Solution), install the `Microsoft.AspNet.OData` NuGet package for OData support and `Newtonsoft.Json` for JSON serialization support.
+
+**3. Model Class Creation:**
+
+Create a model class named `OrdersDetails.cs` inside the **Models** folder.
+
+{% tabs %}
+{% highlight cs tabtitle="OrdersDetails.cs" %}
+namespace CustomAdaptor.Models
+{
+  public class OrdersDetails
+  {
+    public static List<OrdersDetails> order = new List<OrdersDetails>();
+    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<OrdersDetails> 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;
+    }
+    [Key]
+    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 %}
+
+**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<T>` method, where `OrdersDetails` represents the CLR type containing order details. 
+
+```cs
+private static IEdmModel GetEdmModel()
+{
+    var builder = new ODataConventionModelBuilder();
+    builder.EntitySet<OrdersDetails>("Orders");  // Define OData Entity.
+    return builder.GetEdmModel();
+}
+```
+
+**5. Register the OData Services**
+
+Once the Entity Data Model is built, you need to register the OData services in your ASP.NET MVC application. Here's how:
+
+```cs
+// WebApiConfig.cs
+using Microsoft.AspNet.OData.Builder;
+using Microsoft.AspNet.OData.Extensions;
+using Microsoft.OData.Edm;
+using CustomAdaptor.Models;
+using System;
+using System.Collections.Generic;
+using System.Linq;
+using System.Web;
+using System.Web.Http;
+using System.Web.UI.WebControls;
+
+namespace CustomAdaptor.App_Start
+{
+    public static class WebApiConfig
+    {
+        public static void Register(HttpConfiguration config)
+        {
+            // Enable OData.
+            config.MapODataServiceRoute(
+                routeName: "ODataRoute",
+                routePrefix: "odata",
+                model: GetEdmModel()
+            );
+            // Enable Query Support.
+            config.Count().Filter().OrderBy().Expand().Select().MaxTop(null);
+            // Web API routes.
+            config.Routes.MapHttpRoute(
+                name: "DefaultApi",
+                routeTemplate: "api/{controller}/{action}/{id}",
+                defaults: new { id = System.Web.Http.RouteParameter.Optional }
+            );
+            // Configure JSON formatting.
+            config.Formatters.JsonFormatter.SerializerSettings.Formatting = Newtonsoft.Json.Formatting.Indented;
+        }
+        private static IEdmModel GetEdmModel()
+        {
+            var builder = new ODataConventionModelBuilder();
+            builder.EntitySet<OrdersDetails>("Orders");  // Define OData Entity.
+            return builder.GetEdmModel();
+        }
+    }
+}
+```
+
+**5. Add Controllers**
+
+Create a controllers to expose the OData endpoints.
+
+{% tabs %}
+{% highlight cs tabtitle="OrdersController.cs" %}
+using System.Linq;
+using Microsoft.AspNet.OData;
+using System.Web.Http;
+using CustomAdaptor.Models;
+
+namespace CustomAdaptor.Controllers
+{
+    public class OrdersController : ODataController
+    {
+        /// <summary>
+        /// Retrieves all orders.
+        /// </summary>
+        /// <returns>The collection of orders.</returns>
+        [EnableQuery]
+        public IHttpActionResult Get()
+        {
+            var data = OrdersDetails.GetAllRecords().AsQueryable();
+            return Ok(data);
+        }
+    }
+}
+
+{% endhighlight %}
+{% endtabs %}
+
+**6. 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 ASP.NET MVC Grid to an custom service extending the ODataV4 service
+
+To integrate the Syncfusion Grid into your ASP.NET MVC project using Visual Studio, follow these steps:
+
+**Step 1:** Install the Syncfusion ASP.NET MVC Package:
+
+To add `ASP.NET MVC` in the application, open the NuGet package manager in Visual Studio (Tools → NuGet Package Manager → Manage NuGet Packages for Solution), search for [Syncfusion.EJ2.MVC5](https://www.nuget.org/packages/Syncfusion.EJ2.MVC5) and install it.
+Alternatively, you can install it using the following Package Manager Console command:
+
+{% tabs %}
+{% highlight C# tabtitle="Package Manager" %}
+Install-Package Syncfusion.EJ2.MVC5 -Version {{ site.releaseversion }}
+{% endhighlight %}
+{% endtabs %}
+
+**Step 2:** Add Syncfusion ASP.NET MVC namespace
+
+Add `Syncfusion.EJ2` namespace reference in `Web.config` under `Views` folder.
+
+```cs
+<namespaces>
+    <add namespace="Syncfusion.EJ2"/>
+</namespaces>
+```
+
+**Step 3:** Add stylesheet and script resources
+
+To include the required styles and scripts, add the following references inside the `<head>` of `~/Pages/Shared/_Layout.cshtml` file:
+{% tabs %}
+{% highlight cshtml tabtitle="~/_Layout.cshtml" %}
+
+<head>
+    ...
+    <!-- Syncfusion ASP.NET MVC control styles -->
+    <link rel="stylesheet" href="https://cdn.syncfusion.com/ej2/{{ site.ej2version }}/bootstrap5.css" />
+    <!-- Syncfusion ASP.NET MVC control scripts -->
+    <script src="https://cdn.syncfusion.com/ej2/{{ site.ej2version }}/dist/ej2.min.js"></script>
+    <!-- Include the necessary CSS files to style the Syncfusion ASP.NET MVC controls: -->
+    <link href="https://cdn.syncfusion.com/ej2/{{ site.ej2version }}/ej2-base/styles/bootstrap5.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/{{ site.ej2version }}/ej2-grids/styles/bootstrap5.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/{{ site.ej2version }}/ej2-buttons/styles/bootstrap5.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/{{ site.ej2version }}/ej2-popups/styles/bootstrap5.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/{{ site.ej2version }}/ej2-richtexteditor/styles/bootstrap5.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/{{ site.ej2version }}/ej2-navigations/styles/bootstrap5.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/{{ site.ej2version }}/ej2-dropdowns/styles/bootstrap5.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/{{ site.ej2version }}/ej2-lists/styles/bootstrap5.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/{{ site.ej2version }}/ej2-inputs/styles/bootstrap5.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/{{ site.ej2version }}/ej2-calendars/styles/bootstrap5.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/{{ site.ej2version }}/ej2-notifications/styles/bootstrap5.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/{{ site.ej2version }}/ej2-splitbuttons/styles/bootstrap5.css" rel="stylesheet" />
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
+    <script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type="text/javascript"></script>
+</head>
+
+{% endhighlight %}
+{% endtabs %}
+
+**Step 4:** Register Syncfusion Script Manager
+
+To ensure proper script execution, register the Syncfusion Script Manager `EJS().ScriptManager()` at the end of `<body>` in the `~/Pages/Shared/_Layout.cshtml` file as follows.
+
+{% tabs %}
+{% highlight cshtml tabtitle="~/_Layout.cshtml" %}
+<body>
+    ...
+    <!-- Syncfusion ASP.NET MVC Script Manager -->
+    @Html.EJS().ScriptManager()
+</body>
+{% endhighlight %}
+{% endtabs %}
+
+**Step 5: Adding Custom Adaptor**
+
+To create a custom adaptor, extend the ODataV4Adaptor. This custom adaptor will implement three key methods: `processQuery`, `beforeSend`, and `processResponse`.
+
+* The `processQuery` method modifies the API endpoint URL and sets additional parameters required for executing the query.
+
+* The `beforeSend` method adds custom headers, such as the `Authorization` header, before sending the request.
+
+* The `processResponse` method customizes the response by modifying data, such as adding a new field (`SNo`) to the dataset.
+
+```js
+<script>
+	class CustomAdaptor extends ej.data.ODataV4Adaptor {
+		processResponse(data, ds, query, xhr, request, changes) {
+			let i = 0;
+			const original = super.processResponse(data, ds, query, xhr, request, changes);
+			// Adding serial number to each row.
+			if (original.result) {
+				original.result.forEach((item) => ej.base.setValue('SNo', ++i, item));
+			}
+			return original;
+		}
+		beforeSend(dm, request, settings) {
+			request.headers.set('Authorization', `true`);
+			super.beforeSend(dm, request, settings);
+		}
+		processQuery(dm, query) {
+			dm.dataSource.url = 'https://localhost:xxxx/odata/Orders'; // Update with your API endpoint.
+			query.addParams('Syncfusion in ASP.NET MVC Grid', 'true'); // Add additional parameters.
+			return super.processQuery.apply(this, arguments);
+		}
+	}
+	document.addEventListener("DOMContentLoaded", function () {
+		let grid = document.getElementById("Grid").ej2_instances[0];
+		if (grid) {
+			let dataManager = new ejs.data.DataManager({
+				url: "https://localhost:xxxx/odata/Orders", // Replace `xxxx` with your actual localhost port number.
+				adaptor: new CustomAdaptor(),
+			});
+			grid.dataSource = dataManager;
+		}
+	});
+</script>
+```
+
+**Step 6: Adding Syncfusion Grid**
+
+Define a `DataManager` instance, specifying the API endpoint (https://localhost:xxxx/odata/Orders) in the url property and setting the adaptor to `CustomAdaptor`.
+
+{% tabs %}
+{% highlight cshtml tabtitle="Index.cshtml" %}
+@Html.EJS().Grid("Grid").Height("320px").Columns(col =>
+{
+    col.Field("SNo").HeaderText("S. No").Width("80").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
+    col.Field("OrderID").HeaderText("Order ID").Width("150").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).IsPrimaryKey(true).Add();
+    col.Field("CustomerID").HeaderText("Customer ID").Width("150").Add();
+    col.Field("ShipCity").HeaderText("Ship City").Width("150").Add();
+    col.Field("ShipCountry").HeaderText("Ship Country").Width("150").Add();
+}).Render()
+
+<script>
+	class CustomAdaptor extends ej.data.ODataV4Adaptor {
+		processResponse(data, ds, query, xhr, request, changes) {
+			let i = 0;
+			const original = super.processResponse(data, ds, query, xhr, request, changes);
+			// Adding serial number to each row.
+			if (original.result) {
+				original.result.forEach((item) => ej.base.setValue('SNo', ++i, item));
+			}
+			return original;
+		}
+		beforeSend(dm, request, settings) {
+			request.headers.set('Authorization', `true`);
+			super.beforeSend(dm, request, settings);
+		}
+		processQuery(dm, query) {
+			dm.dataSource.url = 'https://localhost:xxxx/odata/Orders'; // Update with your API endpoint.
+			query.addParams('Syncfusion in ASP.NET MVC Grid', 'true'); // Add additional parameters.
+			return super.processQuery.apply(this, arguments);
+		}
+	}
+	document.addEventListener("DOMContentLoaded", function () {
+		let grid = document.getElementById("Grid").ej2_instances[0];
+		if (grid) {
+			let dataManager = new ejs.data.DataManager({
+				url: "https://localhost:xxxx/odata/Orders", // Replace `xxxx` with your actual localhost port number.
+				adaptor: new CustomAdaptor(),
+			});
+			grid.dataSource = dataManager;
+		}
+	});
+</script>
+{% 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**.
+
+## 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="WebApiConfig.cs" %}
+...
+// Enable OData.
+config.MapODataServiceRoute(
+    routeName: "ODataRoute",
+    routePrefix: "odata",
+    model: GetEdmModel()
+);
+// Enable Query Support.
+config.Count().Filter(); // Handles searching operation.
+...
+{% endhighlight %}
+
+{% highlight cshtml tabtitle="Index.cshtml" %}
+@Html.EJS().Grid("Grid").Columns(col =>
+{
+    col.Field("OrderID").HeaderText("Order ID").Width("150").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).IsPrimaryKey(true).Add();
+    col.Field("CustomerID").HeaderText("Customer ID").Width("150").Add();
+    col.Field("EmployeeID").HeaderText("Employee ID").Width("150").Add();
+    col.Field("ShipCountry").HeaderText("Ship Country").Width("150").Add();
+}).Toolbar(new List<string>() { "Search" }).Render()
+<script>
+    class CustomAdaptor extends ejs.data.ODataV4Adaptor { }
+    document.addEventListener("DOMContentLoaded", function () {
+        let grid = document.getElementById("Grid").ej2_instances[0];
+        if (grid) {
+            let dataManager = new ejs.data.DataManager({
+                url: "https://localhost:xxxx/odata/Orders", // Replace `xxxx` with your actual localhost port number.
+                adaptor: new CustomAdaptor()
+            });
+            grid.dataSource = dataManager;
+        }
+    });
+</script>
+{% endhighlight %}
+{% endtabs %}
+
+![Searching query](../../images/adaptors/ODataV4Adaptor/odatav4-adaptor-searching.png)
+
+## 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="WebApiConfig.cs" %}
+...
+// Enable OData.
+config.MapODataServiceRoute(
+    routeName: "ODataRoute",
+    routePrefix: "odata",
+    model: GetEdmModel()
+);
+// Enable Query Support.
+config.Count().Filter(); // Handles filtering  operation.
+...
+{% endhighlight %}
+
+{% highlight cshtml tabtitle="Index.cshtml" %}
+@Html.EJS().Grid("Grid").Columns(col =>
+{
+    col.Field("OrderID").HeaderText("Order ID").Width("150").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).IsPrimaryKey(true).Add();
+    col.Field("CustomerID").HeaderText("Customer ID").Width("150").Add();
+    col.Field("EmployeeID").HeaderText("Employee ID").Width("150").Add();
+    col.Field("ShipCountry").HeaderText("Ship Country").Width("150").Add();
+}).AllowFiltering().Render()
+<script>
+    class CustomAdaptor extends ejs.data.ODataV4Adaptor { }
+    document.addEventListener("DOMContentLoaded", function () {
+        let grid = document.getElementById("Grid").ej2_instances[0];
+        if (grid) {
+            let dataManager = new ejs.data.DataManager({
+                url: "https://localhost:xxxx/odata/Orders", // Replace `xxxx` with your actual localhost port number.
+                adaptor: new CustomAdaptor()
+            });
+            grid.dataSource = dataManager;
+        }
+    });
+</script>
+{% endhighlight %}
+{% endtabs %}
+
+**Single column filtering**
+![Filtering query](../../images/adaptors/ODataV4Adaptor/odatav4-adaptor-filtering.png)
+**Multi column filtering**
+![Filtering query](../../images/adaptors/ODataV4Adaptor/odatav4-adaptor-multi-column-filtering.png)
+
+## 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="WebApiConfig.cs" %}
+...
+// Enable OData.
+config.MapODataServiceRoute(
+    routeName: "ODataRoute",
+    routePrefix: "odata",
+    model: GetEdmModel()
+);
+// Enable Query Support.
+config.Count().OrderBy(); // Handles sorting  operation.
+...
+{% endhighlight %}
+
+{% highlight cshtml tabtitle="Index.cshtml" %}
+@Html.EJS().Grid("Grid").Columns(col =>
+{
+    col.Field("OrderID").HeaderText("Order ID").Width("150").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).IsPrimaryKey(true).Add();
+    col.Field("CustomerID").HeaderText("Customer ID").Width("150").Add();
+    col.Field("EmployeeID").HeaderText("Employee ID").Width("150").Add();
+    col.Field("ShipCountry").HeaderText("Ship Country").Width("150").Add();
+}).AllowSorting().Render()
+<script>
+    class CustomAdaptor extends ejs.data.ODataV4Adaptor { }
+    document.addEventListener("DOMContentLoaded", function () {
+        let grid = document.getElementById("Grid").ej2_instances[0];
+        if (grid) {
+            let dataManager = new ejs.data.DataManager({
+                url: "https://localhost:xxxx/odata/Orders", // Replace `xxxx` with your actual localhost port number.
+                adaptor: new CustomAdaptor()
+            });
+            grid.dataSource = dataManager;
+        }
+    });
+</script>
+{% endhighlight %}
+{% endtabs %}
+
+**Single column sorting**
+![Single column sorting query](../../images/adaptors/ODataV4Adaptor/odatav4-adaptor-sorting.png)
+
+**Multi column sorting**
+![Multi column sorting query](../../images/adaptors/ODataV4Adaptor/odatav4-adaptor-multi-column-sorting.png)
+
+## 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="WebApiConfig.cs" %}
+....
+// Enable OData.
+config.MapODataServiceRoute(
+    routeName: "ODataRoute",
+    routePrefix: "odata",
+    model: GetEdmModel()
+);
+var recordCount= OrdersDetails.GetAllRecords().Count;
+// Enable Query Support.
+config.Count().MaxTop(recordCount); // Handles paging  operation.
+....
+{% endhighlight %}
+
+{% highlight cshtml tabtitle="Index.cshtml" %}
+@Html.EJS().Grid("Grid").Columns(col =>
+{
+    col.Field("OrderID").HeaderText("Order ID").Width("150").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).IsPrimaryKey(true).Add();
+    col.Field("CustomerID").HeaderText("Customer ID").Width("150").Add();
+    col.Field("EmployeeID").HeaderText("Employee ID").Width("150").Add();
+    col.Field("ShipCountry").HeaderText("Ship Country").Width("150").Add();
+}).AllowPaging().Render()
+<script>
+    class CustomAdaptor extends ejs.data.ODataV4Adaptor { }
+    document.addEventListener("DOMContentLoaded", function () {
+        let grid = document.getElementById("Grid").ej2_instances[0];
+        if (grid) {
+            let dataManager = new ejs.data.DataManager({
+                url: "https://localhost:xxxx/odata/Orders", // Replace `xxxx` with your actual localhost port number.
+                adaptor: new CustomAdaptor()
+            });
+            grid.dataSource = dataManager;
+        }
+    });
+</script>
+{% endhighlight %}
+{% endtabs %}
+
+![paging query](../../images/adaptors/ODataV4Adaptor/odatav4-adaptor-paging.png)
+
+## 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/aspnetmvc/documentation/grid/editing/edit) and utilize the sample implementation of the `OrdersController` in your MVC application. This controller handles HTTP requests for CRUD operations such as GET, POST, PATCH, and DELETE.
+
+To enable CRUD operations in the Syncfusion Grid within an ASP.NET MVC application, follow the below steps:
+
+{% tabs %}
+{% highlight cshtml tabtitle="Index.cshtml" %}
+@Html.EJS().Grid("Grid").EditSettings(edit => edit.AllowAdding(true).AllowEditing(true).AllowDeleting(true).Mode(Syncfusion.EJ2.Grids.EditMode.Normal)).Toolbar(new List<string>() { "Add", "Edit", "Delete", "Update", "Cancel" }).Columns(col =>
+	{
+		col.Field("OrderID").HeaderText("Order ID").Width("150").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).IsPrimaryKey(true).Add();
+		col.Field("CustomerID").HeaderText("Customer ID").Width("150").Add();
+		col.Field("ShipCity").HeaderText("Ship City").Width("150").Add();
+		col.Field("ShipCountry").HeaderText("Ship Country").Width("150").Add();
+	}).Render()
+<script>
+    class CustomAdaptor extends ejs.data.ODataV4Adaptor { }
+    document.addEventListener("DOMContentLoaded", function () {
+        let grid = document.getElementById("Grid").ej2_instances[0];
+        if (grid) {
+            let dataManager = new ejs.data.DataManager({
+                url: "https://localhost:xxxx/odata/Orders", // Replace `xxxx` with your actual localhost port number.
+                adaptor: new CustomAdaptor()
+            });
+            grid.dataSource = dataManager;
+        }
+    });
+</script>
+{% endhighlight %}
+{% endtabs %}
+
+> Normal/Inline editing is the default edit `Mode` for the Grid. To enable CRUD operations, ensure that the [IsPrimaryKey](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Grids.GridColumn.html#Syncfusion_EJ2_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 Grid, you can utilize the `HttpPost` method in your application. Below is a sample implementation of inserting a record using the **OrdersController**:
+
+```cs
+ /// <summary>
+ /// Inserts a new order to the collection.
+ /// </summary>
+ /// <param name="addRecord">The order to be inserted.</param>
+ /// <returns>It returns the newly inserted record detail.</returns>
+ [EnableQuery]
+ public IHttpActionResult Post(OrdersDetails addRecord)
+ {
+     if (addRecord == null)
+     {
+         return BadRequest("Null order");
+     }
+     OrdersDetails.GetAllRecords().Insert(0, addRecord);
+     return Ok(addRecord);
+ }
+```
+
+![CustomAdaptor-Insert-record](../../images/adaptors/ODataV4Adaptor/odatav4-adaptor-insert-record.png)
+
+**Update Operation:**
+
+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
+/// <summary>
+/// Updates an existing order.
+/// </summary>
+/// <param name="key">The ID of the order to update.</param>
+/// <param name="updateRecord">The updated order details.</param>
+/// <returns>It returns the updated order details.</returns>
+public IHttpActionResult Patch(int key, OrdersDetails updateRecord)
+{
+    if (updateRecord == null)
+    {
+        return BadRequest("No records");
+    }
+    var existingOrder = OrdersDetails.GetAllRecords().FirstOrDefault(order => order.OrderID == key);
+    if (existingOrder != null)
+    {
+        // If the order exists, update its properties.
+        existingOrder.CustomerID = updateRecord.CustomerID ?? existingOrder.CustomerID;
+        existingOrder.EmployeeID = updateRecord.EmployeeID ?? existingOrder.EmployeeID;
+        existingOrder.ShipCountry = updateRecord.ShipCountry ?? existingOrder.ShipCountry;
+    }
+    return Ok(existingOrder);
+}
+```
+![CustomAdaptor-Update-record](../../images/adaptors/ODataV4Adaptor/odatav4-adaptor-update-record.png)
+
+**Delete Operation**
+
+To delete existing records, use the `RemoveUrl` property to specify the controller action mapping URL for the delete operation.
+
+```cs
+/// <summary>
+/// Deletes an order.
+/// </summary>
+/// <param name="key">The ID of the order to delete.</param>
+/// <returns>It returns the deleted record detail.</returns>
+public IHttpActionResult Delete(int key)
+{
+    var deleteRecord = OrdersDetails.GetAllRecords().FirstOrDefault(order => order.OrderID == key);
+    if (deleteRecord != null)
+    {
+        OrdersDetails.GetAllRecords().Remove(deleteRecord);
+    }
+    return Ok(deleteRecord);
+}
+```
+![CustomAdaptor-Delete-record](../../images/adaptors/ODataV4Adaptor/odatav4-adaptor-delete-record.png)
\ No newline at end of file
diff --git a/ej2-asp-core-mvc/grid/EJ2_ASP.NETCORE/connecting-to-adaptors/custom-adaptor.md b/ej2-asp-core-mvc/grid/EJ2_ASP.NETCORE/connecting-to-adaptors/custom-adaptor.md
new file mode 100644
index 0000000000..75a4f7465b
--- /dev/null
+++ b/ej2-asp-core-mvc/grid/EJ2_ASP.NETCORE/connecting-to-adaptors/custom-adaptor.md
@@ -0,0 +1,751 @@
+---
+layout: post
+title: Bind data & perform CRUD action with CustomAdaptor in Syncfusion Grid
+description: Learn here all about Bind data and perform CRUD action with CustomAdaptor in Syncfusion ##Platform_Name## Grid of Syncfusion Essential JS 2 and more.
+control: Custom Adaptor
+platform: ej2-asp-core-mvc
+documentation: ug
+domainurl: ##DomainURL##
+---
+
+# CustomAdaptor in Syncfusion ASP.NET Core Grid
+
+The `CustomAdaptor` in the Syncfusion ASP.NET Core Grid allows to create their own custom adaptors by extending the built-in adaptors. The custom adaptor involves handling the built-in adaptor query process, request and response. The `CustomAdaptor` to be allows extending the OData V4 services, enabling efficient data fetching and manipulation. By default, there are three method for `CustomAdaptor` built-in methods.
+
+## Types of CustomAdaptor methods
+
+There are three types of methods in custom adaptors.
+
+### processQuery
+
+The `processQuery` method handles the execution of a query sent to a `dataSource`, such as a database or custom data service. This query is responsible for performing operations like data retrieval, insertion, updating, or deletion. The `processQuery` method accepts two arguments: 
+
+* `DataManager`: Used to modify the URL dynamically.
+
+* `Query`: Allows setting additional parameter values or modifying queries such as sorting, filtering, and grouping, etc.
+
+**DataManager**
+
+![DataManager](../../images/adaptors/customadaptor/custom-adaptor-datamanager.png)
+
+**Query**
+
+![Query](../../images/adaptors/customadaptor/custom-adaptor-query.png)
+
+```js
+processQuery(dm, query) {
+    query.addParams('Syncfusion in ASP.NET Core Grid', 'true'); // Add additional parameter.
+    return super.processQuery.apply(this, arguments);
+}
+```
+
+### beforeSend
+
+The `beforeSend` method is executed before a request is sent to the server. This function allows modifying parameters, request headers, and data, or performing validation before the request is processed. It accepts three arguments:
+
+* `DataManager`: Provides the `dataSource` and `adaptor` value.
+
+* `Request`: Used to send custom headers, such as setting the `Authorization` header.
+
+* `Settings`: An optional argument that allows additional configurations.
+
+**DataManager**
+
+![DataManager](../../images/adaptors/customadaptor/custom-adaptor-datamanager.png)
+
+**Request**
+
+![Request](../../images/adaptors/customadaptor/custom-adaptor-request.png)
+
+**Settings**
+
+![Settings](../../images/adaptors/customadaptor/custom-adaptor-fetch.png)
+
+```js
+beforeSend(dm, request, settings) {
+    if (request){
+        request.setRequestHeader("Authorization", "true");
+    }
+    return super.beforeSend(dm, request, settings);
+}
+```
+
+### processResponse
+
+The `processResponse` method handles the response received from the server after an asynchronous request. It is responsible for parsing the response data, managing errors, and preparing the data for further processing. This method can accept multiple optional arguments, allowing customization based on specific requirements.
+
+```js
+processResponse(data, ds, query, xhr, request, changes) {
+    let i =0;
+    const original = super.processResponse(data, ds, query, xhr, request, changes);
+    // Adding serial number.
+    if (original.result){
+        original.result.forEach((item) => ej.base.setValue('SNo', ++i, item));
+    }
+return original;
+}
+```
+
+This guide provides detailed instructions on binding data and performing CRUD (Create, Read, Update, Delete) actions using the `CustomAdaptor` by extending the `ODataV4Adaptor` in your Syncfusion ASP.NET Core Grid.
+ 
+## Creating an custom service
+
+To configure a server with Syncfusion ASP.NET Core Grid, you need to follow the below steps:
+
+**1. Project Creation:**
+
+Open Visual Studio and create an ASP.NET Core project named **CustomAdaptor**. To create an ASP.NET Core application, follow the documentation [link](https://learn.microsoft.com/en-us/aspnet/core/tutorials/razor-pages/razor-pages-start?view=aspnetcore-8.0&tabs=visual-studio#create-a-razor-pages-web-app) 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](https://www.nuget.org/packages?q=Microsoft.AspNetCore.OData) NuGet package.
+
+**3. Model Class Creation:**
+
+Create a model class named `OrdersDetails.cs` inside the **Models** folder.
+
+{% tabs %}
+{% highlight cs tabtitle="OrdersDetails.cs" %}
+
+ namespace CustomAdaptor.Models
+{
+  public class OrdersDetails
+  {
+    public static List<OrdersDetails> order = new List<OrdersDetails>();
+    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<OrdersDetails> 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;
+    }
+    [Key]
+    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 %}
+
+**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<T>` method, where `OrdersDetails` represents the CLR type containing order details. 
+
+```cs
+using CustomAdaptor.Models;
+using Microsoft.AspNetCore.OData;
+using Microsoft.OData.ModelBuilder;
+
+// Create an ODataConventionModelBuilder to build the OData model.
+var modelBuilder = new ODataConventionModelBuilder();
+
+// Register the "Orders" entity set with the OData model builder.
+modelBuilder.EntitySet<OrdersDetails>("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 CustomAdaptor.Models;
+
+namespace CustomAdaptor.Controllers
+{
+    [Route("[controller]")]
+    [ApiController]
+    public class OrdersController : ControllerBase
+    {
+        /// <summary>
+        /// Retrieves all orders.
+        /// </summary>
+        /// <returns>The collection of orders.</returns>
+        [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 ASP.NET Core Grid to an custom service extending the ODataV4 service
+
+To integrate the Syncfusion Grid into your ASP.NET Core project using Visual Studio, follow these steps:
+
+**Step 1:** Install the Syncfusion ASP.NET Core Package:
+
+To add `ASP.NET Core` in the application, open the NuGet package manager in Visual Studio (Tools → NuGet Package Manager → Manage NuGet Packages for Solution), search for [Syncfusion.EJ2.AspNet.Core](https://www.nuget.org/packages/Syncfusion.EJ2.AspNet.Core) and install it.
+Alternatively, you can install it using the following Package Manager Console command:
+
+{% tabs %}
+{% highlight C# tabtitle="Package Manager" %}
+
+Install-Package Syncfusion.EJ2.AspNet.Core -Version {{ site.releaseversion }}
+
+{% endhighlight %}
+{% endtabs %}
+
+**Step 2:** Add Syncfusion ASP.NET Core Tag Helper
+
+Open `~/Pages/_ViewImports.cshtml` file and import the `Syncfusion.EJ2` TagHelper.
+
+{% tabs %}
+{% highlight C# tabtitle="~/_ViewImports.cshtml" %}
+
+@addTagHelper *, Syncfusion.EJ2
+{% endhighlight %}
+{% endtabs %}
+
+**Step 3:** Add Stylesheets and Script Resources
+
+To include the required styles and scripts, add the following references inside the `<head>` of `~/Pages/Shared/_Layout.cshtml` file:
+
+{% tabs %}
+{% highlight cshtml tabtitle="~/_Layout.cshtml" %}
+
+<head>
+    ...
+    <!-- Syncfusion ASP.NET Core control styles -->
+    <link rel="stylesheet" href="https://cdn.syncfusion.com/ej2/{{ site.ej2version }}/bootstrap5.css" />
+    <!-- Syncfusion ASP.NET Core control scripts -->
+    <script src="https://cdn.syncfusion.com/ej2/{{ site.ej2version }}/dist/ej2.min.js"></script>
+    <!-- Include the necessary CSS files to style the Syncfusion ASP.NET Core controls-->
+    <link href="https://cdn.syncfusion.com/ej2/{{ site.ej2version }}/ej2-base/styles/bootstrap5.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/{{ site.ej2version }}/ej2-grids/styles/bootstrap5.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/{{ site.ej2version }}/ej2-buttons/styles/bootstrap5.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/{{ site.ej2version }}/ej2-popups/styles/bootstrap5.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/{{ site.ej2version }}/ej2-richtexteditor/styles/bootstrap5.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/{{ site.ej2version }}/ej2-navigations/styles/bootstrap5.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/{{ site.ej2version }}/ej2-dropdowns/styles/bootstrap5.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/{{ site.ej2version }}/ej2-lists/styles/bootstrap5.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/{{ site.ej2version }}/ej2-inputs/styles/bootstrap5.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/{{ site.ej2version }}/ej2-calendars/styles/bootstrap5.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/{{ site.ej2version }}/ej2-notifications/styles/bootstrap5.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/{{ site.ej2version }}/ej2-splitbuttons/styles/bootstrap5.css" rel="stylesheet" />
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
+    <script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type="text/javascript"></script>
+</head>
+{% endhighlight %}
+{% endtabs %}
+
+**Step 4:** Register Syncfusion Script Manager:
+
+To ensure proper script execution, register the Syncfusion Script Manager `<ejs-scripts>` at the end of the `<body>` tag in your ASP.NET Core application as follows:
+
+{% tabs %}
+{% highlight cshtml tabtitle="~/_Layout.cshtml" %}
+<body>
+    ...
+    <!-- Syncfusion ASP.NET Core Script Manager -->
+    <ejs-scripts></ejs-scripts>
+</body>{% endhighlight %}
+{% endtabs %}
+
+**Step 5: Adding Custom Adaptor**
+
+To create a custom adaptor, extend the ODataV4Adaptor. This custom adaptor will implement three key methods: `processQuery`, `beforeSend`, and `processResponse`.
+
+* The `processQuery` method modifies the API endpoint URL and sets additional parameters required for executing the query.
+
+* The `beforeSend` method adds custom headers, such as the `Authorization` header, before sending the request.
+
+* The `processResponse` method customizes the response by modifying data, such as adding a new field (`SNo`) to the dataset.
+
+```js
+<script>
+	class CustomAdaptor extends ej.data.ODataV4Adaptor {
+		processResponse(data, ds, query, xhr, request, changes) {
+			let i = 0;
+			const original = super.processResponse(data, ds, query, xhr, request, changes);
+			// Adding serial number to each row.
+			if (original.result) {
+				original.result.forEach((item) => ej.base.setValue('SNo', ++i, item));
+			}
+			return original;
+		}
+        beforeSend(dm, request, settings) {
+            if (request){
+                request.setRequestHeader("Authorization", "true");
+            }
+            return super.beforeSend(dm, request, settings);
+        }
+		processQuery(dm, query) {
+			dm.dataSource.url = 'https://localhost:xxxx/odata/orders'; // Update with your API endpoint.
+			query.addParams('Syncfusion in ASP.NET Core Grid', 'true'); // Add additional parameters.
+			return super.processQuery.apply(this, arguments);
+		}
+	}
+	document.addEventListener("DOMContentLoaded", function () {
+		let grid = document.getElementById("Grid").ej2_instances[0];
+		if (grid) {
+			let dataManager = new ej.data.DataManager({
+				url: "https://localhost:xxxx/odata/Orders", // Replace `xxxx` with your actual localhost port number.
+				adaptor: new CustomAdaptor(),
+			});
+			grid.dataSource = dataManager;
+		}
+	});
+</script>
+```
+
+**Step 6: Adding Syncfusion Grid**
+
+Define a `DataManager` instance, specifying the API endpoint (https://localhost:xxxx/odata/Orders) in the url property and setting the adaptor to `CustomAdaptor`.
+
+{% tabs %}
+{% highlight cshtml tabtitle="Index.cshtml" %}
+@page
+@model IndexModel
+@{
+	ViewData["Title"] = "Home page";
+}
+<div>
+	<ejs-grid id="Grid" height="315">
+		<e-grid-columns>
+			<e-grid-column field="SNo" headerText="S.No" width="120" textAlign="Right"></e-grid-column>
+			<e-grid-column field="OrderID" headerText="Order ID" width="120" textAlign="Right" isPrimaryKey="true"></e-grid-column>
+			<e-grid-column field="CustomerID" headerText="Customer ID" width="150"></e-grid-column>
+			<e-grid-column field="EmployeeID" headerText="Employee ID" width="150"></e-grid-column>
+			<e-grid-column field="ShipCountry" headerText="Ship Country" width="150"></e-grid-column>
+		</e-grid-columns>
+	</ejs-grid>
+</div>
+<script>
+	class CustomAdaptor extends ej.data.ODataV4Adaptor {}
+	document.addEventListener("DOMContentLoaded", function () {
+		let grid = document.getElementById("Grid").ej2_instances[0];
+		if (grid) {
+			let dataManager = new ej.data.DataManager({
+				url: "https://localhost:xxxx/odata/Orders", // Replace `xxxx` with your actual localhost port number.
+				adaptor: new CustomAdaptor()
+			});
+
+			grid.dataSource = dataManager;
+		}
+	});
+</script>
+{% endhighlight %}
+{% endtabs %}
+
+**Step 7:** Configure the server:
+
+In the `Program.cs` file of your project, configure the server to serve static files and handle API requests by adding the following code:
+
+```cs
+builder.Services.AddRazorPages();
+builder.Services.AddControllers();
+
+var app = builder.Build();
+
+app.MapRazorPages();
+app.MapControllers();
+```
+**Step 8:** Run the Project:
+
+Run the project in Visual Studio, and the Syncfusion ASP.NET Core Grid will successfully fetch data from the API service.
+
+> 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).
+
+## 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<OrdersDetails>("Orders");
+
+// Add services to the container.
+
+// Add controllers with OData support to the service collection.
+builder.Services.AddControllers().AddOData(
+    options => options
+        .Count()
+        .Filter() 
+        .AddRouteComponents("odata", modelBuilder.GetEdmModel()));
+{% endhighlight %}
+
+{% highlight cshtml tabtitle="Index.cshtml" %}
+ <ejs-grid id="Grid" height="280" toolbar="@(new List<string>() { "Search"})">
+    <e-grid-columns>
+        <e-grid-column field="OrderID" headerText="Order ID" width="120" textAlign="Right" isPrimaryKey="true" type="number"></e-grid-column>
+        <e-grid-column field="CustomerID" headerText="Customer ID" width="150" type="string"></e-grid-column>
+        <e-grid-column field="EmployeeID" headerText="Employee ID" width="150"></e-grid-column>
+        <e-grid-column field="ShipCountry" headerText="Ship Country" width="150"></e-grid-column>
+    </e-grid-columns>
+</ejs-grid>
+<script>
+	class CustomAdaptor extends ej.data.ODataV4Adaptor {}
+	document.addEventListener("DOMContentLoaded", function () {
+		let grid = document.getElementById("Grid").ej2_instances[0];
+		if (grid) {
+			let dataManager = new ej.data.DataManager({
+				url: "https://localhost:xxxx/odata/Orders", // Replace `xxxx` with your actual localhost port number.
+				adaptor: new CustomAdaptor()
+			});
+
+			grid.dataSource = dataManager;
+		}
+	});
+</script>
+{% endhighlight %}
+{% endtabs %}
+
+![Searching query](../../images/adaptors/ODataV4Adaptor/odatav4-adaptor-searching.png)
+
+## 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<OrdersDetails>("Orders");
+
+// Add services to the container.
+
+// Add controllers with OData support to the service collection.
+builder.Services.AddControllers().AddOData(
+    options => options
+        .Count()
+        .Filter()
+        .AddRouteComponents("odata", modelBuilder.GetEdmModel()));
+{% endhighlight %}
+
+{% highlight cshtml tabtitle="Index.cshtml" %}
+ <ejs-grid id="Grid" height="280" allowFiltering="true">
+    <e-grid-columns>
+            <e-grid-column field="OrderID" headerText="Order ID" width="120" textAlign="Right" isPrimaryKey="true" type="number"></e-grid-column>
+            <e-grid-column field="CustomerID" headerText="Customer ID" width="150" type="string"></e-grid-column>
+            <e-grid-column field="EmployeeID" headerText="Employee ID" width="150"></e-grid-column>
+            <e-grid-column field="ShipCountry" headerText="Ship Country" width="150"></e-grid-column>
+    </e-grid-columns>
+</ejs-grid>
+<script>
+	class CustomAdaptor extends ej.data.ODataV4Adaptor {}
+	document.addEventListener("DOMContentLoaded", function () {
+		let grid = document.getElementById("Grid").ej2_instances[0];
+		if (grid) {
+			let dataManager = new ej.data.DataManager({
+				url: "https://localhost:xxxx/odata/Orders", // Replace `xxxx` with your actual localhost port number.
+				adaptor: new CustomAdaptor()
+			});
+			grid.dataSource = dataManager;
+		}
+	});
+</script>
+{% endhighlight %}
+{% endtabs %}
+
+**Single column filtering**
+![Filtering query](../../images/adaptors/ODataV4Adaptor/odatav4-adaptor-filtering.png)
+**Multi column filtering**
+![Filtering query](../../images/adaptors/ODataV4Adaptor/odatav4-adaptor-multi-column-filtering.png)
+
+## 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<OrdersDetails>("Orders");
+
+// Add services to the container.
+
+// Add controllers with OData support to the service collection.
+builder.Services.AddControllers().AddOData(
+    options => options
+        .Count()
+        .OrderBy() 
+        .AddRouteComponents("odata", modelBuilder.GetEdmModel()));
+
+{% endhighlight %}
+
+{% highlight cshtml tabtitle="Index.cshtml" %}
+<ejs-grid id="Grid" height="280" allowSorting="true">
+    <e-grid-columns>
+        <e-grid-column field="OrderID" headerText="Order ID" width="120" textAlign="Right" isPrimaryKey="true" type="number"></e-grid-column>
+        <e-grid-column field="CustomerID" headerText="Customer ID" width="150" type="string"></e-grid-column>
+        <e-grid-column field="EmployeeID" headerText="Employee ID" width="150"></e-grid-column>
+        <e-grid-column field="ShipCountry" headerText="Ship Country" width="150"></e-grid-column>
+    </e-grid-columns>
+</ejs-grid>
+<script>
+	class CustomAdaptor extends ej.data.ODataV4Adaptor {}
+	document.addEventListener("DOMContentLoaded", function () {
+		let grid = document.getElementById("Grid").ej2_instances[0];
+		if (grid) {
+			let dataManager = new ej.data.DataManager({
+				url: "https://localhost:xxxx/odata/Orders", // Replace `xxxx` with your actual localhost port number.
+				adaptor: new CustomAdaptor()
+			});
+			grid.dataSource = dataManager;
+		}
+	});
+</script>
+{% endhighlight %}
+{% endtabs %}
+
+**Single column sorting**
+
+![Single column sorting query](../../images/adaptors/ODataV4Adaptor/odatav4-adaptor-sorting.png)
+
+**Multi column sorting**
+
+![Multi column sorting query](../../images/adaptors/ODataV4Adaptor/odatav4-adaptor-multi-column-sorting.png)
+
+## 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<OrdersDetails>("Orders");
+ 
+// Add services to the container.
+
+// Add controllers with OData support to the service collection.
+
+var recordCount= OrdersDetails.GetAllRecords().Count;
+
+builder.Services.AddControllers().AddOData(
+    options => options
+    .Count()
+    .SetMaxTop(recordCount)
+    .AddRouteComponents(
+        "odata",
+        modelBuilder.GetEdmModel()));
+
+{% endhighlight %}
+
+{% highlight cshtml tabtitle="Index.cshtml" %}
+<ejs-grid id="Grid" height="280" allowPaging="true">
+    <e-grid-columns>
+        <e-grid-column field="OrderID" headerText="Order ID" width="120" textAlign="Right" isPrimaryKey="true" type="number"></e-grid-column>
+        <e-grid-column field="CustomerID" headerText="Customer ID" width="150" type="string"></e-grid-column>
+        <e-grid-column field="EmployeeID" headerText="Employee ID" width="150"></e-grid-column>
+        <e-grid-column field="ShipCountry" headerText="Ship Country" width="150"></e-grid-column>
+    </e-grid-columns>
+</ejs-grid>
+<script>
+	class CustomAdaptor extends ej.data.ODataV4Adaptor {}
+	document.addEventListener("DOMContentLoaded", function () {
+		let grid = document.getElementById("Grid").ej2_instances[0];
+		if (grid) {
+			let dataManager = new ej.data.DataManager({
+				url: "https://localhost:xxxx/odata/Orders", // Replace `xxxx` with your actual localhost port number.
+				adaptor: new CustomAdaptor()
+			});
+			grid.dataSource = dataManager;
+		}
+	});
+</script>
+{% endhighlight %}
+{% endtabs %}
+
+![paging query](../../images/adaptors/ODataV4Adaptor/odatav4-adaptor-paging.png)
+
+## 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/aspnetcore/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 ASP.NET Core Grid, follow the below steps:
+
+{% tabs %}
+{% highlight cshtml tabtitle="Index.cshtml" %}
+<ejs-grid id="Grid" height="280" toolbar="@(new List<string>() { "Add", "Edit", "Delete", "Update", "Cancel", "Search"})">
+   <e-grid-editSettings allowAdding="true" allowDeleting="true" allowEditing="true" mode="Normal"></e-grid-editSettings>
+    <e-grid-columns>
+        <e-grid-column field="OrderID" headerText="Order ID" width="120" textAlign="Right" isPrimaryKey="true" type="number"></e-grid-column>
+        <e-grid-column field="CustomerID" headerText="Customer ID" width="150" type="string"></e-grid-column>
+        <e-grid-column field="EmployeeID" headerText="Employee ID" width="150"></e-grid-column>
+        <e-grid-column field="ShipCountry" headerText="Ship Country" width="150"></e-grid-column>
+    </e-grid-columns>
+</ejs-grid>
+<script>
+	class CustomAdaptor extends ej.data.ODataV4Adaptor {}
+	document.addEventListener("DOMContentLoaded", function () {
+		let grid = document.getElementById("Grid").ej2_instances[0];
+		if (grid) {
+			let dataManager = new ej.data.DataManager({
+				url: "https://localhost:xxxx/odata/Orders", // Replace `xxxx` with your actual localhost port number.
+				adaptor: new CustomAdaptor()
+			});
+			grid.dataSource = dataManager;
+		}
+	});
+</script>
+{% endhighlight %}
+{% endtabs %}
+
+> Normal/Inline editing is the default edit `Mode` for the Grid. To enable CRUD operations, ensure that the [isPrimaryKey](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Grids.GridColumn.html#Syncfusion_EJ2_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 Grid, you can utilize the `HttpPost` method in your server application. Below is a sample implementation of inserting a record using the **OrdersController**:
+
+```cs
+/// <summary>
+/// Inserts a new order to the collection.
+/// </summary>
+/// <param name="addRecord">The order to be inserted.</param>
+/// <returns>It returns the newly inserted record detail.</returns>
+[HttpPost]
+[EnableQuery]
+public IActionResult Post([FromBody] OrdersDetails addRecord)
+{
+    if (addRecord == null)
+    {
+        return BadRequest("Null order");
+    }
+    OrdersDetails.GetAllRecords().Insert(0, addRecord);
+    return Ok(addRecord);
+}
+```
+
+![ODataV4Adaptor-Insert-record](../../images/adaptors/ODataV4Adaptor/odatav4-adaptor-insert-record.png)
+
+**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
+/// <summary>
+/// Updates an existing order.
+/// </summary>
+/// <param name="key">The ID of the order to update.</param>
+/// <param name="updateRecord">The updated order details.</param>
+/// <returns>It returns the updated order details.</returns>
+[HttpPatch("{key}")]
+public IActionResult Patch(int key, [FromBody] OrdersDetails updateRecord)
+{
+    if (updateRecord == null)
+    {
+        return BadRequest("No records to update.");
+    }
+
+    var existingOrder = OrdersDetails.GetAllRecords().FirstOrDefault(order => order.OrderID == key);
+    if (existingOrder == null)
+    {
+        return NotFound($"Order with ID {key} not found.");
+    }
+
+    // Update fields only if they are provided.
+    existingOrder.CustomerID = updateRecord.CustomerID ?? existingOrder.CustomerID;
+    existingOrder.EmployeeID = updateRecord.EmployeeID ?? existingOrder.EmployeeID;
+    existingOrder.ShipCountry = updateRecord.ShipCountry ?? existingOrder.ShipCountry;
+
+    // Return the updated record.
+    return Ok(existingOrder);
+}
+```
+![ODataV4Adaptor-Update-record](../../images/adaptors/ODataV4Adaptor/odatav4-adaptor-update-record.png)
+
+**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
+/// <summary>
+/// Deletes an order.
+/// </summary>
+/// <param name="key">The ID of the order to delete.</param>
+/// <returns>It returns the deleted record detail.</returns>
+[HttpDelete("{key}")]
+public IActionResult Delete(int key)
+{
+    var deleteRecord = OrdersDetails.GetAllRecords().FirstOrDefault(order => order.OrderID == key);
+    if (deleteRecord != null)
+    {
+        OrdersDetails.GetAllRecords().Remove(deleteRecord);
+    }
+    return Ok(deleteRecord);
+}
+```
+![ODataV4Adaptor-Delete-record](../../images/adaptors/ODataV4Adaptor/odatav4-adaptor-delete-record.png)
diff --git a/ej2-asp-core-mvc/grid/images/adaptors/customadaptor/custom-adaptor-datamanager.png b/ej2-asp-core-mvc/grid/images/adaptors/customadaptor/custom-adaptor-datamanager.png
new file mode 100644
index 0000000000..9bac17f8f1
Binary files /dev/null and b/ej2-asp-core-mvc/grid/images/adaptors/customadaptor/custom-adaptor-datamanager.png differ
diff --git a/ej2-asp-core-mvc/grid/images/adaptors/customadaptor/custom-adaptor-fetch.png b/ej2-asp-core-mvc/grid/images/adaptors/customadaptor/custom-adaptor-fetch.png
new file mode 100644
index 0000000000..0864bdddea
Binary files /dev/null and b/ej2-asp-core-mvc/grid/images/adaptors/customadaptor/custom-adaptor-fetch.png differ
diff --git a/ej2-asp-core-mvc/grid/images/adaptors/customadaptor/custom-adaptor-query.png b/ej2-asp-core-mvc/grid/images/adaptors/customadaptor/custom-adaptor-query.png
new file mode 100644
index 0000000000..f696af85e3
Binary files /dev/null and b/ej2-asp-core-mvc/grid/images/adaptors/customadaptor/custom-adaptor-query.png differ
diff --git a/ej2-asp-core-mvc/grid/images/adaptors/customadaptor/custom-adaptor-request.png b/ej2-asp-core-mvc/grid/images/adaptors/customadaptor/custom-adaptor-request.png
new file mode 100644
index 0000000000..ef20acd21f
Binary files /dev/null and b/ej2-asp-core-mvc/grid/images/adaptors/customadaptor/custom-adaptor-request.png differ
diff --git a/ej2-asp-core-mvc/grid/images/adaptors/customadaptor/custom-adaptor-searching.png b/ej2-asp-core-mvc/grid/images/adaptors/customadaptor/custom-adaptor-searching.png
new file mode 100644
index 0000000000..5c9afa0b3d
Binary files /dev/null and b/ej2-asp-core-mvc/grid/images/adaptors/customadaptor/custom-adaptor-searching.png differ
diff --git a/ej2-asp-core-toc.html b/ej2-asp-core-toc.html
index b818f86e43..379fb516fa 100644
--- a/ej2-asp-core-toc.html
+++ b/ej2-asp-core-toc.html
@@ -1304,11 +1304,12 @@
 				</li>
 				<li>Connecting to Adaptors
 					<ul>
-           	                          <li><a href="/ej2-asp-core/grid/connecting-to-adaptors/url-adaptor">Url Adaptor</a></li>
-                                          <li><a href="/ej2-asp-core/grid/connecting-to-adaptors/odatav4-adaptor">ODataV4 Adaptor</a></li>
-                                          <li><a href="/ej2-asp-core/grid/connecting-to-adaptors/web-api-adaptor">Web API Adaptor</a></li>
-					  <li><a href="/ej2-asp-core/grid/connecting-to-adaptors/web-method-adaptor">Web Method Adaptor</a></li>	
-					  <li><a href="/ej2-asp-core/grid/connecting-to-adaptors/remote-save-adaptor">Remote Save Adaptor</a></li>  
+						<li><a href="/ej2-asp-core/grid/connecting-to-adaptors/url-adaptor">Url Adaptor</a></li>
+						<li><a href="/ej2-asp-core/grid/connecting-to-adaptors/odatav4-adaptor">ODataV4 Adaptor</a></li>
+						<li><a href="/ej2-asp-core/grid/connecting-to-adaptors/web-api-adaptor">Web API Adaptor</a></li>
+					  	<li><a href="/ej2-asp-core/grid/connecting-to-adaptors/web-method-adaptor">Web Method Adaptor</a></li>	
+					  	<li><a href="/ej2-asp-core/grid/connecting-to-adaptors/remote-save-adaptor">Remote Save Adaptor</a></li>  
+					  	<li><a href="/ej2-asp-core/grid/connecting-to-adaptors/custom-adaptor">Custom Adaptor</a></li>  
 					</ul>
 				</li>
 				<li><a href="/ej2-asp-core/grid/data-annotation">Data Annotation</a></li>
diff --git a/ej2-asp-mvc-toc.html b/ej2-asp-mvc-toc.html
index 0d54bc5d65..b26cfa0c18 100644
--- a/ej2-asp-mvc-toc.html
+++ b/ej2-asp-mvc-toc.html
@@ -1254,10 +1254,11 @@
 				<li>Connecting to Adaptors
 					<ul>
 					  <li><a href="/ej2-asp-mvc/grid/connecting-to-adaptors/url-adaptor">Url Adaptor</a></li>
-					  <li><a href="/ej2-asp-mvc/grid/connecting-to-adaptors/odatav4-adaptor">ODataV4 Adaptor</a></li>  
-					  <li><a href="/ej2-asp-mvc/grid/connecting-to-adaptors/web-api-adaptor">Web API Adaptor</a></li>  
-					  <li><a href="/ej2-asp-mvc/grid/connecting-to-adaptors/web-method-adaptor">Web Method Adaptor</a></li>  
-					  <li><a href="/ej2-asp-mvc/grid/connecting-to-adaptors/remote-save-adaptor">Remote Save Adaptor</a></li>  
+					  <li><a href="/ej2-asp-mvc/grid/connecting-to-adaptors/odatav4-adaptor">ODataV4 Adaptor</a></li>
+					  <li><a href="/ej2-asp-mvc/grid/connecting-to-adaptors/web-api-adaptor">Web API Adaptor</a></li>
+					  <li><a href="/ej2-asp-mvc/grid/connecting-to-adaptors/web-method-adaptor">Web Method Adaptor</a></li>
+					  <li><a href="/ej2-asp-mvc/grid/connecting-to-adaptors/remote-save-adaptor">Remote Save Adaptor</a></li>
+					  <li><a href="/ej2-asp-mvc/grid/connecting-to-adaptors/custom-adaptor">Custom Adaptor</a></li>
 					</ul>
 				</li>
 				<li><a href="/ej2-asp-mvc/grid/data-annotation">Data Annotation</a></li>


Reviews:
user: login: farveensulthana
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-03-09T09:14:09Z
user: login: farveensulthana
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-03-09T09:43:45Z
user: login: NithyaSivaprakasam
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-03-11T05:34:05Z
user: login: NithyaSivaprakasam
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-03-11T05:34:22Z
user: login: NithyaSivaprakasam
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-03-11T05:36:32Z
user: login: NithyaSivaprakasam
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-03-11T05:36:56Z
user: login: NithyaSivaprakasam
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-03-11T05:37:06Z
user: login: NithyaSivaprakasam
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-03-11T05:38:15Z
user: login: NithyaSivaprakasam
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-03-11T05:39:18Z
user: login: farveensulthana
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-03-11T13:02:52Z
user: login: farveensulthana
state: APPROVED
author_association: CONTRIBUTOR
submitted_at: 2025-03-13T09:48:49Z

Review comments:
diff_hunk: @@ -0,0 +1,672 @@
+---
+layout: post
+title: Bind data & perform CRUD action with CustomAdaptor in Syncfusion Grid
+description: Learn here all about Bind data and perform CRUD action with CustomAdaptor in Syncfusion ##Platform_Name## Grid of Syncfusion Essential JS 2 and more.
+control: Custom Adaptor
+platform: ej2-asp-core-mvc
+documentation: ug
+domainurl: ##DomainURL##
+---
+
+# CustomAdaptor in Syncfusion ASP.NET MVC Grid Component
+
+The `CustomAdaptor` in the Syncfusion ASP.NET MVC Grid Component allows to create their own custom adaptors by extending the built-in adaptors. The custom adaptor involves handling the built-in adaptor query process, request and response. The `CustomAdaptor` to be allows extending the OData V4 services, enabling efficient data fetching and manipulation. By default, there are three method for CustomAdaptor built-in methods.
+
+## Types of CustomAdaptor methods
+
+There are three types of methods in custom adaptors.
+
+### ProcessQuery
+
+It handling or executing a query sent to a data source such as database or custom dataService. This query request for data retrieval, insertion, updating, or deletion. The processQuery can be two argument are `DataManager` and `Query`. The `DataManager` argument using change the url value and `Query` argument are set the additional parameters value or change the any queries such as sort, filter and group etc.
+
+**DataManager**
+
+![DataManager](../../images/adaptors/customadaptor/custom-adaptor-datamanager.png)
+
+**Query**
+
+![Query](../../images/adaptors/customadaptor/custom-adaptor-query.png)
+
+```js
+processQuery(dm, query) {
+    query.addParams('Syncfusion in ASP.NET MVC Grid', 'true'); // Add additional parameter
path: ej2-asp-core-mvc/grid/EJ2_ASP.MVC/connecting-to-adaptors/custom-adaptor.md
user: login: farveensulthana
body: Why the comment doesn;t contain fullstop
created_at: 2025-03-09T09:11:01Z
author_association: CONTRIBUTOR
diff_hunk: @@ -0,0 +1,672 @@
+---
+layout: post
+title: Bind data & perform CRUD action with CustomAdaptor in Syncfusion Grid
+description: Learn here all about Bind data and perform CRUD action with CustomAdaptor in Syncfusion ##Platform_Name## Grid of Syncfusion Essential JS 2 and more.
+control: Custom Adaptor
+platform: ej2-asp-core-mvc
+documentation: ug
+domainurl: ##DomainURL##
+---
+
+# CustomAdaptor in Syncfusion ASP.NET MVC Grid Component
+
+The `CustomAdaptor` in the Syncfusion ASP.NET MVC Grid Component allows to create their own custom adaptors by extending the built-in adaptors. The custom adaptor involves handling the built-in adaptor query process, request and response. The `CustomAdaptor` to be allows extending the OData V4 services, enabling efficient data fetching and manipulation. By default, there are three method for CustomAdaptor built-in methods.
+
+## Types of CustomAdaptor methods
+
+There are three types of methods in custom adaptors.
+
+### ProcessQuery
+
+It handling or executing a query sent to a data source such as database or custom dataService. This query request for data retrieval, insertion, updating, or deletion. The processQuery can be two argument are `DataManager` and `Query`. The `DataManager` argument using change the url value and `Query` argument are set the additional parameters value or change the any queries such as sort, filter and group etc.
+
+**DataManager**
+
+![DataManager](../../images/adaptors/customadaptor/custom-adaptor-datamanager.png)
+
+**Query**
+
+![Query](../../images/adaptors/customadaptor/custom-adaptor-query.png)
+
+```js
+processQuery(dm, query) {
+    query.addParams('Syncfusion in ASP.NET MVC Grid', 'true'); // Add additional parameter
+    return super.processQuery.apply(this, arguments);
+}
+```
+
+### beforeSend
+
+It executed before an request is sent to the server. This function provides an modify the parameter and request headers, data or performing validation.The `beforeSend` can be three argument are `DataManager`, `Request` and `Fetch`. The `DataManager` argument are provided the dataSource and adaptor value. The `Request` argument are sending the custom header by setting the `Authorization`. The `Settings` argument is optional. 
path: ej2-asp-core-mvc/grid/EJ2_ASP.MVC/connecting-to-adaptors/custom-adaptor.md
user: login: farveensulthana
body: three arguments -> argument should be plural
created_at: 2025-03-09T09:12:12Z
author_association: CONTRIBUTOR
diff_hunk: @@ -0,0 +1,672 @@
+---
+layout: post
+title: Bind data & perform CRUD action with CustomAdaptor in Syncfusion Grid
+description: Learn here all about Bind data and perform CRUD action with CustomAdaptor in Syncfusion ##Platform_Name## Grid of Syncfusion Essential JS 2 and more.
+control: Custom Adaptor
+platform: ej2-asp-core-mvc
+documentation: ug
+domainurl: ##DomainURL##
+---
+
+# CustomAdaptor in Syncfusion ASP.NET MVC Grid Component
+
+The `CustomAdaptor` in the Syncfusion ASP.NET MVC Grid Component allows to create their own custom adaptors by extending the built-in adaptors. The custom adaptor involves handling the built-in adaptor query process, request and response. The `CustomAdaptor` to be allows extending the OData V4 services, enabling efficient data fetching and manipulation. By default, there are three method for CustomAdaptor built-in methods.
+
+## Types of CustomAdaptor methods
+
+There are three types of methods in custom adaptors.
+
+### ProcessQuery
+
+It handling or executing a query sent to a data source such as database or custom dataService. This query request for data retrieval, insertion, updating, or deletion. The processQuery can be two argument are `DataManager` and `Query`. The `DataManager` argument using change the url value and `Query` argument are set the additional parameters value or change the any queries such as sort, filter and group etc.
+
+**DataManager**
+
+![DataManager](../../images/adaptors/customadaptor/custom-adaptor-datamanager.png)
+
+**Query**
+
+![Query](../../images/adaptors/customadaptor/custom-adaptor-query.png)
+
+```js
+processQuery(dm, query) {
+    query.addParams('Syncfusion in ASP.NET MVC Grid', 'true'); // Add additional parameter
+    return super.processQuery.apply(this, arguments);
+}
+```
+
+### beforeSend
+
+It executed before an request is sent to the server. This function provides an modify the parameter and request headers, data or performing validation.The `beforeSend` can be three argument are `DataManager`, `Request` and `Fetch`. The `DataManager` argument are provided the dataSource and adaptor value. The `Request` argument are sending the custom header by setting the `Authorization`. The `Settings` argument is optional. 
path: ej2-asp-core-mvc/grid/EJ2_ASP.MVC/connecting-to-adaptors/custom-adaptor.md
user: login: farveensulthana
body: DataSource is property name why it not backticked. adpator also property value. 

created_at: 2025-03-09T09:13:16Z
author_association: CONTRIBUTOR
diff_hunk: @@ -0,0 +1,672 @@
+---
+layout: post
+title: Bind data & perform CRUD action with CustomAdaptor in Syncfusion Grid
+description: Learn here all about Bind data and perform CRUD action with CustomAdaptor in Syncfusion ##Platform_Name## Grid of Syncfusion Essential JS 2 and more.
+control: Custom Adaptor
+platform: ej2-asp-core-mvc
+documentation: ug
+domainurl: ##DomainURL##
+---
+
+# CustomAdaptor in Syncfusion ASP.NET MVC Grid Component
+
+The `CustomAdaptor` in the Syncfusion ASP.NET MVC Grid Component allows to create their own custom adaptors by extending the built-in adaptors. The custom adaptor involves handling the built-in adaptor query process, request and response. The `CustomAdaptor` to be allows extending the OData V4 services, enabling efficient data fetching and manipulation. By default, there are three method for CustomAdaptor built-in methods.
+
+## Types of CustomAdaptor methods
+
+There are three types of methods in custom adaptors.
+
+### ProcessQuery
+
+It handling or executing a query sent to a data source such as database or custom dataService. This query request for data retrieval, insertion, updating, or deletion. The processQuery can be two argument are `DataManager` and `Query`. The `DataManager` argument using change the url value and `Query` argument are set the additional parameters value or change the any queries such as sort, filter and group etc.
+
+**DataManager**
+
+![DataManager](../../images/adaptors/customadaptor/custom-adaptor-datamanager.png)
+
+**Query**
+
+![Query](../../images/adaptors/customadaptor/custom-adaptor-query.png)
+
+```js
+processQuery(dm, query) {
+    query.addParams('Syncfusion in ASP.NET MVC Grid', 'true'); // Add additional parameter
+    return super.processQuery.apply(this, arguments);
+}
+```
+
+### beforeSend
+
+It executed before an request is sent to the server. This function provides an modify the parameter and request headers, data or performing validation.The `beforeSend` can be three argument are `DataManager`, `Request` and `Fetch`. The `DataManager` argument are provided the dataSource and adaptor value. The `Request` argument are sending the custom header by setting the `Authorization`. The `Settings` argument is optional. 
+
+**DataManager**
+
+![DataManager](../../images/adaptors/customadaptor/custom-adaptor-datamanager.png)
+
+**Request**
+
+![Request](../../images/adaptors/customadaptor/custom-adaptor-request.png)
+
+**Settings**
+
+![Settings](../../images/adaptors/customadaptor/custom-adaptor-fetch.png)
+
+```js
+beforeSend(dm, request, settings) {
+request.headers.set('Authorization', `Bearer${(window as any).token}`);
+return super.beforeSend(dm, request, settings);
+}
+```
+
+### processResponse
+
+It is responsible for handling the response received from a server after the asynchronous request. It performs such as parsing the response data, handling error and preparing the data for consumption. The `processResponse` can be multiple arguments are optional.
+
+```js
+processResponse(data, ds, query, xhr, request, changes) {
+    const original = super.processResponse(data, ds, query, xhr, request, changes);
+    let i =0;
+    if (original.result){
+        original.result.forEach((item) => ej.base.setValue('SNo', ++i, item));
+    }
+return original;
+}
+```
+
+This guide provides detailed instructions on binding data and performing CRUD (Create, Read, Update, Delete) actions using the `CustomAdaptor` by extending the `ODataV4Adaptor` in your Syncfusion ASP.NET MVC Grid.
+ 
+## Creating an Custom service
+
+To configure a server with Syncfusion ASP.NET MVC Grid using OData, follow these steps:
+
+**1. Project Creation**
+
+1. Open **Visual Studio**.
+2. Select **Create a new project** → Choose **ASP.NET Web Application (.NET Framework)**.
+3. Name the project **ODataV4Adaptor** and select **MVC** as the project template.
+4. Ensure that the **Web API** option is selected (this is crucial for enabling OData).
+
+For detailed information, refer to this [documentation](https://learn.microsoft.com/en-us/aspnet/mvc/overview/getting-started/introduction/getting-started#create-your-first-app).
+
+**2. Install NuGet Packages**
+
+Using the NuGet package manager in Visual Studio (Tools → NuGet Package Manager → Manage NuGet Packages for Solution), install the `Microsoft.AspNet.OData` NuGet package for OData support and `Newtonsoft.Json` for JSON serialization support.
+
+**3. Model Class Creation:**
+
+Create a model class named `OrdersDetails.cs` inside the **Models** folder.
+
+{% tabs %}
+{% highlight cs tabtitle="OrdersDetails.cs" %}
+
+ namespace ODataV4Adaptor.Models
+{
+  public class OrdersDetails
+  {
+      public static List<OrdersDetails> order = new List<OrdersDetails>();
+      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<OrdersDetails> 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;
+      }
+      [Key]
+      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 %}
+
+**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<T>` method, where `OrdersDetails` represents the CLR type containing order details. 
+
+```cs
+        private static IEdmModel GetEdmModel()
+        {
+            var builder = new ODataConventionModelBuilder();
+            builder.EntitySet<OrdersDetails>("Orders");  // Define OData Entity.
+            return builder.GetEdmModel();
+        }
+```
+
+**5. Register the OData Services**
+
+Once the Entity Data Model is built, you need to register the OData services in your ASP.NET MVC application. Here's how:
+
+```cs
+// WebApiConfig.cs
+using Microsoft.AspNet.OData.Builder;
+using Microsoft.AspNet.OData.Extensions;
+using Microsoft.OData.Edm;
+using ODataV4Adaptor.Models;
+using System;
+using System.Collections.Generic;
+using System.Linq;
+using System.Web;
+using System.Web.Http;
+using System.Web.UI.WebControls;
+
+namespace CustomAdaptor.App_Start
+{
+    public static class WebApiConfig
+    {
+        public static void Register(HttpConfiguration config)
+        {
+            // Enable OData.
+            config.MapODataServiceRoute(
+                routeName: "ODataRoute",
+                routePrefix: "odata",
+                model: GetEdmModel()
+            );
+            // Enable Query Support.
+            config.Count().Filter().OrderBy().Expand().Select().MaxTop(null);
+            // Web API routes.
+            config.Routes.MapHttpRoute(
+                name: "DefaultApi",
+                routeTemplate: "api/{controller}/{action}/{id}",
+                defaults: new { id = System.Web.Http.RouteParameter.Optional }
+            );
+            // Configure JSON formatting.
+            config.Formatters.JsonFormatter.SerializerSettings.Formatting = Newtonsoft.Json.Formatting.Indented;
+        }
+        private static IEdmModel GetEdmModel()
+        {
+            var builder = new ODataConventionModelBuilder();
+            builder.EntitySet<OrdersDetails>("Orders");  // Define OData Entity.
+            return builder.GetEdmModel();
+        }
+    }
+}
+```
+
+**5. Add Controllers**
+
+Create a controllers to expose the OData endpoints.
+
+{% tabs %}
+{% highlight cs tabtitle="OrdersController.cs" %}
+using System.Linq;
+using Microsoft.AspNet.OData;
+using System.Web.Http;
+using CustomAdaptor.Models;
+
+namespace CustomAdaptor.Controllers
+{
+    public class OrdersController : ODataController
+    {
+        /// <summary>
+        /// Retrieves all orders.
+        /// </summary>
+        /// <returns>The collection of orders.</returns>
+        [EnableQuery]
+        public IHttpActionResult Get()
+        {
+            var data = OrdersDetails.GetAllRecords().AsQueryable();
+            return Ok(data);
+        }
+    }
+}
+{% endhighlight %}
+{% endtabs %}
+
+**6. 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 ASP.NET MVC Grid to an Custom service extending the ODataV4 service
+
+To integrate the Syncfusion Grid into your ASP.NET MVC project using Visual Studio, follow these steps:
+
+**Step 1:** Install the Syncfusion ASP.NET MVC Package:
+
+To add `ASP.NET MVC` in the application, open the NuGet package manager in Visual Studio (Tools → NuGet Package Manager → Manage NuGet Packages for Solution), search for [Syncfusion.EJ2.MVC5](https://www.nuget.org/packages/Syncfusion.EJ2.MVC5) and install it.
+Alternatively, you can install it using the following Package Manager Console command:
+
+{% tabs %}
+{% highlight C# tabtitle="Package Manager" %}
+
+Install-Package Syncfusion.EJ2.MVC5 -Version {{ site.releaseversion }}
+
+{% endhighlight %}
+{% endtabs %}
+
+**Step 2:** Add Syncfusion ASP.NET MVC namespace
+
+Add `Syncfusion.EJ2` namespace reference in `Web.config` under `Views` folder.
+
+```cs
+<namespaces>
+    <add namespace="Syncfusion.EJ2"/>
+</namespaces>
+```
+
+**Step 3:** Add stylesheet and script resources
+
+To include the required styles and scripts, add the following references inside the `<head>` of `~/Pages/Shared/_Layout.cshtml` file:
+{% tabs %}
+{% highlight cshtml tabtitle="~/_Layout.cshtml" %}
+
+<head>
+    ...
+    <!-- Syncfusion ASP.NET MVC control styles -->
+    <link rel="stylesheet" href="https://cdn.syncfusion.com/ej2/{{ site.ej2version }}/bootstrap5.css" />
+    <!-- Syncfusion ASP.NET MVC control scripts -->
+    <script src="https://cdn.syncfusion.com/ej2/{{ site.ej2version }}/dist/ej2.min.js"></script>
+    <!-- Include the necessary CSS files to style the Syncfusion ASP.NET MVC controls: -->
+    <link href="https://cdn.syncfusion.com/ej2/{{ site.ej2version }}/ej2-base/styles/bootstrap5.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/{{ site.ej2version }}/ej2-grids/styles/bootstrap5.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/{{ site.ej2version }}/ej2-buttons/styles/bootstrap5.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/{{ site.ej2version }}/ej2-popups/styles/bootstrap5.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/{{ site.ej2version }}/ej2-richtexteditor/styles/bootstrap5.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/{{ site.ej2version }}/ej2-navigations/styles/bootstrap5.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/{{ site.ej2version }}/ej2-dropdowns/styles/bootstrap5.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/{{ site.ej2version }}/ej2-lists/styles/bootstrap5.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/{{ site.ej2version }}/ej2-inputs/styles/bootstrap5.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/{{ site.ej2version }}/ej2-calendars/styles/bootstrap5.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/{{ site.ej2version }}/ej2-notifications/styles/bootstrap5.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/{{ site.ej2version }}/ej2-splitbuttons/styles/bootstrap5.css" rel="stylesheet" />
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
+    <script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type="text/javascript"></script>
+</head>
+
+{% endhighlight %}
+{% endtabs %}
+
+**Step 4:** Register Syncfusion Script Manager
+
+To ensure proper script execution, register the Syncfusion Script Manager `EJS().ScriptManager()` at the end of `<body>` in the `~/Pages/Shared/_Layout.cshtml` file as follows.
+
+{% tabs %}
+{% highlight cshtml tabtitle="~/_Layout.cshtml" %}
+<body>
+...
+<!-- Syncfusion ASP.NET MVC Script Manager -->
+@Html.EJS().ScriptManager()
+</body>
+{% endhighlight %}
+{% endtabs %}
+
+**Step 4: Adding Custom Adaptor and Syncfusion Grid**
+
+To create a custom adaptor, extend the ODataV4Adaptor. This custom adaptor will implement three key methods:
+
+* The `processQuery` method is used to change the URL of your API endpoint and set the additional parameters for executing the query.
+
+* The `beforeSend` method is used to send the custom header for `Authorization` in the request header.
+
+* The `processResponse` method is used to set the value for customize the column for new field is `SNo`.
+
+**Implementing the Custom Adaptor**
+
+Define a `DataManager` instance, specifying the API endpoint (https://localhost:xxxx/odata/Orders) in the url property and setting the adaptor to `CustomAdaptor`.
+
+{% tabs %}
+{% highlight html tabtitle="Index.cshtml" %}
+@Html.EJS().Grid("Grid").Columns(col =>
path: ej2-asp-core-mvc/grid/EJ2_ASP.MVC/connecting-to-adaptors/custom-adaptor.md
user: login: farveensulthana
body: alignment is not proper for Grid definition 
created_at: 2025-03-09T09:27:40Z
author_association: CONTRIBUTOR
diff_hunk: @@ -0,0 +1,672 @@
+---
+layout: post
+title: Bind data & perform CRUD action with CustomAdaptor in Syncfusion Grid
+description: Learn here all about Bind data and perform CRUD action with CustomAdaptor in Syncfusion ##Platform_Name## Grid of Syncfusion Essential JS 2 and more.
+control: Custom Adaptor
+platform: ej2-asp-core-mvc
+documentation: ug
+domainurl: ##DomainURL##
+---
+
+# CustomAdaptor in Syncfusion ASP.NET MVC Grid Component
+
+The `CustomAdaptor` in the Syncfusion ASP.NET MVC Grid Component allows to create their own custom adaptors by extending the built-in adaptors. The custom adaptor involves handling the built-in adaptor query process, request and response. The `CustomAdaptor` to be allows extending the OData V4 services, enabling efficient data fetching and manipulation. By default, there are three method for CustomAdaptor built-in methods.
+
+## Types of CustomAdaptor methods
+
+There are three types of methods in custom adaptors.
+
+### ProcessQuery
+
+It handling or executing a query sent to a data source such as database or custom dataService. This query request for data retrieval, insertion, updating, or deletion. The processQuery can be two argument are `DataManager` and `Query`. The `DataManager` argument using change the url value and `Query` argument are set the additional parameters value or change the any queries such as sort, filter and group etc.
+
+**DataManager**
+
+![DataManager](../../images/adaptors/customadaptor/custom-adaptor-datamanager.png)
+
+**Query**
+
+![Query](../../images/adaptors/customadaptor/custom-adaptor-query.png)
+
+```js
+processQuery(dm, query) {
+    query.addParams('Syncfusion in ASP.NET MVC Grid', 'true'); // Add additional parameter
+    return super.processQuery.apply(this, arguments);
+}
+```
+
+### beforeSend
+
+It executed before an request is sent to the server. This function provides an modify the parameter and request headers, data or performing validation.The `beforeSend` can be three argument are `DataManager`, `Request` and `Fetch`. The `DataManager` argument are provided the dataSource and adaptor value. The `Request` argument are sending the custom header by setting the `Authorization`. The `Settings` argument is optional. 
+
+**DataManager**
+
+![DataManager](../../images/adaptors/customadaptor/custom-adaptor-datamanager.png)
+
+**Request**
+
+![Request](../../images/adaptors/customadaptor/custom-adaptor-request.png)
+
+**Settings**
+
+![Settings](../../images/adaptors/customadaptor/custom-adaptor-fetch.png)
+
+```js
+beforeSend(dm, request, settings) {
+request.headers.set('Authorization', `Bearer${(window as any).token}`);
+return super.beforeSend(dm, request, settings);
+}
+```
+
+### processResponse
+
+It is responsible for handling the response received from a server after the asynchronous request. It performs such as parsing the response data, handling error and preparing the data for consumption. The `processResponse` can be multiple arguments are optional.
+
+```js
+processResponse(data, ds, query, xhr, request, changes) {
+    const original = super.processResponse(data, ds, query, xhr, request, changes);
+    let i =0;
+    if (original.result){
+        original.result.forEach((item) => ej.base.setValue('SNo', ++i, item));
+    }
+return original;
+}
+```
+
+This guide provides detailed instructions on binding data and performing CRUD (Create, Read, Update, Delete) actions using the `CustomAdaptor` by extending the `ODataV4Adaptor` in your Syncfusion ASP.NET MVC Grid.
+ 
+## Creating an Custom service
+
+To configure a server with Syncfusion ASP.NET MVC Grid using OData, follow these steps:
+
+**1. Project Creation**
+
+1. Open **Visual Studio**.
+2. Select **Create a new project** → Choose **ASP.NET Web Application (.NET Framework)**.
+3. Name the project **ODataV4Adaptor** and select **MVC** as the project template.
+4. Ensure that the **Web API** option is selected (this is crucial for enabling OData).
+
+For detailed information, refer to this [documentation](https://learn.microsoft.com/en-us/aspnet/mvc/overview/getting-started/introduction/getting-started#create-your-first-app).
+
+**2. Install NuGet Packages**
+
+Using the NuGet package manager in Visual Studio (Tools → NuGet Package Manager → Manage NuGet Packages for Solution), install the `Microsoft.AspNet.OData` NuGet package for OData support and `Newtonsoft.Json` for JSON serialization support.
+
+**3. Model Class Creation:**
+
+Create a model class named `OrdersDetails.cs` inside the **Models** folder.
+
+{% tabs %}
+{% highlight cs tabtitle="OrdersDetails.cs" %}
+
+ namespace ODataV4Adaptor.Models
+{
+  public class OrdersDetails
+  {
+      public static List<OrdersDetails> order = new List<OrdersDetails>();
+      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<OrdersDetails> 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;
+      }
+      [Key]
+      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 %}
+
+**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<T>` method, where `OrdersDetails` represents the CLR type containing order details. 
+
+```cs
+        private static IEdmModel GetEdmModel()
+        {
+            var builder = new ODataConventionModelBuilder();
+            builder.EntitySet<OrdersDetails>("Orders");  // Define OData Entity.
+            return builder.GetEdmModel();
+        }
+```
+
+**5. Register the OData Services**
+
+Once the Entity Data Model is built, you need to register the OData services in your ASP.NET MVC application. Here's how:
+
+```cs
+// WebApiConfig.cs
+using Microsoft.AspNet.OData.Builder;
+using Microsoft.AspNet.OData.Extensions;
+using Microsoft.OData.Edm;
+using ODataV4Adaptor.Models;
+using System;
+using System.Collections.Generic;
+using System.Linq;
+using System.Web;
+using System.Web.Http;
+using System.Web.UI.WebControls;
+
+namespace CustomAdaptor.App_Start
+{
+    public static class WebApiConfig
+    {
+        public static void Register(HttpConfiguration config)
+        {
+            // Enable OData.
+            config.MapODataServiceRoute(
+                routeName: "ODataRoute",
+                routePrefix: "odata",
+                model: GetEdmModel()
+            );
+            // Enable Query Support.
+            config.Count().Filter().OrderBy().Expand().Select().MaxTop(null);
+            // Web API routes.
+            config.Routes.MapHttpRoute(
+                name: "DefaultApi",
+                routeTemplate: "api/{controller}/{action}/{id}",
+                defaults: new { id = System.Web.Http.RouteParameter.Optional }
+            );
+            // Configure JSON formatting.
+            config.Formatters.JsonFormatter.SerializerSettings.Formatting = Newtonsoft.Json.Formatting.Indented;
+        }
+        private static IEdmModel GetEdmModel()
+        {
+            var builder = new ODataConventionModelBuilder();
+            builder.EntitySet<OrdersDetails>("Orders");  // Define OData Entity.
+            return builder.GetEdmModel();
+        }
+    }
+}
+```
+
+**5. Add Controllers**
+
+Create a controllers to expose the OData endpoints.
+
+{% tabs %}
+{% highlight cs tabtitle="OrdersController.cs" %}
+using System.Linq;
+using Microsoft.AspNet.OData;
+using System.Web.Http;
+using CustomAdaptor.Models;
+
+namespace CustomAdaptor.Controllers
+{
+    public class OrdersController : ODataController
+    {
+        /// <summary>
+        /// Retrieves all orders.
+        /// </summary>
+        /// <returns>The collection of orders.</returns>
+        [EnableQuery]
+        public IHttpActionResult Get()
+        {
+            var data = OrdersDetails.GetAllRecords().AsQueryable();
+            return Ok(data);
+        }
+    }
+}
+{% endhighlight %}
+{% endtabs %}
+
+**6. 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 ASP.NET MVC Grid to an Custom service extending the ODataV4 service
+
+To integrate the Syncfusion Grid into your ASP.NET MVC project using Visual Studio, follow these steps:
+
+**Step 1:** Install the Syncfusion ASP.NET MVC Package:
+
+To add `ASP.NET MVC` in the application, open the NuGet package manager in Visual Studio (Tools → NuGet Package Manager → Manage NuGet Packages for Solution), search for [Syncfusion.EJ2.MVC5](https://www.nuget.org/packages/Syncfusion.EJ2.MVC5) and install it.
+Alternatively, you can install it using the following Package Manager Console command:
+
+{% tabs %}
+{% highlight C# tabtitle="Package Manager" %}
+
+Install-Package Syncfusion.EJ2.MVC5 -Version {{ site.releaseversion }}
+
+{% endhighlight %}
+{% endtabs %}
+
+**Step 2:** Add Syncfusion ASP.NET MVC namespace
+
+Add `Syncfusion.EJ2` namespace reference in `Web.config` under `Views` folder.
+
+```cs
+<namespaces>
+    <add namespace="Syncfusion.EJ2"/>
+</namespaces>
+```
+
+**Step 3:** Add stylesheet and script resources
+
+To include the required styles and scripts, add the following references inside the `<head>` of `~/Pages/Shared/_Layout.cshtml` file:
+{% tabs %}
+{% highlight cshtml tabtitle="~/_Layout.cshtml" %}
+
+<head>
+    ...
+    <!-- Syncfusion ASP.NET MVC control styles -->
+    <link rel="stylesheet" href="https://cdn.syncfusion.com/ej2/{{ site.ej2version }}/bootstrap5.css" />
+    <!-- Syncfusion ASP.NET MVC control scripts -->
+    <script src="https://cdn.syncfusion.com/ej2/{{ site.ej2version }}/dist/ej2.min.js"></script>
+    <!-- Include the necessary CSS files to style the Syncfusion ASP.NET MVC controls: -->
+    <link href="https://cdn.syncfusion.com/ej2/{{ site.ej2version }}/ej2-base/styles/bootstrap5.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/{{ site.ej2version }}/ej2-grids/styles/bootstrap5.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/{{ site.ej2version }}/ej2-buttons/styles/bootstrap5.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/{{ site.ej2version }}/ej2-popups/styles/bootstrap5.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/{{ site.ej2version }}/ej2-richtexteditor/styles/bootstrap5.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/{{ site.ej2version }}/ej2-navigations/styles/bootstrap5.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/{{ site.ej2version }}/ej2-dropdowns/styles/bootstrap5.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/{{ site.ej2version }}/ej2-lists/styles/bootstrap5.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/{{ site.ej2version }}/ej2-inputs/styles/bootstrap5.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/{{ site.ej2version }}/ej2-calendars/styles/bootstrap5.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/{{ site.ej2version }}/ej2-notifications/styles/bootstrap5.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/{{ site.ej2version }}/ej2-splitbuttons/styles/bootstrap5.css" rel="stylesheet" />
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
+    <script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type="text/javascript"></script>
+</head>
+
+{% endhighlight %}
+{% endtabs %}
+
+**Step 4:** Register Syncfusion Script Manager
+
+To ensure proper script execution, register the Syncfusion Script Manager `EJS().ScriptManager()` at the end of `<body>` in the `~/Pages/Shared/_Layout.cshtml` file as follows.
+
+{% tabs %}
+{% highlight cshtml tabtitle="~/_Layout.cshtml" %}
+<body>
+...
+<!-- Syncfusion ASP.NET MVC Script Manager -->
+@Html.EJS().ScriptManager()
+</body>
+{% endhighlight %}
+{% endtabs %}
+
+**Step 4: Adding Custom Adaptor and Syncfusion Grid**
+
+To create a custom adaptor, extend the ODataV4Adaptor. This custom adaptor will implement three key methods:
+
+* The `processQuery` method is used to change the URL of your API endpoint and set the additional parameters for executing the query.
+
+* The `beforeSend` method is used to send the custom header for `Authorization` in the request header.
+
+* The `processResponse` method is used to set the value for customize the column for new field is `SNo`.
+
+**Implementing the Custom Adaptor**
+
+Define a `DataManager` instance, specifying the API endpoint (https://localhost:xxxx/odata/Orders) in the url property and setting the adaptor to `CustomAdaptor`.
+
+{% tabs %}
+{% highlight html tabtitle="Index.cshtml" %}
+@Html.EJS().Grid("Grid").Columns(col =>
+	{
+		col.Field("SNo").HeaderText("S. No").Width("100").Add();
+		col.Field("OrderID").HeaderText("Order ID").Width("150").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).IsPrimaryKey(true).Add();
+		col.Field("CustomerID").HeaderText("Customer ID").Width("150").Add();
+		col.Field("ShipCity").HeaderText("Ship City").Width("150").Add();
+		col.Field("ShipCountry").HeaderText("Ship Country").Width("150").Add();
+	}).Render()
+<script>
+    class CustomAdaptor extends ejs.data.ODataV4Adaptor {}
path: ej2-asp-core-mvc/grid/EJ2_ASP.MVC/connecting-to-adaptors/custom-adaptor.md
user: login: farveensulthana
body: why not defined code related to processResponse, processquery and beforeSend similiar to reactcomponent
<img width="536" alt="image" src="https://github.com/user-attachments/assets/0c3ad3ac-5fa0-474d-8e50-11cc633586ba" />

created_at: 2025-03-09T09:30:25Z
author_association: CONTRIBUTOR
diff_hunk: @@ -0,0 +1,672 @@
+---
+layout: post
+title: Bind data & perform CRUD action with CustomAdaptor in Syncfusion Grid
+description: Learn here all about Bind data and perform CRUD action with CustomAdaptor in Syncfusion ##Platform_Name## Grid of Syncfusion Essential JS 2 and more.
+control: Custom Adaptor
+platform: ej2-asp-core-mvc
+documentation: ug
+domainurl: ##DomainURL##
+---
+
+# CustomAdaptor in Syncfusion ASP.NET MVC Grid Component
+
+The `CustomAdaptor` in the Syncfusion ASP.NET MVC Grid Component allows to create their own custom adaptors by extending the built-in adaptors. The custom adaptor involves handling the built-in adaptor query process, request and response. The `CustomAdaptor` to be allows extending the OData V4 services, enabling efficient data fetching and manipulation. By default, there are three method for CustomAdaptor built-in methods.
+
+## Types of CustomAdaptor methods
+
+There are three types of methods in custom adaptors.
+
+### ProcessQuery
+
+It handling or executing a query sent to a data source such as database or custom dataService. This query request for data retrieval, insertion, updating, or deletion. The processQuery can be two argument are `DataManager` and `Query`. The `DataManager` argument using change the url value and `Query` argument are set the additional parameters value or change the any queries such as sort, filter and group etc.
+
+**DataManager**
+
+![DataManager](../../images/adaptors/customadaptor/custom-adaptor-datamanager.png)
+
+**Query**
+
+![Query](../../images/adaptors/customadaptor/custom-adaptor-query.png)
+
+```js
+processQuery(dm, query) {
+    query.addParams('Syncfusion in ASP.NET MVC Grid', 'true'); // Add additional parameter
+    return super.processQuery.apply(this, arguments);
+}
+```
+
+### beforeSend
+
+It executed before an request is sent to the server. This function provides an modify the parameter and request headers, data or performing validation.The `beforeSend` can be three argument are `DataManager`, `Request` and `Fetch`. The `DataManager` argument are provided the dataSource and adaptor value. The `Request` argument are sending the custom header by setting the `Authorization`. The `Settings` argument is optional. 
+
+**DataManager**
+
+![DataManager](../../images/adaptors/customadaptor/custom-adaptor-datamanager.png)
+
+**Request**
+
+![Request](../../images/adaptors/customadaptor/custom-adaptor-request.png)
+
+**Settings**
+
+![Settings](../../images/adaptors/customadaptor/custom-adaptor-fetch.png)
+
+```js
+beforeSend(dm, request, settings) {
+request.headers.set('Authorization', `Bearer${(window as any).token}`);
+return super.beforeSend(dm, request, settings);
+}
+```
+
+### processResponse
+
+It is responsible for handling the response received from a server after the asynchronous request. It performs such as parsing the response data, handling error and preparing the data for consumption. The `processResponse` can be multiple arguments are optional.
+
+```js
+processResponse(data, ds, query, xhr, request, changes) {
+    const original = super.processResponse(data, ds, query, xhr, request, changes);
+    let i =0;
+    if (original.result){
+        original.result.forEach((item) => ej.base.setValue('SNo', ++i, item));
+    }
+return original;
+}
+```
+
+This guide provides detailed instructions on binding data and performing CRUD (Create, Read, Update, Delete) actions using the `CustomAdaptor` by extending the `ODataV4Adaptor` in your Syncfusion ASP.NET MVC Grid.
+ 
+## Creating an Custom service
+
+To configure a server with Syncfusion ASP.NET MVC Grid using OData, follow these steps:
+
+**1. Project Creation**
+
+1. Open **Visual Studio**.
+2. Select **Create a new project** → Choose **ASP.NET Web Application (.NET Framework)**.
+3. Name the project **ODataV4Adaptor** and select **MVC** as the project template.
+4. Ensure that the **Web API** option is selected (this is crucial for enabling OData).
+
+For detailed information, refer to this [documentation](https://learn.microsoft.com/en-us/aspnet/mvc/overview/getting-started/introduction/getting-started#create-your-first-app).
+
+**2. Install NuGet Packages**
+
+Using the NuGet package manager in Visual Studio (Tools → NuGet Package Manager → Manage NuGet Packages for Solution), install the `Microsoft.AspNet.OData` NuGet package for OData support and `Newtonsoft.Json` for JSON serialization support.
+
+**3. Model Class Creation:**
+
+Create a model class named `OrdersDetails.cs` inside the **Models** folder.
+
+{% tabs %}
+{% highlight cs tabtitle="OrdersDetails.cs" %}
+
+ namespace ODataV4Adaptor.Models
+{
+  public class OrdersDetails
+  {
+      public static List<OrdersDetails> order = new List<OrdersDetails>();
+      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<OrdersDetails> 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;
+      }
+      [Key]
+      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 %}
+
+**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<T>` method, where `OrdersDetails` represents the CLR type containing order details. 
+
+```cs
+        private static IEdmModel GetEdmModel()
+        {
+            var builder = new ODataConventionModelBuilder();
+            builder.EntitySet<OrdersDetails>("Orders");  // Define OData Entity.
+            return builder.GetEdmModel();
+        }
+```
+
+**5. Register the OData Services**
+
+Once the Entity Data Model is built, you need to register the OData services in your ASP.NET MVC application. Here's how:
+
+```cs
+// WebApiConfig.cs
+using Microsoft.AspNet.OData.Builder;
+using Microsoft.AspNet.OData.Extensions;
+using Microsoft.OData.Edm;
+using ODataV4Adaptor.Models;
+using System;
+using System.Collections.Generic;
+using System.Linq;
+using System.Web;
+using System.Web.Http;
+using System.Web.UI.WebControls;
+
+namespace CustomAdaptor.App_Start
+{
+    public static class WebApiConfig
+    {
+        public static void Register(HttpConfiguration config)
+        {
+            // Enable OData.
+            config.MapODataServiceRoute(
+                routeName: "ODataRoute",
+                routePrefix: "odata",
+                model: GetEdmModel()
+            );
+            // Enable Query Support.
+            config.Count().Filter().OrderBy().Expand().Select().MaxTop(null);
+            // Web API routes.
+            config.Routes.MapHttpRoute(
+                name: "DefaultApi",
+                routeTemplate: "api/{controller}/{action}/{id}",
+                defaults: new { id = System.Web.Http.RouteParameter.Optional }
+            );
+            // Configure JSON formatting.
+            config.Formatters.JsonFormatter.SerializerSettings.Formatting = Newtonsoft.Json.Formatting.Indented;
+        }
+        private static IEdmModel GetEdmModel()
+        {
+            var builder = new ODataConventionModelBuilder();
+            builder.EntitySet<OrdersDetails>("Orders");  // Define OData Entity.
+            return builder.GetEdmModel();
+        }
+    }
+}
+```
+
+**5. Add Controllers**
+
+Create a controllers to expose the OData endpoints.
+
+{% tabs %}
+{% highlight cs tabtitle="OrdersController.cs" %}
+using System.Linq;
+using Microsoft.AspNet.OData;
+using System.Web.Http;
+using CustomAdaptor.Models;
+
+namespace CustomAdaptor.Controllers
+{
+    public class OrdersController : ODataController
+    {
+        /// <summary>
+        /// Retrieves all orders.
+        /// </summary>
+        /// <returns>The collection of orders.</returns>
+        [EnableQuery]
+        public IHttpActionResult Get()
+        {
+            var data = OrdersDetails.GetAllRecords().AsQueryable();
+            return Ok(data);
+        }
+    }
+}
+{% endhighlight %}
+{% endtabs %}
+
+**6. 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 ASP.NET MVC Grid to an Custom service extending the ODataV4 service
+
+To integrate the Syncfusion Grid into your ASP.NET MVC project using Visual Studio, follow these steps:
+
+**Step 1:** Install the Syncfusion ASP.NET MVC Package:
+
+To add `ASP.NET MVC` in the application, open the NuGet package manager in Visual Studio (Tools → NuGet Package Manager → Manage NuGet Packages for Solution), search for [Syncfusion.EJ2.MVC5](https://www.nuget.org/packages/Syncfusion.EJ2.MVC5) and install it.
+Alternatively, you can install it using the following Package Manager Console command:
+
+{% tabs %}
+{% highlight C# tabtitle="Package Manager" %}
+
+Install-Package Syncfusion.EJ2.MVC5 -Version {{ site.releaseversion }}
+
+{% endhighlight %}
+{% endtabs %}
+
+**Step 2:** Add Syncfusion ASP.NET MVC namespace
+
+Add `Syncfusion.EJ2` namespace reference in `Web.config` under `Views` folder.
+
+```cs
+<namespaces>
+    <add namespace="Syncfusion.EJ2"/>
+</namespaces>
+```
+
+**Step 3:** Add stylesheet and script resources
+
+To include the required styles and scripts, add the following references inside the `<head>` of `~/Pages/Shared/_Layout.cshtml` file:
+{% tabs %}
+{% highlight cshtml tabtitle="~/_Layout.cshtml" %}
+
+<head>
+    ...
+    <!-- Syncfusion ASP.NET MVC control styles -->
+    <link rel="stylesheet" href="https://cdn.syncfusion.com/ej2/{{ site.ej2version }}/bootstrap5.css" />
+    <!-- Syncfusion ASP.NET MVC control scripts -->
+    <script src="https://cdn.syncfusion.com/ej2/{{ site.ej2version }}/dist/ej2.min.js"></script>
+    <!-- Include the necessary CSS files to style the Syncfusion ASP.NET MVC controls: -->
+    <link href="https://cdn.syncfusion.com/ej2/{{ site.ej2version }}/ej2-base/styles/bootstrap5.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/{{ site.ej2version }}/ej2-grids/styles/bootstrap5.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/{{ site.ej2version }}/ej2-buttons/styles/bootstrap5.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/{{ site.ej2version }}/ej2-popups/styles/bootstrap5.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/{{ site.ej2version }}/ej2-richtexteditor/styles/bootstrap5.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/{{ site.ej2version }}/ej2-navigations/styles/bootstrap5.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/{{ site.ej2version }}/ej2-dropdowns/styles/bootstrap5.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/{{ site.ej2version }}/ej2-lists/styles/bootstrap5.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/{{ site.ej2version }}/ej2-inputs/styles/bootstrap5.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/{{ site.ej2version }}/ej2-calendars/styles/bootstrap5.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/{{ site.ej2version }}/ej2-notifications/styles/bootstrap5.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/{{ site.ej2version }}/ej2-splitbuttons/styles/bootstrap5.css" rel="stylesheet" />
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
+    <script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type="text/javascript"></script>
+</head>
+
+{% endhighlight %}
+{% endtabs %}
+
+**Step 4:** Register Syncfusion Script Manager
+
+To ensure proper script execution, register the Syncfusion Script Manager `EJS().ScriptManager()` at the end of `<body>` in the `~/Pages/Shared/_Layout.cshtml` file as follows.
+
+{% tabs %}
+{% highlight cshtml tabtitle="~/_Layout.cshtml" %}
+<body>
+...
+<!-- Syncfusion ASP.NET MVC Script Manager -->
+@Html.EJS().ScriptManager()
+</body>
+{% endhighlight %}
+{% endtabs %}
+
+**Step 4: Adding Custom Adaptor and Syncfusion Grid**
+
+To create a custom adaptor, extend the ODataV4Adaptor. This custom adaptor will implement three key methods:
+
+* The `processQuery` method is used to change the URL of your API endpoint and set the additional parameters for executing the query.
+
+* The `beforeSend` method is used to send the custom header for `Authorization` in the request header.
+
+* The `processResponse` method is used to set the value for customize the column for new field is `SNo`.
+
+**Implementing the Custom Adaptor**
+
+Define a `DataManager` instance, specifying the API endpoint (https://localhost:xxxx/odata/Orders) in the url property and setting the adaptor to `CustomAdaptor`.
+
+{% tabs %}
+{% highlight html tabtitle="Index.cshtml" %}
+@Html.EJS().Grid("Grid").Columns(col =>
+	{
+		col.Field("SNo").HeaderText("S. No").Width("100").Add();
+		col.Field("OrderID").HeaderText("Order ID").Width("150").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).IsPrimaryKey(true).Add();
+		col.Field("CustomerID").HeaderText("Customer ID").Width("150").Add();
+		col.Field("ShipCity").HeaderText("Ship City").Width("150").Add();
+		col.Field("ShipCountry").HeaderText("Ship Country").Width("150").Add();
+	}).Render()
+<script>
+    class CustomAdaptor extends ejs.data.ODataV4Adaptor {}
+    document.addEventListener("DOMContentLoaded", function () {
+        let grid = document.getElementById("Grid").ej2_instances[0];
+        if (grid) {
+            let dataManager = new ejs.data.DataManager({
+                url: "https://localhost:xxxx/odata/Orders",
+                adaptor: new CustomAdaptor()
+            });
+            grid.dataSource = dataManager;
+        }
+    });
+</script>
+{% 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**.
+
+## Handling Searching Operation
path: ej2-asp-core-mvc/grid/EJ2_ASP.MVC/connecting-to-adaptors/custom-adaptor.md
user: login: farveensulthana
body: Why in between words casing in upper cases. Did you referred react or angular?
created_at: 2025-03-09T09:32:55Z
author_association: CONTRIBUTOR
diff_hunk: @@ -0,0 +1,672 @@
+---
+layout: post
+title: Bind data & perform CRUD action with CustomAdaptor in Syncfusion Grid
+description: Learn here all about Bind data and perform CRUD action with CustomAdaptor in Syncfusion ##Platform_Name## Grid of Syncfusion Essential JS 2 and more.
+control: Custom Adaptor
+platform: ej2-asp-core-mvc
+documentation: ug
+domainurl: ##DomainURL##
+---
+
+# CustomAdaptor in Syncfusion ASP.NET MVC Grid Component
+
+The `CustomAdaptor` in the Syncfusion ASP.NET MVC Grid Component allows to create their own custom adaptors by extending the built-in adaptors. The custom adaptor involves handling the built-in adaptor query process, request and response. The `CustomAdaptor` to be allows extending the OData V4 services, enabling efficient data fetching and manipulation. By default, there are three method for CustomAdaptor built-in methods.
+
+## Types of CustomAdaptor methods
+
+There are three types of methods in custom adaptors.
+
+### ProcessQuery
+
+It handling or executing a query sent to a data source such as database or custom dataService. This query request for data retrieval, insertion, updating, or deletion. The processQuery can be two argument are `DataManager` and `Query`. The `DataManager` argument using change the url value and `Query` argument are set the additional parameters value or change the any queries such as sort, filter and group etc.
+
+**DataManager**
+
+![DataManager](../../images/adaptors/customadaptor/custom-adaptor-datamanager.png)
+
+**Query**
+
+![Query](../../images/adaptors/customadaptor/custom-adaptor-query.png)
+
+```js
+processQuery(dm, query) {
+    query.addParams('Syncfusion in ASP.NET MVC Grid', 'true'); // Add additional parameter
+    return super.processQuery.apply(this, arguments);
+}
+```
+
+### beforeSend
+
+It executed before an request is sent to the server. This function provides an modify the parameter and request headers, data or performing validation.The `beforeSend` can be three argument are `DataManager`, `Request` and `Fetch`. The `DataManager` argument are provided the dataSource and adaptor value. The `Request` argument are sending the custom header by setting the `Authorization`. The `Settings` argument is optional. 
+
+**DataManager**
+
+![DataManager](../../images/adaptors/customadaptor/custom-adaptor-datamanager.png)
+
+**Request**
+
+![Request](../../images/adaptors/customadaptor/custom-adaptor-request.png)
+
+**Settings**
+
+![Settings](../../images/adaptors/customadaptor/custom-adaptor-fetch.png)
+
+```js
+beforeSend(dm, request, settings) {
+request.headers.set('Authorization', `Bearer${(window as any).token}`);
+return super.beforeSend(dm, request, settings);
+}
+```
+
+### processResponse
+
+It is responsible for handling the response received from a server after the asynchronous request. It performs such as parsing the response data, handling error and preparing the data for consumption. The `processResponse` can be multiple arguments are optional.
+
+```js
+processResponse(data, ds, query, xhr, request, changes) {
+    const original = super.processResponse(data, ds, query, xhr, request, changes);
+    let i =0;
+    if (original.result){
+        original.result.forEach((item) => ej.base.setValue('SNo', ++i, item));
+    }
+return original;
+}
+```
+
+This guide provides detailed instructions on binding data and performing CRUD (Create, Read, Update, Delete) actions using the `CustomAdaptor` by extending the `ODataV4Adaptor` in your Syncfusion ASP.NET MVC Grid.
+ 
+## Creating an Custom service
+
+To configure a server with Syncfusion ASP.NET MVC Grid using OData, follow these steps:
+
+**1. Project Creation**
+
+1. Open **Visual Studio**.
+2. Select **Create a new project** → Choose **ASP.NET Web Application (.NET Framework)**.
+3. Name the project **ODataV4Adaptor** and select **MVC** as the project template.
+4. Ensure that the **Web API** option is selected (this is crucial for enabling OData).
+
+For detailed information, refer to this [documentation](https://learn.microsoft.com/en-us/aspnet/mvc/overview/getting-started/introduction/getting-started#create-your-first-app).
+
+**2. Install NuGet Packages**
+
+Using the NuGet package manager in Visual Studio (Tools → NuGet Package Manager → Manage NuGet Packages for Solution), install the `Microsoft.AspNet.OData` NuGet package for OData support and `Newtonsoft.Json` for JSON serialization support.
+
+**3. Model Class Creation:**
+
+Create a model class named `OrdersDetails.cs` inside the **Models** folder.
+
+{% tabs %}
+{% highlight cs tabtitle="OrdersDetails.cs" %}
+
+ namespace ODataV4Adaptor.Models
+{
+  public class OrdersDetails
+  {
+      public static List<OrdersDetails> order = new List<OrdersDetails>();
+      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<OrdersDetails> 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;
+      }
+      [Key]
+      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 %}
+
+**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<T>` method, where `OrdersDetails` represents the CLR type containing order details. 
+
+```cs
+        private static IEdmModel GetEdmModel()
+        {
+            var builder = new ODataConventionModelBuilder();
+            builder.EntitySet<OrdersDetails>("Orders");  // Define OData Entity.
+            return builder.GetEdmModel();
+        }
+```
+
+**5. Register the OData Services**
+
+Once the Entity Data Model is built, you need to register the OData services in your ASP.NET MVC application. Here's how:
+
+```cs
+// WebApiConfig.cs
+using Microsoft.AspNet.OData.Builder;
+using Microsoft.AspNet.OData.Extensions;
+using Microsoft.OData.Edm;
+using ODataV4Adaptor.Models;
+using System;
+using System.Collections.Generic;
+using System.Linq;
+using System.Web;
+using System.Web.Http;
+using System.Web.UI.WebControls;
+
+namespace CustomAdaptor.App_Start
+{
+    public static class WebApiConfig
+    {
+        public static void Register(HttpConfiguration config)
+        {
+            // Enable OData.
+            config.MapODataServiceRoute(
+                routeName: "ODataRoute",
+                routePrefix: "odata",
+                model: GetEdmModel()
+            );
+            // Enable Query Support.
+            config.Count().Filter().OrderBy().Expand().Select().MaxTop(null);
+            // Web API routes.
+            config.Routes.MapHttpRoute(
+                name: "DefaultApi",
+                routeTemplate: "api/{controller}/{action}/{id}",
+                defaults: new { id = System.Web.Http.RouteParameter.Optional }
+            );
+            // Configure JSON formatting.
+            config.Formatters.JsonFormatter.SerializerSettings.Formatting = Newtonsoft.Json.Formatting.Indented;
+        }
+        private static IEdmModel GetEdmModel()
+        {
+            var builder = new ODataConventionModelBuilder();
+            builder.EntitySet<OrdersDetails>("Orders");  // Define OData Entity.
+            return builder.GetEdmModel();
+        }
+    }
+}
+```
+
+**5. Add Controllers**
+
+Create a controllers to expose the OData endpoints.
+
+{% tabs %}
+{% highlight cs tabtitle="OrdersController.cs" %}
+using System.Linq;
+using Microsoft.AspNet.OData;
+using System.Web.Http;
+using CustomAdaptor.Models;
+
+namespace CustomAdaptor.Controllers
+{
+    public class OrdersController : ODataController
+    {
+        /// <summary>
+        /// Retrieves all orders.
+        /// </summary>
+        /// <returns>The collection of orders.</returns>
+        [EnableQuery]
+        public IHttpActionResult Get()
+        {
+            var data = OrdersDetails.GetAllRecords().AsQueryable();
+            return Ok(data);
+        }
+    }
+}
+{% endhighlight %}
+{% endtabs %}
+
+**6. 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 ASP.NET MVC Grid to an Custom service extending the ODataV4 service
+
+To integrate the Syncfusion Grid into your ASP.NET MVC project using Visual Studio, follow these steps:
+
+**Step 1:** Install the Syncfusion ASP.NET MVC Package:
+
+To add `ASP.NET MVC` in the application, open the NuGet package manager in Visual Studio (Tools → NuGet Package Manager → Manage NuGet Packages for Solution), search for [Syncfusion.EJ2.MVC5](https://www.nuget.org/packages/Syncfusion.EJ2.MVC5) and install it.
+Alternatively, you can install it using the following Package Manager Console command:
+
+{% tabs %}
+{% highlight C# tabtitle="Package Manager" %}
+
+Install-Package Syncfusion.EJ2.MVC5 -Version {{ site.releaseversion }}
+
+{% endhighlight %}
+{% endtabs %}
+
+**Step 2:** Add Syncfusion ASP.NET MVC namespace
+
+Add `Syncfusion.EJ2` namespace reference in `Web.config` under `Views` folder.
+
+```cs
+<namespaces>
+    <add namespace="Syncfusion.EJ2"/>
+</namespaces>
+```
+
+**Step 3:** Add stylesheet and script resources
+
+To include the required styles and scripts, add the following references inside the `<head>` of `~/Pages/Shared/_Layout.cshtml` file:
+{% tabs %}
+{% highlight cshtml tabtitle="~/_Layout.cshtml" %}
+
+<head>
+    ...
+    <!-- Syncfusion ASP.NET MVC control styles -->
+    <link rel="stylesheet" href="https://cdn.syncfusion.com/ej2/{{ site.ej2version }}/bootstrap5.css" />
+    <!-- Syncfusion ASP.NET MVC control scripts -->
+    <script src="https://cdn.syncfusion.com/ej2/{{ site.ej2version }}/dist/ej2.min.js"></script>
+    <!-- Include the necessary CSS files to style the Syncfusion ASP.NET MVC controls: -->
+    <link href="https://cdn.syncfusion.com/ej2/{{ site.ej2version }}/ej2-base/styles/bootstrap5.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/{{ site.ej2version }}/ej2-grids/styles/bootstrap5.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/{{ site.ej2version }}/ej2-buttons/styles/bootstrap5.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/{{ site.ej2version }}/ej2-popups/styles/bootstrap5.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/{{ site.ej2version }}/ej2-richtexteditor/styles/bootstrap5.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/{{ site.ej2version }}/ej2-navigations/styles/bootstrap5.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/{{ site.ej2version }}/ej2-dropdowns/styles/bootstrap5.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/{{ site.ej2version }}/ej2-lists/styles/bootstrap5.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/{{ site.ej2version }}/ej2-inputs/styles/bootstrap5.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/{{ site.ej2version }}/ej2-calendars/styles/bootstrap5.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/{{ site.ej2version }}/ej2-notifications/styles/bootstrap5.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/{{ site.ej2version }}/ej2-splitbuttons/styles/bootstrap5.css" rel="stylesheet" />
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
+    <script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type="text/javascript"></script>
+</head>
+
+{% endhighlight %}
+{% endtabs %}
+
+**Step 4:** Register Syncfusion Script Manager
+
+To ensure proper script execution, register the Syncfusion Script Manager `EJS().ScriptManager()` at the end of `<body>` in the `~/Pages/Shared/_Layout.cshtml` file as follows.
+
+{% tabs %}
+{% highlight cshtml tabtitle="~/_Layout.cshtml" %}
+<body>
+...
+<!-- Syncfusion ASP.NET MVC Script Manager -->
+@Html.EJS().ScriptManager()
+</body>
+{% endhighlight %}
+{% endtabs %}
+
+**Step 4: Adding Custom Adaptor and Syncfusion Grid**
+
+To create a custom adaptor, extend the ODataV4Adaptor. This custom adaptor will implement three key methods:
+
+* The `processQuery` method is used to change the URL of your API endpoint and set the additional parameters for executing the query.
+
+* The `beforeSend` method is used to send the custom header for `Authorization` in the request header.
+
+* The `processResponse` method is used to set the value for customize the column for new field is `SNo`.
+
+**Implementing the Custom Adaptor**
+
+Define a `DataManager` instance, specifying the API endpoint (https://localhost:xxxx/odata/Orders) in the url property and setting the adaptor to `CustomAdaptor`.
+
+{% tabs %}
+{% highlight html tabtitle="Index.cshtml" %}
+@Html.EJS().Grid("Grid").Columns(col =>
+	{
+		col.Field("SNo").HeaderText("S. No").Width("100").Add();
+		col.Field("OrderID").HeaderText("Order ID").Width("150").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).IsPrimaryKey(true).Add();
+		col.Field("CustomerID").HeaderText("Customer ID").Width("150").Add();
+		col.Field("ShipCity").HeaderText("Ship City").Width("150").Add();
+		col.Field("ShipCountry").HeaderText("Ship Country").Width("150").Add();
+	}).Render()
+<script>
+    class CustomAdaptor extends ejs.data.ODataV4Adaptor {}
+    document.addEventListener("DOMContentLoaded", function () {
+        let grid = document.getElementById("Grid").ej2_instances[0];
+        if (grid) {
+            let dataManager = new ejs.data.DataManager({
+                url: "https://localhost:xxxx/odata/Orders",
+                adaptor: new CustomAdaptor()
+            });
+            grid.dataSource = dataManager;
+        }
+    });
+</script>
+{% 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**.
+
+## 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="WebApiConfig.cs" %}
+...
+// Enable OData.
+config.MapODataServiceRoute(
+    routeName: "ODataRoute",
+    routePrefix: "odata",
+    model: GetEdmModel()
+);
+// Enable Query Support.
+config.Count().Filter(); // Handles searching operation.
+...
+{% endhighlight %}
+{% highlight html tabtitle="Index.cshtml" %}
+@Html.EJS().Grid("Grid").Columns(col =>
+{
+    col.Field("OrderID").HeaderText("Order ID").Width("150").IsPrimaryKey(true).Add();
+    col.Field("CustomerID").HeaderText("Customer ID").Width("150").Add();
+    col.Field("EmployeeID").HeaderText("Employee ID").Width("150").Add();
+    col.Field("ShipCountry").HeaderText("Ship Country").Width("150").Add();
+}).Toolbar(new List<string>() { "Search" }).Render()
+<script>
+    class CustomAdaptor extends ejs.data.ODataV4Adaptor { }
+    document.addEventListener("DOMContentLoaded", function () {
+        let grid = document.getElementById("Grid").ej2_instances[0];
+        if (grid) {
+            let dataManager = new ejs.data.DataManager({
+                url: "/odata/Orders",
+                adaptor: new CustomAdaptor()
+            });
+            grid.dataSource = dataManager;
+        }
+    });
+</script>
+{% endhighlight %}
+{% endtabs %}
+
+![Searching query](../../images/adaptors/ODataV4Adaptor/odatav4-adaptor-searching.png)
+
+## 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="WebApiConfig.cs" %}
+...
+// Enable OData.
+config.MapODataServiceRoute(
+    routeName: "ODataRoute",
+    routePrefix: "odata",
+    model: GetEdmModel()
+);
+// Enable Query Support.
+config.Count().Filter(); // Handles filtering  operation.
+...
+{% endhighlight %}
+{% highlight html tabtitle="Index.cshtml" %}
path: ej2-asp-core-mvc/grid/EJ2_ASP.MVC/connecting-to-adaptors/custom-adaptor.md
user: login: farveensulthana
body: Provide space between the tags
created_at: 2025-03-09T09:36:15Z
author_association: CONTRIBUTOR
diff_hunk: @@ -0,0 +1,672 @@
+---
+layout: post
+title: Bind data & perform CRUD action with CustomAdaptor in Syncfusion Grid
+description: Learn here all about Bind data and perform CRUD action with CustomAdaptor in Syncfusion ##Platform_Name## Grid of Syncfusion Essential JS 2 and more.
+control: Custom Adaptor
+platform: ej2-asp-core-mvc
+documentation: ug
+domainurl: ##DomainURL##
+---
+
+# CustomAdaptor in Syncfusion ASP.NET MVC Grid Component
+
+The `CustomAdaptor` in the Syncfusion ASP.NET MVC Grid Component allows to create their own custom adaptors by extending the built-in adaptors. The custom adaptor involves handling the built-in adaptor query process, request and response. The `CustomAdaptor` to be allows extending the OData V4 services, enabling efficient data fetching and manipulation. By default, there are three method for CustomAdaptor built-in methods.
+
+## Types of CustomAdaptor methods
+
+There are three types of methods in custom adaptors.
+
+### ProcessQuery
+
+It handling or executing a query sent to a data source such as database or custom dataService. This query request for data retrieval, insertion, updating, or deletion. The processQuery can be two argument are `DataManager` and `Query`. The `DataManager` argument using change the url value and `Query` argument are set the additional parameters value or change the any queries such as sort, filter and group etc.
+
+**DataManager**
+
+![DataManager](../../images/adaptors/customadaptor/custom-adaptor-datamanager.png)
+
+**Query**
+
+![Query](../../images/adaptors/customadaptor/custom-adaptor-query.png)
+
+```js
+processQuery(dm, query) {
+    query.addParams('Syncfusion in ASP.NET MVC Grid', 'true'); // Add additional parameter
+    return super.processQuery.apply(this, arguments);
+}
+```
+
+### beforeSend
+
+It executed before an request is sent to the server. This function provides an modify the parameter and request headers, data or performing validation.The `beforeSend` can be three argument are `DataManager`, `Request` and `Fetch`. The `DataManager` argument are provided the dataSource and adaptor value. The `Request` argument are sending the custom header by setting the `Authorization`. The `Settings` argument is optional. 
+
+**DataManager**
+
+![DataManager](../../images/adaptors/customadaptor/custom-adaptor-datamanager.png)
+
+**Request**
+
+![Request](../../images/adaptors/customadaptor/custom-adaptor-request.png)
+
+**Settings**
+
+![Settings](../../images/adaptors/customadaptor/custom-adaptor-fetch.png)
+
+```js
+beforeSend(dm, request, settings) {
+request.headers.set('Authorization', `Bearer${(window as any).token}`);
+return super.beforeSend(dm, request, settings);
+}
+```
+
+### processResponse
+
+It is responsible for handling the response received from a server after the asynchronous request. It performs such as parsing the response data, handling error and preparing the data for consumption. The `processResponse` can be multiple arguments are optional.
+
+```js
+processResponse(data, ds, query, xhr, request, changes) {
+    const original = super.processResponse(data, ds, query, xhr, request, changes);
+    let i =0;
+    if (original.result){
+        original.result.forEach((item) => ej.base.setValue('SNo', ++i, item));
+    }
+return original;
+}
+```
+
+This guide provides detailed instructions on binding data and performing CRUD (Create, Read, Update, Delete) actions using the `CustomAdaptor` by extending the `ODataV4Adaptor` in your Syncfusion ASP.NET MVC Grid.
+ 
+## Creating an Custom service
+
+To configure a server with Syncfusion ASP.NET MVC Grid using OData, follow these steps:
+
+**1. Project Creation**
+
+1. Open **Visual Studio**.
+2. Select **Create a new project** → Choose **ASP.NET Web Application (.NET Framework)**.
+3. Name the project **ODataV4Adaptor** and select **MVC** as the project template.
+4. Ensure that the **Web API** option is selected (this is crucial for enabling OData).
+
+For detailed information, refer to this [documentation](https://learn.microsoft.com/en-us/aspnet/mvc/overview/getting-started/introduction/getting-started#create-your-first-app).
+
+**2. Install NuGet Packages**
+
+Using the NuGet package manager in Visual Studio (Tools → NuGet Package Manager → Manage NuGet Packages for Solution), install the `Microsoft.AspNet.OData` NuGet package for OData support and `Newtonsoft.Json` for JSON serialization support.
+
+**3. Model Class Creation:**
+
+Create a model class named `OrdersDetails.cs` inside the **Models** folder.
+
+{% tabs %}
+{% highlight cs tabtitle="OrdersDetails.cs" %}
+
+ namespace ODataV4Adaptor.Models
+{
+  public class OrdersDetails
+  {
+      public static List<OrdersDetails> order = new List<OrdersDetails>();
+      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<OrdersDetails> 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;
+      }
+      [Key]
+      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 %}
+
+**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<T>` method, where `OrdersDetails` represents the CLR type containing order details. 
+
+```cs
+        private static IEdmModel GetEdmModel()
+        {
+            var builder = new ODataConventionModelBuilder();
+            builder.EntitySet<OrdersDetails>("Orders");  // Define OData Entity.
+            return builder.GetEdmModel();
+        }
+```
+
+**5. Register the OData Services**
+
+Once the Entity Data Model is built, you need to register the OData services in your ASP.NET MVC application. Here's how:
+
+```cs
+// WebApiConfig.cs
+using Microsoft.AspNet.OData.Builder;
+using Microsoft.AspNet.OData.Extensions;
+using Microsoft.OData.Edm;
+using ODataV4Adaptor.Models;
+using System;
+using System.Collections.Generic;
+using System.Linq;
+using System.Web;
+using System.Web.Http;
+using System.Web.UI.WebControls;
+
+namespace CustomAdaptor.App_Start
+{
+    public static class WebApiConfig
+    {
+        public static void Register(HttpConfiguration config)
+        {
+            // Enable OData.
+            config.MapODataServiceRoute(
+                routeName: "ODataRoute",
+                routePrefix: "odata",
+                model: GetEdmModel()
+            );
+            // Enable Query Support.
+            config.Count().Filter().OrderBy().Expand().Select().MaxTop(null);
+            // Web API routes.
+            config.Routes.MapHttpRoute(
+                name: "DefaultApi",
+                routeTemplate: "api/{controller}/{action}/{id}",
+                defaults: new { id = System.Web.Http.RouteParameter.Optional }
+            );
+            // Configure JSON formatting.
+            config.Formatters.JsonFormatter.SerializerSettings.Formatting = Newtonsoft.Json.Formatting.Indented;
+        }
+        private static IEdmModel GetEdmModel()
+        {
+            var builder = new ODataConventionModelBuilder();
+            builder.EntitySet<OrdersDetails>("Orders");  // Define OData Entity.
+            return builder.GetEdmModel();
+        }
+    }
+}
+```
+
+**5. Add Controllers**
+
+Create a controllers to expose the OData endpoints.
+
+{% tabs %}
+{% highlight cs tabtitle="OrdersController.cs" %}
+using System.Linq;
+using Microsoft.AspNet.OData;
+using System.Web.Http;
+using CustomAdaptor.Models;
+
+namespace CustomAdaptor.Controllers
+{
+    public class OrdersController : ODataController
+    {
+        /// <summary>
+        /// Retrieves all orders.
+        /// </summary>
+        /// <returns>The collection of orders.</returns>
+        [EnableQuery]
+        public IHttpActionResult Get()
+        {
+            var data = OrdersDetails.GetAllRecords().AsQueryable();
+            return Ok(data);
+        }
+    }
+}
+{% endhighlight %}
+{% endtabs %}
+
+**6. 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 ASP.NET MVC Grid to an Custom service extending the ODataV4 service
+
+To integrate the Syncfusion Grid into your ASP.NET MVC project using Visual Studio, follow these steps:
+
+**Step 1:** Install the Syncfusion ASP.NET MVC Package:
+
+To add `ASP.NET MVC` in the application, open the NuGet package manager in Visual Studio (Tools → NuGet Package Manager → Manage NuGet Packages for Solution), search for [Syncfusion.EJ2.MVC5](https://www.nuget.org/packages/Syncfusion.EJ2.MVC5) and install it.
+Alternatively, you can install it using the following Package Manager Console command:
+
+{% tabs %}
+{% highlight C# tabtitle="Package Manager" %}
+
+Install-Package Syncfusion.EJ2.MVC5 -Version {{ site.releaseversion }}
+
+{% endhighlight %}
+{% endtabs %}
+
+**Step 2:** Add Syncfusion ASP.NET MVC namespace
+
+Add `Syncfusion.EJ2` namespace reference in `Web.config` under `Views` folder.
+
+```cs
+<namespaces>
+    <add namespace="Syncfusion.EJ2"/>
+</namespaces>
+```
+
+**Step 3:** Add stylesheet and script resources
+
+To include the required styles and scripts, add the following references inside the `<head>` of `~/Pages/Shared/_Layout.cshtml` file:
+{% tabs %}
+{% highlight cshtml tabtitle="~/_Layout.cshtml" %}
+
+<head>
+    ...
+    <!-- Syncfusion ASP.NET MVC control styles -->
+    <link rel="stylesheet" href="https://cdn.syncfusion.com/ej2/{{ site.ej2version }}/bootstrap5.css" />
+    <!-- Syncfusion ASP.NET MVC control scripts -->
+    <script src="https://cdn.syncfusion.com/ej2/{{ site.ej2version }}/dist/ej2.min.js"></script>
+    <!-- Include the necessary CSS files to style the Syncfusion ASP.NET MVC controls: -->
+    <link href="https://cdn.syncfusion.com/ej2/{{ site.ej2version }}/ej2-base/styles/bootstrap5.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/{{ site.ej2version }}/ej2-grids/styles/bootstrap5.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/{{ site.ej2version }}/ej2-buttons/styles/bootstrap5.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/{{ site.ej2version }}/ej2-popups/styles/bootstrap5.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/{{ site.ej2version }}/ej2-richtexteditor/styles/bootstrap5.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/{{ site.ej2version }}/ej2-navigations/styles/bootstrap5.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/{{ site.ej2version }}/ej2-dropdowns/styles/bootstrap5.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/{{ site.ej2version }}/ej2-lists/styles/bootstrap5.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/{{ site.ej2version }}/ej2-inputs/styles/bootstrap5.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/{{ site.ej2version }}/ej2-calendars/styles/bootstrap5.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/{{ site.ej2version }}/ej2-notifications/styles/bootstrap5.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/{{ site.ej2version }}/ej2-splitbuttons/styles/bootstrap5.css" rel="stylesheet" />
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
+    <script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type="text/javascript"></script>
+</head>
+
+{% endhighlight %}
+{% endtabs %}
+
+**Step 4:** Register Syncfusion Script Manager
+
+To ensure proper script execution, register the Syncfusion Script Manager `EJS().ScriptManager()` at the end of `<body>` in the `~/Pages/Shared/_Layout.cshtml` file as follows.
+
+{% tabs %}
+{% highlight cshtml tabtitle="~/_Layout.cshtml" %}
+<body>
+...
+<!-- Syncfusion ASP.NET MVC Script Manager -->
+@Html.EJS().ScriptManager()
+</body>
+{% endhighlight %}
+{% endtabs %}
+
+**Step 4: Adding Custom Adaptor and Syncfusion Grid**
+
+To create a custom adaptor, extend the ODataV4Adaptor. This custom adaptor will implement three key methods:
+
+* The `processQuery` method is used to change the URL of your API endpoint and set the additional parameters for executing the query.
+
+* The `beforeSend` method is used to send the custom header for `Authorization` in the request header.
+
+* The `processResponse` method is used to set the value for customize the column for new field is `SNo`.
+
+**Implementing the Custom Adaptor**
+
+Define a `DataManager` instance, specifying the API endpoint (https://localhost:xxxx/odata/Orders) in the url property and setting the adaptor to `CustomAdaptor`.
+
+{% tabs %}
+{% highlight html tabtitle="Index.cshtml" %}
+@Html.EJS().Grid("Grid").Columns(col =>
+	{
+		col.Field("SNo").HeaderText("S. No").Width("100").Add();
+		col.Field("OrderID").HeaderText("Order ID").Width("150").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).IsPrimaryKey(true).Add();
+		col.Field("CustomerID").HeaderText("Customer ID").Width("150").Add();
+		col.Field("ShipCity").HeaderText("Ship City").Width("150").Add();
+		col.Field("ShipCountry").HeaderText("Ship Country").Width("150").Add();
+	}).Render()
+<script>
+    class CustomAdaptor extends ejs.data.ODataV4Adaptor {}
+    document.addEventListener("DOMContentLoaded", function () {
+        let grid = document.getElementById("Grid").ej2_instances[0];
+        if (grid) {
+            let dataManager = new ejs.data.DataManager({
+                url: "https://localhost:xxxx/odata/Orders",
+                adaptor: new CustomAdaptor()
+            });
+            grid.dataSource = dataManager;
+        }
+    });
+</script>
+{% 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**.
+
+## 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="WebApiConfig.cs" %}
+...
+// Enable OData.
+config.MapODataServiceRoute(
+    routeName: "ODataRoute",
+    routePrefix: "odata",
+    model: GetEdmModel()
+);
+// Enable Query Support.
+config.Count().Filter(); // Handles searching operation.
+...
+{% endhighlight %}
+{% highlight html tabtitle="Index.cshtml" %}
path: ej2-asp-core-mvc/grid/EJ2_ASP.MVC/connecting-to-adaptors/custom-adaptor.md
user: login: farveensulthana
body: Provide space between the tags
created_at: 2025-03-09T09:36:49Z
author_association: CONTRIBUTOR
diff_hunk: @@ -0,0 +1,672 @@
+---
+layout: post
+title: Bind data & perform CRUD action with CustomAdaptor in Syncfusion Grid
+description: Learn here all about Bind data and perform CRUD action with CustomAdaptor in Syncfusion ##Platform_Name## Grid of Syncfusion Essential JS 2 and more.
+control: Custom Adaptor
+platform: ej2-asp-core-mvc
+documentation: ug
+domainurl: ##DomainURL##
+---
+
+# CustomAdaptor in Syncfusion ASP.NET MVC Grid Component
+
+The `CustomAdaptor` in the Syncfusion ASP.NET MVC Grid Component allows to create their own custom adaptors by extending the built-in adaptors. The custom adaptor involves handling the built-in adaptor query process, request and response. The `CustomAdaptor` to be allows extending the OData V4 services, enabling efficient data fetching and manipulation. By default, there are three method for CustomAdaptor built-in methods.
+
+## Types of CustomAdaptor methods
+
+There are three types of methods in custom adaptors.
+
+### ProcessQuery
+
+It handling or executing a query sent to a data source such as database or custom dataService. This query request for data retrieval, insertion, updating, or deletion. The processQuery can be two argument are `DataManager` and `Query`. The `DataManager` argument using change the url value and `Query` argument are set the additional parameters value or change the any queries such as sort, filter and group etc.
+
+**DataManager**
+
+![DataManager](../../images/adaptors/customadaptor/custom-adaptor-datamanager.png)
+
+**Query**
+
+![Query](../../images/adaptors/customadaptor/custom-adaptor-query.png)
+
+```js
+processQuery(dm, query) {
+    query.addParams('Syncfusion in ASP.NET MVC Grid', 'true'); // Add additional parameter
+    return super.processQuery.apply(this, arguments);
+}
+```
+
+### beforeSend
+
+It executed before an request is sent to the server. This function provides an modify the parameter and request headers, data or performing validation.The `beforeSend` can be three argument are `DataManager`, `Request` and `Fetch`. The `DataManager` argument are provided the dataSource and adaptor value. The `Request` argument are sending the custom header by setting the `Authorization`. The `Settings` argument is optional. 
+
+**DataManager**
+
+![DataManager](../../images/adaptors/customadaptor/custom-adaptor-datamanager.png)
+
+**Request**
+
+![Request](../../images/adaptors/customadaptor/custom-adaptor-request.png)
+
+**Settings**
+
+![Settings](../../images/adaptors/customadaptor/custom-adaptor-fetch.png)
+
+```js
+beforeSend(dm, request, settings) {
+request.headers.set('Authorization', `Bearer${(window as any).token}`);
+return super.beforeSend(dm, request, settings);
+}
+```
+
+### processResponse
+
+It is responsible for handling the response received from a server after the asynchronous request. It performs such as parsing the response data, handling error and preparing the data for consumption. The `processResponse` can be multiple arguments are optional.
+
+```js
+processResponse(data, ds, query, xhr, request, changes) {
+    const original = super.processResponse(data, ds, query, xhr, request, changes);
+    let i =0;
+    if (original.result){
+        original.result.forEach((item) => ej.base.setValue('SNo', ++i, item));
+    }
+return original;
+}
+```
+
+This guide provides detailed instructions on binding data and performing CRUD (Create, Read, Update, Delete) actions using the `CustomAdaptor` by extending the `ODataV4Adaptor` in your Syncfusion ASP.NET MVC Grid.
+ 
+## Creating an Custom service
+
+To configure a server with Syncfusion ASP.NET MVC Grid using OData, follow these steps:
+
+**1. Project Creation**
+
+1. Open **Visual Studio**.
+2. Select **Create a new project** → Choose **ASP.NET Web Application (.NET Framework)**.
+3. Name the project **ODataV4Adaptor** and select **MVC** as the project template.
+4. Ensure that the **Web API** option is selected (this is crucial for enabling OData).
+
+For detailed information, refer to this [documentation](https://learn.microsoft.com/en-us/aspnet/mvc/overview/getting-started/introduction/getting-started#create-your-first-app).
+
+**2. Install NuGet Packages**
+
+Using the NuGet package manager in Visual Studio (Tools → NuGet Package Manager → Manage NuGet Packages for Solution), install the `Microsoft.AspNet.OData` NuGet package for OData support and `Newtonsoft.Json` for JSON serialization support.
+
+**3. Model Class Creation:**
+
+Create a model class named `OrdersDetails.cs` inside the **Models** folder.
+
+{% tabs %}
+{% highlight cs tabtitle="OrdersDetails.cs" %}
+
+ namespace ODataV4Adaptor.Models
+{
+  public class OrdersDetails
+  {
+      public static List<OrdersDetails> order = new List<OrdersDetails>();
+      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<OrdersDetails> 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;
+      }
+      [Key]
+      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 %}
+
+**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<T>` method, where `OrdersDetails` represents the CLR type containing order details. 
+
+```cs
+        private static IEdmModel GetEdmModel()
+        {
+            var builder = new ODataConventionModelBuilder();
+            builder.EntitySet<OrdersDetails>("Orders");  // Define OData Entity.
+            return builder.GetEdmModel();
+        }
+```
+
+**5. Register the OData Services**
+
+Once the Entity Data Model is built, you need to register the OData services in your ASP.NET MVC application. Here's how:
+
+```cs
+// WebApiConfig.cs
+using Microsoft.AspNet.OData.Builder;
+using Microsoft.AspNet.OData.Extensions;
+using Microsoft.OData.Edm;
+using ODataV4Adaptor.Models;
+using System;
+using System.Collections.Generic;
+using System.Linq;
+using System.Web;
+using System.Web.Http;
+using System.Web.UI.WebControls;
+
+namespace CustomAdaptor.App_Start
+{
+    public static class WebApiConfig
+    {
+        public static void Register(HttpConfiguration config)
+        {
+            // Enable OData.
+            config.MapODataServiceRoute(
+                routeName: "ODataRoute",
+                routePrefix: "odata",
+                model: GetEdmModel()
+            );
+            // Enable Query Support.
+            config.Count().Filter().OrderBy().Expand().Select().MaxTop(null);
+            // Web API routes.
+            config.Routes.MapHttpRoute(
+                name: "DefaultApi",
+                routeTemplate: "api/{controller}/{action}/{id}",
+                defaults: new { id = System.Web.Http.RouteParameter.Optional }
+            );
+            // Configure JSON formatting.
+            config.Formatters.JsonFormatter.SerializerSettings.Formatting = Newtonsoft.Json.Formatting.Indented;
+        }
+        private static IEdmModel GetEdmModel()
+        {
+            var builder = new ODataConventionModelBuilder();
+            builder.EntitySet<OrdersDetails>("Orders");  // Define OData Entity.
+            return builder.GetEdmModel();
+        }
+    }
+}
+```
+
+**5. Add Controllers**
+
+Create a controllers to expose the OData endpoints.
+
+{% tabs %}
+{% highlight cs tabtitle="OrdersController.cs" %}
+using System.Linq;
+using Microsoft.AspNet.OData;
+using System.Web.Http;
+using CustomAdaptor.Models;
+
+namespace CustomAdaptor.Controllers
+{
+    public class OrdersController : ODataController
+    {
+        /// <summary>
+        /// Retrieves all orders.
+        /// </summary>
+        /// <returns>The collection of orders.</returns>
+        [EnableQuery]
+        public IHttpActionResult Get()
+        {
+            var data = OrdersDetails.GetAllRecords().AsQueryable();
+            return Ok(data);
+        }
+    }
+}
+{% endhighlight %}
+{% endtabs %}
+
+**6. 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 ASP.NET MVC Grid to an Custom service extending the ODataV4 service
+
+To integrate the Syncfusion Grid into your ASP.NET MVC project using Visual Studio, follow these steps:
+
+**Step 1:** Install the Syncfusion ASP.NET MVC Package:
+
+To add `ASP.NET MVC` in the application, open the NuGet package manager in Visual Studio (Tools → NuGet Package Manager → Manage NuGet Packages for Solution), search for [Syncfusion.EJ2.MVC5](https://www.nuget.org/packages/Syncfusion.EJ2.MVC5) and install it.
+Alternatively, you can install it using the following Package Manager Console command:
+
+{% tabs %}
+{% highlight C# tabtitle="Package Manager" %}
+
+Install-Package Syncfusion.EJ2.MVC5 -Version {{ site.releaseversion }}
+
+{% endhighlight %}
+{% endtabs %}
+
+**Step 2:** Add Syncfusion ASP.NET MVC namespace
+
+Add `Syncfusion.EJ2` namespace reference in `Web.config` under `Views` folder.
+
+```cs
+<namespaces>
+    <add namespace="Syncfusion.EJ2"/>
+</namespaces>
+```
+
+**Step 3:** Add stylesheet and script resources
+
+To include the required styles and scripts, add the following references inside the `<head>` of `~/Pages/Shared/_Layout.cshtml` file:
+{% tabs %}
+{% highlight cshtml tabtitle="~/_Layout.cshtml" %}
+
+<head>
+    ...
+    <!-- Syncfusion ASP.NET MVC control styles -->
+    <link rel="stylesheet" href="https://cdn.syncfusion.com/ej2/{{ site.ej2version }}/bootstrap5.css" />
+    <!-- Syncfusion ASP.NET MVC control scripts -->
+    <script src="https://cdn.syncfusion.com/ej2/{{ site.ej2version }}/dist/ej2.min.js"></script>
+    <!-- Include the necessary CSS files to style the Syncfusion ASP.NET MVC controls: -->
+    <link href="https://cdn.syncfusion.com/ej2/{{ site.ej2version }}/ej2-base/styles/bootstrap5.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/{{ site.ej2version }}/ej2-grids/styles/bootstrap5.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/{{ site.ej2version }}/ej2-buttons/styles/bootstrap5.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/{{ site.ej2version }}/ej2-popups/styles/bootstrap5.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/{{ site.ej2version }}/ej2-richtexteditor/styles/bootstrap5.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/{{ site.ej2version }}/ej2-navigations/styles/bootstrap5.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/{{ site.ej2version }}/ej2-dropdowns/styles/bootstrap5.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/{{ site.ej2version }}/ej2-lists/styles/bootstrap5.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/{{ site.ej2version }}/ej2-inputs/styles/bootstrap5.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/{{ site.ej2version }}/ej2-calendars/styles/bootstrap5.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/{{ site.ej2version }}/ej2-notifications/styles/bootstrap5.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/{{ site.ej2version }}/ej2-splitbuttons/styles/bootstrap5.css" rel="stylesheet" />
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
+    <script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type="text/javascript"></script>
+</head>
+
+{% endhighlight %}
+{% endtabs %}
+
+**Step 4:** Register Syncfusion Script Manager
+
+To ensure proper script execution, register the Syncfusion Script Manager `EJS().ScriptManager()` at the end of `<body>` in the `~/Pages/Shared/_Layout.cshtml` file as follows.
+
+{% tabs %}
+{% highlight cshtml tabtitle="~/_Layout.cshtml" %}
+<body>
+...
+<!-- Syncfusion ASP.NET MVC Script Manager -->
+@Html.EJS().ScriptManager()
+</body>
+{% endhighlight %}
+{% endtabs %}
+
+**Step 4: Adding Custom Adaptor and Syncfusion Grid**
+
+To create a custom adaptor, extend the ODataV4Adaptor. This custom adaptor will implement three key methods:
+
+* The `processQuery` method is used to change the URL of your API endpoint and set the additional parameters for executing the query.
+
+* The `beforeSend` method is used to send the custom header for `Authorization` in the request header.
+
+* The `processResponse` method is used to set the value for customize the column for new field is `SNo`.
+
+**Implementing the Custom Adaptor**
+
+Define a `DataManager` instance, specifying the API endpoint (https://localhost:xxxx/odata/Orders) in the url property and setting the adaptor to `CustomAdaptor`.
+
+{% tabs %}
+{% highlight html tabtitle="Index.cshtml" %}
+@Html.EJS().Grid("Grid").Columns(col =>
+	{
+		col.Field("SNo").HeaderText("S. No").Width("100").Add();
+		col.Field("OrderID").HeaderText("Order ID").Width("150").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).IsPrimaryKey(true).Add();
+		col.Field("CustomerID").HeaderText("Customer ID").Width("150").Add();
+		col.Field("ShipCity").HeaderText("Ship City").Width("150").Add();
+		col.Field("ShipCountry").HeaderText("Ship Country").Width("150").Add();
+	}).Render()
+<script>
+    class CustomAdaptor extends ejs.data.ODataV4Adaptor {}
+    document.addEventListener("DOMContentLoaded", function () {
+        let grid = document.getElementById("Grid").ej2_instances[0];
+        if (grid) {
+            let dataManager = new ejs.data.DataManager({
+                url: "https://localhost:xxxx/odata/Orders",
+                adaptor: new CustomAdaptor()
+            });
+            grid.dataSource = dataManager;
+        }
+    });
+</script>
+{% 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**.
+
+## 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="WebApiConfig.cs" %}
+...
+// Enable OData.
+config.MapODataServiceRoute(
+    routeName: "ODataRoute",
+    routePrefix: "odata",
+    model: GetEdmModel()
+);
+// Enable Query Support.
+config.Count().Filter(); // Handles searching operation.
+...
+{% endhighlight %}
+{% highlight html tabtitle="Index.cshtml" %}
+@Html.EJS().Grid("Grid").Columns(col =>
+{
+    col.Field("OrderID").HeaderText("Order ID").Width("150").IsPrimaryKey(true).Add();
+    col.Field("CustomerID").HeaderText("Customer ID").Width("150").Add();
+    col.Field("EmployeeID").HeaderText("Employee ID").Width("150").Add();
+    col.Field("ShipCountry").HeaderText("Ship Country").Width("150").Add();
+}).Toolbar(new List<string>() { "Search" }).Render()
+<script>
+    class CustomAdaptor extends ejs.data.ODataV4Adaptor { }
+    document.addEventListener("DOMContentLoaded", function () {
+        let grid = document.getElementById("Grid").ej2_instances[0];
+        if (grid) {
+            let dataManager = new ejs.data.DataManager({
+                url: "/odata/Orders",
+                adaptor: new CustomAdaptor()
+            });
+            grid.dataSource = dataManager;
+        }
+    });
+</script>
+{% endhighlight %}
+{% endtabs %}
+
+![Searching query](../../images/adaptors/ODataV4Adaptor/odatav4-adaptor-searching.png)
+
+## 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="WebApiConfig.cs" %}
+...
+// Enable OData.
+config.MapODataServiceRoute(
+    routeName: "ODataRoute",
+    routePrefix: "odata",
+    model: GetEdmModel()
+);
+// Enable Query Support.
+config.Count().Filter(); // Handles filtering  operation.
+...
+{% endhighlight %}
+{% highlight html tabtitle="Index.cshtml" %}
+@Html.EJS().Grid("Grid").Columns(col =>
+{
+    col.Field("OrderID").HeaderText("Order ID").Width("150").IsPrimaryKey(true).Add();
+    col.Field("CustomerID").HeaderText("Customer ID").Width("150").Add();
+    col.Field("EmployeeID").HeaderText("Employee ID").Width("150").Add();
+    col.Field("ShipCountry").HeaderText("Ship Country").Width("150").Add();
+}).AllowFiltering().Render()
+<script>
+    class CustomAdaptor extends ejs.data.ODataV4Adaptor { }
+    document.addEventListener("DOMContentLoaded", function () {
+        let grid = document.getElementById("Grid").ej2_instances[0];
+        if (grid) {
+            let dataManager = new ejs.data.DataManager({
+                url: "/odata/Orders",
+                adaptor: new CustomAdaptor()
+            });
+            grid.dataSource = dataManager;
+        }
+    });
+</script>
+{% endhighlight %}
+{% endtabs %}
+
+**Single column filtering**
+![Filtering query](../../images/adaptors/ODataV4Adaptor/odatav4-adaptor-filtering.png)
+**Multi column filtering**
+![Filtering query](../../images/adaptors/ODataV4Adaptor/odatav4-adaptor-multi-column-filtering.png)
+
+## 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="WebApiConfig.cs" %}
+...
+// Enable OData
+config.MapODataServiceRoute(
+    routeName: "ODataRoute",
+    routePrefix: "odata",
+    model: GetEdmModel()
+);
+// Enable Query Support
+config.Count().OrderBy(); // Handles sorting  operation.
+...
+{% endhighlight %}
+{% highlight html tabtitle="Index.cshtml" %}
+
+@Html.EJS().Grid("Grid").Columns(col =>
+{
+    col.Field("OrderID").HeaderText("Order ID").Width("150").IsPrimaryKey(true).Add();
+    col.Field("CustomerID").HeaderText("Customer ID").Width("150").Add();
+    col.Field("EmployeeID").HeaderText("Employee ID").Width("150").Add();
+    col.Field("ShipCountry").HeaderText("Ship Country").Width("150").Add();
+}).AllowSorting().Render()
+<script>
+    class CustomAdaptor extends ejs.data.ODataV4Adaptor { }
+    document.addEventListener("DOMContentLoaded", function () {
+        let grid = document.getElementById("Grid").ej2_instances[0];
+        if (grid) {
+            let dataManager = new ejs.data.DataManager({
+                url: "/odata/Orders",
+                adaptor: new CustomAdaptor()
+            });
+            grid.dataSource = dataManager;
+        }
+    });
+</script>
+{% endhighlight %}
+{% endtabs %}
+
+**Single column sorting**
+
+![Single column sorting query](../../images/adaptors/ODataV4Adaptor/odatav4-adaptor-sorting.png)
+
+**Multi column sorting**
+
+![Multi column sorting query](../../images/adaptors/ODataV4Adaptor/odatav4-adaptor-multi-column-sorting.png)
+
+## 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="WebApiConfig.cs" %}
+....
+// Enable OData
path: ej2-asp-core-mvc/grid/EJ2_ASP.MVC/connecting-to-adaptors/custom-adaptor.md
user: login: farveensulthana
body: Fullstop not present here at comment
created_at: 2025-03-09T09:38:26Z
author_association: CONTRIBUTOR
diff_hunk: @@ -0,0 +1,672 @@
+---
+layout: post
+title: Bind data & perform CRUD action with CustomAdaptor in Syncfusion Grid
+description: Learn here all about Bind data and perform CRUD action with CustomAdaptor in Syncfusion ##Platform_Name## Grid of Syncfusion Essential JS 2 and more.
+control: Custom Adaptor
+platform: ej2-asp-core-mvc
+documentation: ug
+domainurl: ##DomainURL##
+---
+
+# CustomAdaptor in Syncfusion ASP.NET MVC Grid Component
+
+The `CustomAdaptor` in the Syncfusion ASP.NET MVC Grid Component allows to create their own custom adaptors by extending the built-in adaptors. The custom adaptor involves handling the built-in adaptor query process, request and response. The `CustomAdaptor` to be allows extending the OData V4 services, enabling efficient data fetching and manipulation. By default, there are three method for CustomAdaptor built-in methods.
+
+## Types of CustomAdaptor methods
+
+There are three types of methods in custom adaptors.
+
+### ProcessQuery
+
+It handling or executing a query sent to a data source such as database or custom dataService. This query request for data retrieval, insertion, updating, or deletion. The processQuery can be two argument are `DataManager` and `Query`. The `DataManager` argument using change the url value and `Query` argument are set the additional parameters value or change the any queries such as sort, filter and group etc.
+
+**DataManager**
+
+![DataManager](../../images/adaptors/customadaptor/custom-adaptor-datamanager.png)
+
+**Query**
+
+![Query](../../images/adaptors/customadaptor/custom-adaptor-query.png)
+
+```js
+processQuery(dm, query) {
+    query.addParams('Syncfusion in ASP.NET MVC Grid', 'true'); // Add additional parameter
+    return super.processQuery.apply(this, arguments);
+}
+```
+
+### beforeSend
+
+It executed before an request is sent to the server. This function provides an modify the parameter and request headers, data or performing validation.The `beforeSend` can be three argument are `DataManager`, `Request` and `Fetch`. The `DataManager` argument are provided the dataSource and adaptor value. The `Request` argument are sending the custom header by setting the `Authorization`. The `Settings` argument is optional. 
+
+**DataManager**
+
+![DataManager](../../images/adaptors/customadaptor/custom-adaptor-datamanager.png)
+
+**Request**
+
+![Request](../../images/adaptors/customadaptor/custom-adaptor-request.png)
+
+**Settings**
+
+![Settings](../../images/adaptors/customadaptor/custom-adaptor-fetch.png)
+
+```js
+beforeSend(dm, request, settings) {
+request.headers.set('Authorization', `Bearer${(window as any).token}`);
+return super.beforeSend(dm, request, settings);
+}
+```
+
+### processResponse
+
+It is responsible for handling the response received from a server after the asynchronous request. It performs such as parsing the response data, handling error and preparing the data for consumption. The `processResponse` can be multiple arguments are optional.
+
+```js
+processResponse(data, ds, query, xhr, request, changes) {
+    const original = super.processResponse(data, ds, query, xhr, request, changes);
+    let i =0;
+    if (original.result){
+        original.result.forEach((item) => ej.base.setValue('SNo', ++i, item));
+    }
+return original;
+}
+```
+
+This guide provides detailed instructions on binding data and performing CRUD (Create, Read, Update, Delete) actions using the `CustomAdaptor` by extending the `ODataV4Adaptor` in your Syncfusion ASP.NET MVC Grid.
+ 
+## Creating an Custom service
+
+To configure a server with Syncfusion ASP.NET MVC Grid using OData, follow these steps:
+
+**1. Project Creation**
+
+1. Open **Visual Studio**.
+2. Select **Create a new project** → Choose **ASP.NET Web Application (.NET Framework)**.
+3. Name the project **ODataV4Adaptor** and select **MVC** as the project template.
+4. Ensure that the **Web API** option is selected (this is crucial for enabling OData).
+
+For detailed information, refer to this [documentation](https://learn.microsoft.com/en-us/aspnet/mvc/overview/getting-started/introduction/getting-started#create-your-first-app).
+
+**2. Install NuGet Packages**
+
+Using the NuGet package manager in Visual Studio (Tools → NuGet Package Manager → Manage NuGet Packages for Solution), install the `Microsoft.AspNet.OData` NuGet package for OData support and `Newtonsoft.Json` for JSON serialization support.
+
+**3. Model Class Creation:**
+
+Create a model class named `OrdersDetails.cs` inside the **Models** folder.
+
+{% tabs %}
+{% highlight cs tabtitle="OrdersDetails.cs" %}
+
+ namespace ODataV4Adaptor.Models
+{
+  public class OrdersDetails
+  {
+      public static List<OrdersDetails> order = new List<OrdersDetails>();
+      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<OrdersDetails> 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;
+      }
+      [Key]
+      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 %}
+
+**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<T>` method, where `OrdersDetails` represents the CLR type containing order details. 
+
+```cs
+        private static IEdmModel GetEdmModel()
+        {
+            var builder = new ODataConventionModelBuilder();
+            builder.EntitySet<OrdersDetails>("Orders");  // Define OData Entity.
+            return builder.GetEdmModel();
+        }
+```
+
+**5. Register the OData Services**
+
+Once the Entity Data Model is built, you need to register the OData services in your ASP.NET MVC application. Here's how:
+
+```cs
+// WebApiConfig.cs
+using Microsoft.AspNet.OData.Builder;
+using Microsoft.AspNet.OData.Extensions;
+using Microsoft.OData.Edm;
+using ODataV4Adaptor.Models;
+using System;
+using System.Collections.Generic;
+using System.Linq;
+using System.Web;
+using System.Web.Http;
+using System.Web.UI.WebControls;
+
+namespace CustomAdaptor.App_Start
+{
+    public static class WebApiConfig
+    {
+        public static void Register(HttpConfiguration config)
+        {
+            // Enable OData.
+            config.MapODataServiceRoute(
+                routeName: "ODataRoute",
+                routePrefix: "odata",
+                model: GetEdmModel()
+            );
+            // Enable Query Support.
+            config.Count().Filter().OrderBy().Expand().Select().MaxTop(null);
+            // Web API routes.
+            config.Routes.MapHttpRoute(
+                name: "DefaultApi",
+                routeTemplate: "api/{controller}/{action}/{id}",
+                defaults: new { id = System.Web.Http.RouteParameter.Optional }
+            );
+            // Configure JSON formatting.
+            config.Formatters.JsonFormatter.SerializerSettings.Formatting = Newtonsoft.Json.Formatting.Indented;
+        }
+        private static IEdmModel GetEdmModel()
+        {
+            var builder = new ODataConventionModelBuilder();
+            builder.EntitySet<OrdersDetails>("Orders");  // Define OData Entity.
+            return builder.GetEdmModel();
+        }
+    }
+}
+```
+
+**5. Add Controllers**
+
+Create a controllers to expose the OData endpoints.
+
+{% tabs %}
+{% highlight cs tabtitle="OrdersController.cs" %}
+using System.Linq;
+using Microsoft.AspNet.OData;
+using System.Web.Http;
+using CustomAdaptor.Models;
+
+namespace CustomAdaptor.Controllers
+{
+    public class OrdersController : ODataController
+    {
+        /// <summary>
+        /// Retrieves all orders.
+        /// </summary>
+        /// <returns>The collection of orders.</returns>
+        [EnableQuery]
+        public IHttpActionResult Get()
+        {
+            var data = OrdersDetails.GetAllRecords().AsQueryable();
+            return Ok(data);
+        }
+    }
+}
+{% endhighlight %}
+{% endtabs %}
+
+**6. 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 ASP.NET MVC Grid to an Custom service extending the ODataV4 service
+
+To integrate the Syncfusion Grid into your ASP.NET MVC project using Visual Studio, follow these steps:
+
+**Step 1:** Install the Syncfusion ASP.NET MVC Package:
+
+To add `ASP.NET MVC` in the application, open the NuGet package manager in Visual Studio (Tools → NuGet Package Manager → Manage NuGet Packages for Solution), search for [Syncfusion.EJ2.MVC5](https://www.nuget.org/packages/Syncfusion.EJ2.MVC5) and install it.
+Alternatively, you can install it using the following Package Manager Console command:
+
+{% tabs %}
+{% highlight C# tabtitle="Package Manager" %}
+
+Install-Package Syncfusion.EJ2.MVC5 -Version {{ site.releaseversion }}
+
+{% endhighlight %}
+{% endtabs %}
+
+**Step 2:** Add Syncfusion ASP.NET MVC namespace
+
+Add `Syncfusion.EJ2` namespace reference in `Web.config` under `Views` folder.
+
+```cs
+<namespaces>
+    <add namespace="Syncfusion.EJ2"/>
+</namespaces>
+```
+
+**Step 3:** Add stylesheet and script resources
+
+To include the required styles and scripts, add the following references inside the `<head>` of `~/Pages/Shared/_Layout.cshtml` file:
+{% tabs %}
+{% highlight cshtml tabtitle="~/_Layout.cshtml" %}
+
+<head>
+    ...
+    <!-- Syncfusion ASP.NET MVC control styles -->
+    <link rel="stylesheet" href="https://cdn.syncfusion.com/ej2/{{ site.ej2version }}/bootstrap5.css" />
+    <!-- Syncfusion ASP.NET MVC control scripts -->
+    <script src="https://cdn.syncfusion.com/ej2/{{ site.ej2version }}/dist/ej2.min.js"></script>
+    <!-- Include the necessary CSS files to style the Syncfusion ASP.NET MVC controls: -->
+    <link href="https://cdn.syncfusion.com/ej2/{{ site.ej2version }}/ej2-base/styles/bootstrap5.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/{{ site.ej2version }}/ej2-grids/styles/bootstrap5.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/{{ site.ej2version }}/ej2-buttons/styles/bootstrap5.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/{{ site.ej2version }}/ej2-popups/styles/bootstrap5.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/{{ site.ej2version }}/ej2-richtexteditor/styles/bootstrap5.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/{{ site.ej2version }}/ej2-navigations/styles/bootstrap5.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/{{ site.ej2version }}/ej2-dropdowns/styles/bootstrap5.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/{{ site.ej2version }}/ej2-lists/styles/bootstrap5.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/{{ site.ej2version }}/ej2-inputs/styles/bootstrap5.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/{{ site.ej2version }}/ej2-calendars/styles/bootstrap5.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/{{ site.ej2version }}/ej2-notifications/styles/bootstrap5.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/{{ site.ej2version }}/ej2-splitbuttons/styles/bootstrap5.css" rel="stylesheet" />
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
+    <script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type="text/javascript"></script>
+</head>
+
+{% endhighlight %}
+{% endtabs %}
+
+**Step 4:** Register Syncfusion Script Manager
+
+To ensure proper script execution, register the Syncfusion Script Manager `EJS().ScriptManager()` at the end of `<body>` in the `~/Pages/Shared/_Layout.cshtml` file as follows.
+
+{% tabs %}
+{% highlight cshtml tabtitle="~/_Layout.cshtml" %}
+<body>
+...
+<!-- Syncfusion ASP.NET MVC Script Manager -->
+@Html.EJS().ScriptManager()
+</body>
+{% endhighlight %}
+{% endtabs %}
+
+**Step 4: Adding Custom Adaptor and Syncfusion Grid**
+
+To create a custom adaptor, extend the ODataV4Adaptor. This custom adaptor will implement three key methods:
+
+* The `processQuery` method is used to change the URL of your API endpoint and set the additional parameters for executing the query.
+
+* The `beforeSend` method is used to send the custom header for `Authorization` in the request header.
+
+* The `processResponse` method is used to set the value for customize the column for new field is `SNo`.
+
+**Implementing the Custom Adaptor**
+
+Define a `DataManager` instance, specifying the API endpoint (https://localhost:xxxx/odata/Orders) in the url property and setting the adaptor to `CustomAdaptor`.
+
+{% tabs %}
+{% highlight html tabtitle="Index.cshtml" %}
+@Html.EJS().Grid("Grid").Columns(col =>
+	{
+		col.Field("SNo").HeaderText("S. No").Width("100").Add();
+		col.Field("OrderID").HeaderText("Order ID").Width("150").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).IsPrimaryKey(true).Add();
+		col.Field("CustomerID").HeaderText("Customer ID").Width("150").Add();
+		col.Field("ShipCity").HeaderText("Ship City").Width("150").Add();
+		col.Field("ShipCountry").HeaderText("Ship Country").Width("150").Add();
+	}).Render()
+<script>
+    class CustomAdaptor extends ejs.data.ODataV4Adaptor {}
+    document.addEventListener("DOMContentLoaded", function () {
+        let grid = document.getElementById("Grid").ej2_instances[0];
+        if (grid) {
+            let dataManager = new ejs.data.DataManager({
+                url: "https://localhost:xxxx/odata/Orders",
+                adaptor: new CustomAdaptor()
+            });
+            grid.dataSource = dataManager;
+        }
+    });
+</script>
+{% 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**.
+
+## 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="WebApiConfig.cs" %}
+...
+// Enable OData.
+config.MapODataServiceRoute(
+    routeName: "ODataRoute",
+    routePrefix: "odata",
+    model: GetEdmModel()
+);
+// Enable Query Support.
+config.Count().Filter(); // Handles searching operation.
+...
+{% endhighlight %}
+{% highlight html tabtitle="Index.cshtml" %}
+@Html.EJS().Grid("Grid").Columns(col =>
+{
+    col.Field("OrderID").HeaderText("Order ID").Width("150").IsPrimaryKey(true).Add();
+    col.Field("CustomerID").HeaderText("Customer ID").Width("150").Add();
+    col.Field("EmployeeID").HeaderText("Employee ID").Width("150").Add();
+    col.Field("ShipCountry").HeaderText("Ship Country").Width("150").Add();
+}).Toolbar(new List<string>() { "Search" }).Render()
+<script>
+    class CustomAdaptor extends ejs.data.ODataV4Adaptor { }
+    document.addEventListener("DOMContentLoaded", function () {
+        let grid = document.getElementById("Grid").ej2_instances[0];
+        if (grid) {
+            let dataManager = new ejs.data.DataManager({
+                url: "/odata/Orders",
+                adaptor: new CustomAdaptor()
+            });
+            grid.dataSource = dataManager;
+        }
+    });
+</script>
+{% endhighlight %}
+{% endtabs %}
+
+![Searching query](../../images/adaptors/ODataV4Adaptor/odatav4-adaptor-searching.png)
+
+## 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="WebApiConfig.cs" %}
+...
+// Enable OData.
+config.MapODataServiceRoute(
+    routeName: "ODataRoute",
+    routePrefix: "odata",
+    model: GetEdmModel()
+);
+// Enable Query Support.
+config.Count().Filter(); // Handles filtering  operation.
+...
+{% endhighlight %}
+{% highlight html tabtitle="Index.cshtml" %}
+@Html.EJS().Grid("Grid").Columns(col =>
+{
+    col.Field("OrderID").HeaderText("Order ID").Width("150").IsPrimaryKey(true).Add();
+    col.Field("CustomerID").HeaderText("Customer ID").Width("150").Add();
+    col.Field("EmployeeID").HeaderText("Employee ID").Width("150").Add();
+    col.Field("ShipCountry").HeaderText("Ship Country").Width("150").Add();
+}).AllowFiltering().Render()
+<script>
+    class CustomAdaptor extends ejs.data.ODataV4Adaptor { }
+    document.addEventListener("DOMContentLoaded", function () {
+        let grid = document.getElementById("Grid").ej2_instances[0];
+        if (grid) {
+            let dataManager = new ejs.data.DataManager({
+                url: "/odata/Orders",
+                adaptor: new CustomAdaptor()
+            });
+            grid.dataSource = dataManager;
+        }
+    });
+</script>
+{% endhighlight %}
+{% endtabs %}
+
+**Single column filtering**
+![Filtering query](../../images/adaptors/ODataV4Adaptor/odatav4-adaptor-filtering.png)
+**Multi column filtering**
+![Filtering query](../../images/adaptors/ODataV4Adaptor/odatav4-adaptor-multi-column-filtering.png)
+
+## 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="WebApiConfig.cs" %}
+...
+// Enable OData
+config.MapODataServiceRoute(
+    routeName: "ODataRoute",
+    routePrefix: "odata",
+    model: GetEdmModel()
+);
+// Enable Query Support
+config.Count().OrderBy(); // Handles sorting  operation.
+...
+{% endhighlight %}
+{% highlight html tabtitle="Index.cshtml" %}
+
+@Html.EJS().Grid("Grid").Columns(col =>
+{
+    col.Field("OrderID").HeaderText("Order ID").Width("150").IsPrimaryKey(true).Add();
+    col.Field("CustomerID").HeaderText("Customer ID").Width("150").Add();
+    col.Field("EmployeeID").HeaderText("Employee ID").Width("150").Add();
+    col.Field("ShipCountry").HeaderText("Ship Country").Width("150").Add();
+}).AllowSorting().Render()
+<script>
+    class CustomAdaptor extends ejs.data.ODataV4Adaptor { }
+    document.addEventListener("DOMContentLoaded", function () {
+        let grid = document.getElementById("Grid").ej2_instances[0];
+        if (grid) {
+            let dataManager = new ejs.data.DataManager({
+                url: "/odata/Orders",
+                adaptor: new CustomAdaptor()
+            });
+            grid.dataSource = dataManager;
+        }
+    });
+</script>
+{% endhighlight %}
+{% endtabs %}
+
+**Single column sorting**
+
+![Single column sorting query](../../images/adaptors/ODataV4Adaptor/odatav4-adaptor-sorting.png)
+
+**Multi column sorting**
+
+![Multi column sorting query](../../images/adaptors/ODataV4Adaptor/odatav4-adaptor-multi-column-sorting.png)
+
+## 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="WebApiConfig.cs" %}
+....
+// Enable OData
+config.MapODataServiceRoute(
+    routeName: "ODataRoute",
+    routePrefix: "odata",
+    model: GetEdmModel()
+);
+// Enable Query Support
+config.Count().MaxTop(null); // Handles paging  operation.
+....
+{% endhighlight %}
+{% highlight html tabtitle="Index.cshtml" %}
+
+@Html.EJS().Grid("Grid").Columns(col =>
+{
+    col.Field("OrderID").HeaderText("Order ID").Width("150").IsPrimaryKey(true).Add();
+    col.Field("CustomerID").HeaderText("Customer ID").Width("150").Add();
+    col.Field("EmployeeID").HeaderText("Employee ID").Width("150").Add();
+    col.Field("ShipCountry").HeaderText("Ship Country").Width("150").Add();
+}).AllowPaging().Render()
+<script>
+    class CustomAdaptor extends ejs.data.ODataV4Adaptor { }
+    document.addEventListener("DOMContentLoaded", function () {
+        let grid = document.getElementById("Grid").ej2_instances[0];
+        if (grid) {
+            let dataManager = new ejs.data.DataManager({
+                url: "/odata/Orders",
+                adaptor: new CustomAdaptor()
+            });
+            grid.dataSource = dataManager;
+        }
+    });
+</script>
+{% endhighlight %}
+{% endtabs %}
+
+![paging query](../../images/adaptors/ODataV4Adaptor/odatav4-adaptor-paging.png)
+
+## 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/aspnetmvc/documentation/grid/editing/edit) and utilize the sample implementation of the `OrdersController` in your MVC application. This controller handles HTTP requests for CRUD operations such as GET, POST, PATCH, and DELETE.
+
+To enable CRUD operations in the Syncfusion Grid within an ASP.NET MVC application, follow the below steps:
+
+{% tabs %}
+{% highlight html tabtitle="Index.cshtml" %}
+@using Syncfusion.EJ2
+
+@Html.EJS().Grid("Grid").EditSettings(edit => edit.AllowAdding(true).AllowEditing(true).AllowDeleting(true).Mode(Syncfusion.EJ2.Grids.EditMode.Normal)).Toolbar(new List<string>
path: ej2-asp-core-mvc/grid/EJ2_ASP.MVC/connecting-to-adaptors/custom-adaptor.md
user: login: farveensulthana
body: Alignment for Grid definition is not proper
created_at: 2025-03-09T09:40:56Z
author_association: CONTRIBUTOR
diff_hunk: @@ -0,0 +1,672 @@
+---
+layout: post
+title: Bind data & perform CRUD action with CustomAdaptor in Syncfusion Grid
+description: Learn here all about Bind data and perform CRUD action with CustomAdaptor in Syncfusion ##Platform_Name## Grid of Syncfusion Essential JS 2 and more.
+control: Custom Adaptor
+platform: ej2-asp-core-mvc
+documentation: ug
+domainurl: ##DomainURL##
+---
+
+# CustomAdaptor in Syncfusion ASP.NET MVC Grid Component
+
+The `CustomAdaptor` in the Syncfusion ASP.NET MVC Grid Component allows to create their own custom adaptors by extending the built-in adaptors. The custom adaptor involves handling the built-in adaptor query process, request and response. The `CustomAdaptor` to be allows extending the OData V4 services, enabling efficient data fetching and manipulation. By default, there are three method for CustomAdaptor built-in methods.
+
+## Types of CustomAdaptor methods
+
+There are three types of methods in custom adaptors.
+
+### ProcessQuery
+
+It handling or executing a query sent to a data source such as database or custom dataService. This query request for data retrieval, insertion, updating, or deletion. The processQuery can be two argument are `DataManager` and `Query`. The `DataManager` argument using change the url value and `Query` argument are set the additional parameters value or change the any queries such as sort, filter and group etc.
+
+**DataManager**
+
+![DataManager](../../images/adaptors/customadaptor/custom-adaptor-datamanager.png)
+
+**Query**
+
+![Query](../../images/adaptors/customadaptor/custom-adaptor-query.png)
+
+```js
+processQuery(dm, query) {
+    query.addParams('Syncfusion in ASP.NET MVC Grid', 'true'); // Add additional parameter
+    return super.processQuery.apply(this, arguments);
+}
+```
+
+### beforeSend
+
+It executed before an request is sent to the server. This function provides an modify the parameter and request headers, data or performing validation.The `beforeSend` can be three argument are `DataManager`, `Request` and `Fetch`. The `DataManager` argument are provided the dataSource and adaptor value. The `Request` argument are sending the custom header by setting the `Authorization`. The `Settings` argument is optional. 
+
+**DataManager**
+
+![DataManager](../../images/adaptors/customadaptor/custom-adaptor-datamanager.png)
+
+**Request**
+
+![Request](../../images/adaptors/customadaptor/custom-adaptor-request.png)
+
+**Settings**
+
+![Settings](../../images/adaptors/customadaptor/custom-adaptor-fetch.png)
+
+```js
+beforeSend(dm, request, settings) {
+request.headers.set('Authorization', `Bearer${(window as any).token}`);
+return super.beforeSend(dm, request, settings);
+}
+```
+
+### processResponse
+
+It is responsible for handling the response received from a server after the asynchronous request. It performs such as parsing the response data, handling error and preparing the data for consumption. The `processResponse` can be multiple arguments are optional.
+
+```js
+processResponse(data, ds, query, xhr, request, changes) {
+    const original = super.processResponse(data, ds, query, xhr, request, changes);
+    let i =0;
+    if (original.result){
+        original.result.forEach((item) => ej.base.setValue('SNo', ++i, item));
+    }
+return original;
+}
+```
+
+This guide provides detailed instructions on binding data and performing CRUD (Create, Read, Update, Delete) actions using the `CustomAdaptor` by extending the `ODataV4Adaptor` in your Syncfusion ASP.NET MVC Grid.
+ 
+## Creating an Custom service
+
+To configure a server with Syncfusion ASP.NET MVC Grid using OData, follow these steps:
+
+**1. Project Creation**
+
+1. Open **Visual Studio**.
+2. Select **Create a new project** → Choose **ASP.NET Web Application (.NET Framework)**.
+3. Name the project **ODataV4Adaptor** and select **MVC** as the project template.
+4. Ensure that the **Web API** option is selected (this is crucial for enabling OData).
+
+For detailed information, refer to this [documentation](https://learn.microsoft.com/en-us/aspnet/mvc/overview/getting-started/introduction/getting-started#create-your-first-app).
+
+**2. Install NuGet Packages**
+
+Using the NuGet package manager in Visual Studio (Tools → NuGet Package Manager → Manage NuGet Packages for Solution), install the `Microsoft.AspNet.OData` NuGet package for OData support and `Newtonsoft.Json` for JSON serialization support.
+
+**3. Model Class Creation:**
+
+Create a model class named `OrdersDetails.cs` inside the **Models** folder.
+
+{% tabs %}
+{% highlight cs tabtitle="OrdersDetails.cs" %}
+
+ namespace ODataV4Adaptor.Models
+{
+  public class OrdersDetails
+  {
+      public static List<OrdersDetails> order = new List<OrdersDetails>();
+      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<OrdersDetails> 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;
+      }
+      [Key]
+      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 %}
+
+**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<T>` method, where `OrdersDetails` represents the CLR type containing order details. 
+
+```cs
+        private static IEdmModel GetEdmModel()
+        {
+            var builder = new ODataConventionModelBuilder();
+            builder.EntitySet<OrdersDetails>("Orders");  // Define OData Entity.
+            return builder.GetEdmModel();
+        }
+```
+
+**5. Register the OData Services**
+
+Once the Entity Data Model is built, you need to register the OData services in your ASP.NET MVC application. Here's how:
+
+```cs
+// WebApiConfig.cs
+using Microsoft.AspNet.OData.Builder;
+using Microsoft.AspNet.OData.Extensions;
+using Microsoft.OData.Edm;
+using ODataV4Adaptor.Models;
+using System;
+using System.Collections.Generic;
+using System.Linq;
+using System.Web;
+using System.Web.Http;
+using System.Web.UI.WebControls;
+
+namespace CustomAdaptor.App_Start
+{
+    public static class WebApiConfig
+    {
+        public static void Register(HttpConfiguration config)
+        {
+            // Enable OData.
+            config.MapODataServiceRoute(
+                routeName: "ODataRoute",
+                routePrefix: "odata",
+                model: GetEdmModel()
+            );
+            // Enable Query Support.
+            config.Count().Filter().OrderBy().Expand().Select().MaxTop(null);
+            // Web API routes.
+            config.Routes.MapHttpRoute(
+                name: "DefaultApi",
+                routeTemplate: "api/{controller}/{action}/{id}",
+                defaults: new { id = System.Web.Http.RouteParameter.Optional }
+            );
+            // Configure JSON formatting.
+            config.Formatters.JsonFormatter.SerializerSettings.Formatting = Newtonsoft.Json.Formatting.Indented;
+        }
+        private static IEdmModel GetEdmModel()
+        {
+            var builder = new ODataConventionModelBuilder();
+            builder.EntitySet<OrdersDetails>("Orders");  // Define OData Entity.
+            return builder.GetEdmModel();
+        }
+    }
+}
+```
+
+**5. Add Controllers**
+
+Create a controllers to expose the OData endpoints.
+
+{% tabs %}
+{% highlight cs tabtitle="OrdersController.cs" %}
+using System.Linq;
+using Microsoft.AspNet.OData;
+using System.Web.Http;
+using CustomAdaptor.Models;
+
+namespace CustomAdaptor.Controllers
+{
+    public class OrdersController : ODataController
+    {
+        /// <summary>
+        /// Retrieves all orders.
+        /// </summary>
+        /// <returns>The collection of orders.</returns>
+        [EnableQuery]
+        public IHttpActionResult Get()
+        {
+            var data = OrdersDetails.GetAllRecords().AsQueryable();
+            return Ok(data);
+        }
+    }
+}
+{% endhighlight %}
+{% endtabs %}
+
+**6. 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 ASP.NET MVC Grid to an Custom service extending the ODataV4 service
+
+To integrate the Syncfusion Grid into your ASP.NET MVC project using Visual Studio, follow these steps:
+
+**Step 1:** Install the Syncfusion ASP.NET MVC Package:
+
+To add `ASP.NET MVC` in the application, open the NuGet package manager in Visual Studio (Tools → NuGet Package Manager → Manage NuGet Packages for Solution), search for [Syncfusion.EJ2.MVC5](https://www.nuget.org/packages/Syncfusion.EJ2.MVC5) and install it.
+Alternatively, you can install it using the following Package Manager Console command:
+
+{% tabs %}
+{% highlight C# tabtitle="Package Manager" %}
+
+Install-Package Syncfusion.EJ2.MVC5 -Version {{ site.releaseversion }}
+
+{% endhighlight %}
+{% endtabs %}
+
+**Step 2:** Add Syncfusion ASP.NET MVC namespace
+
+Add `Syncfusion.EJ2` namespace reference in `Web.config` under `Views` folder.
+
+```cs
+<namespaces>
+    <add namespace="Syncfusion.EJ2"/>
+</namespaces>
+```
+
+**Step 3:** Add stylesheet and script resources
+
+To include the required styles and scripts, add the following references inside the `<head>` of `~/Pages/Shared/_Layout.cshtml` file:
+{% tabs %}
+{% highlight cshtml tabtitle="~/_Layout.cshtml" %}
+
+<head>
+    ...
+    <!-- Syncfusion ASP.NET MVC control styles -->
+    <link rel="stylesheet" href="https://cdn.syncfusion.com/ej2/{{ site.ej2version }}/bootstrap5.css" />
+    <!-- Syncfusion ASP.NET MVC control scripts -->
+    <script src="https://cdn.syncfusion.com/ej2/{{ site.ej2version }}/dist/ej2.min.js"></script>
+    <!-- Include the necessary CSS files to style the Syncfusion ASP.NET MVC controls: -->
+    <link href="https://cdn.syncfusion.com/ej2/{{ site.ej2version }}/ej2-base/styles/bootstrap5.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/{{ site.ej2version }}/ej2-grids/styles/bootstrap5.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/{{ site.ej2version }}/ej2-buttons/styles/bootstrap5.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/{{ site.ej2version }}/ej2-popups/styles/bootstrap5.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/{{ site.ej2version }}/ej2-richtexteditor/styles/bootstrap5.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/{{ site.ej2version }}/ej2-navigations/styles/bootstrap5.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/{{ site.ej2version }}/ej2-dropdowns/styles/bootstrap5.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/{{ site.ej2version }}/ej2-lists/styles/bootstrap5.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/{{ site.ej2version }}/ej2-inputs/styles/bootstrap5.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/{{ site.ej2version }}/ej2-calendars/styles/bootstrap5.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/{{ site.ej2version }}/ej2-notifications/styles/bootstrap5.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/{{ site.ej2version }}/ej2-splitbuttons/styles/bootstrap5.css" rel="stylesheet" />
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
+    <script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type="text/javascript"></script>
+</head>
+
+{% endhighlight %}
+{% endtabs %}
+
+**Step 4:** Register Syncfusion Script Manager
+
+To ensure proper script execution, register the Syncfusion Script Manager `EJS().ScriptManager()` at the end of `<body>` in the `~/Pages/Shared/_Layout.cshtml` file as follows.
+
+{% tabs %}
+{% highlight cshtml tabtitle="~/_Layout.cshtml" %}
+<body>
+...
+<!-- Syncfusion ASP.NET MVC Script Manager -->
+@Html.EJS().ScriptManager()
+</body>
+{% endhighlight %}
+{% endtabs %}
+
+**Step 4: Adding Custom Adaptor and Syncfusion Grid**
+
+To create a custom adaptor, extend the ODataV4Adaptor. This custom adaptor will implement three key methods:
+
+* The `processQuery` method is used to change the URL of your API endpoint and set the additional parameters for executing the query.
+
+* The `beforeSend` method is used to send the custom header for `Authorization` in the request header.
+
+* The `processResponse` method is used to set the value for customize the column for new field is `SNo`.
+
+**Implementing the Custom Adaptor**
+
+Define a `DataManager` instance, specifying the API endpoint (https://localhost:xxxx/odata/Orders) in the url property and setting the adaptor to `CustomAdaptor`.
+
+{% tabs %}
+{% highlight html tabtitle="Index.cshtml" %}
+@Html.EJS().Grid("Grid").Columns(col =>
+	{
+		col.Field("SNo").HeaderText("S. No").Width("100").Add();
+		col.Field("OrderID").HeaderText("Order ID").Width("150").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).IsPrimaryKey(true).Add();
+		col.Field("CustomerID").HeaderText("Customer ID").Width("150").Add();
+		col.Field("ShipCity").HeaderText("Ship City").Width("150").Add();
+		col.Field("ShipCountry").HeaderText("Ship Country").Width("150").Add();
+	}).Render()
+<script>
+    class CustomAdaptor extends ejs.data.ODataV4Adaptor {}
+    document.addEventListener("DOMContentLoaded", function () {
+        let grid = document.getElementById("Grid").ej2_instances[0];
+        if (grid) {
+            let dataManager = new ejs.data.DataManager({
+                url: "https://localhost:xxxx/odata/Orders",
+                adaptor: new CustomAdaptor()
+            });
+            grid.dataSource = dataManager;
+        }
+    });
+</script>
+{% 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**.
+
+## 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="WebApiConfig.cs" %}
+...
+// Enable OData.
+config.MapODataServiceRoute(
+    routeName: "ODataRoute",
+    routePrefix: "odata",
+    model: GetEdmModel()
+);
+// Enable Query Support.
+config.Count().Filter(); // Handles searching operation.
+...
+{% endhighlight %}
+{% highlight html tabtitle="Index.cshtml" %}
+@Html.EJS().Grid("Grid").Columns(col =>
+{
+    col.Field("OrderID").HeaderText("Order ID").Width("150").IsPrimaryKey(true).Add();
+    col.Field("CustomerID").HeaderText("Customer ID").Width("150").Add();
+    col.Field("EmployeeID").HeaderText("Employee ID").Width("150").Add();
+    col.Field("ShipCountry").HeaderText("Ship Country").Width("150").Add();
+}).Toolbar(new List<string>() { "Search" }).Render()
+<script>
+    class CustomAdaptor extends ejs.data.ODataV4Adaptor { }
+    document.addEventListener("DOMContentLoaded", function () {
+        let grid = document.getElementById("Grid").ej2_instances[0];
+        if (grid) {
+            let dataManager = new ejs.data.DataManager({
+                url: "/odata/Orders",
+                adaptor: new CustomAdaptor()
+            });
+            grid.dataSource = dataManager;
+        }
+    });
+</script>
+{% endhighlight %}
+{% endtabs %}
+
+![Searching query](../../images/adaptors/ODataV4Adaptor/odatav4-adaptor-searching.png)
+
+## 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="WebApiConfig.cs" %}
+...
+// Enable OData.
+config.MapODataServiceRoute(
+    routeName: "ODataRoute",
+    routePrefix: "odata",
+    model: GetEdmModel()
+);
+// Enable Query Support.
+config.Count().Filter(); // Handles filtering  operation.
+...
+{% endhighlight %}
+{% highlight html tabtitle="Index.cshtml" %}
+@Html.EJS().Grid("Grid").Columns(col =>
+{
+    col.Field("OrderID").HeaderText("Order ID").Width("150").IsPrimaryKey(true).Add();
+    col.Field("CustomerID").HeaderText("Customer ID").Width("150").Add();
+    col.Field("EmployeeID").HeaderText("Employee ID").Width("150").Add();
+    col.Field("ShipCountry").HeaderText("Ship Country").Width("150").Add();
+}).AllowFiltering().Render()
+<script>
+    class CustomAdaptor extends ejs.data.ODataV4Adaptor { }
+    document.addEventListener("DOMContentLoaded", function () {
+        let grid = document.getElementById("Grid").ej2_instances[0];
+        if (grid) {
+            let dataManager = new ejs.data.DataManager({
+                url: "/odata/Orders",
+                adaptor: new CustomAdaptor()
+            });
+            grid.dataSource = dataManager;
+        }
+    });
+</script>
+{% endhighlight %}
+{% endtabs %}
+
+**Single column filtering**
+![Filtering query](../../images/adaptors/ODataV4Adaptor/odatav4-adaptor-filtering.png)
+**Multi column filtering**
+![Filtering query](../../images/adaptors/ODataV4Adaptor/odatav4-adaptor-multi-column-filtering.png)
+
+## 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="WebApiConfig.cs" %}
+...
+// Enable OData
+config.MapODataServiceRoute(
+    routeName: "ODataRoute",
+    routePrefix: "odata",
+    model: GetEdmModel()
+);
+// Enable Query Support
+config.Count().OrderBy(); // Handles sorting  operation.
+...
+{% endhighlight %}
+{% highlight html tabtitle="Index.cshtml" %}
+
+@Html.EJS().Grid("Grid").Columns(col =>
+{
+    col.Field("OrderID").HeaderText("Order ID").Width("150").IsPrimaryKey(true).Add();
+    col.Field("CustomerID").HeaderText("Customer ID").Width("150").Add();
+    col.Field("EmployeeID").HeaderText("Employee ID").Width("150").Add();
+    col.Field("ShipCountry").HeaderText("Ship Country").Width("150").Add();
+}).AllowSorting().Render()
+<script>
+    class CustomAdaptor extends ejs.data.ODataV4Adaptor { }
+    document.addEventListener("DOMContentLoaded", function () {
+        let grid = document.getElementById("Grid").ej2_instances[0];
+        if (grid) {
+            let dataManager = new ejs.data.DataManager({
+                url: "/odata/Orders",
+                adaptor: new CustomAdaptor()
+            });
+            grid.dataSource = dataManager;
+        }
+    });
+</script>
+{% endhighlight %}
+{% endtabs %}
+
+**Single column sorting**
+
+![Single column sorting query](../../images/adaptors/ODataV4Adaptor/odatav4-adaptor-sorting.png)
+
+**Multi column sorting**
+
+![Multi column sorting query](../../images/adaptors/ODataV4Adaptor/odatav4-adaptor-multi-column-sorting.png)
+
+## 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="WebApiConfig.cs" %}
+....
+// Enable OData
+config.MapODataServiceRoute(
+    routeName: "ODataRoute",
+    routePrefix: "odata",
+    model: GetEdmModel()
+);
+// Enable Query Support
+config.Count().MaxTop(null); // Handles paging  operation.
+....
+{% endhighlight %}
+{% highlight html tabtitle="Index.cshtml" %}
+
+@Html.EJS().Grid("Grid").Columns(col =>
+{
+    col.Field("OrderID").HeaderText("Order ID").Width("150").IsPrimaryKey(true).Add();
+    col.Field("CustomerID").HeaderText("Customer ID").Width("150").Add();
+    col.Field("EmployeeID").HeaderText("Employee ID").Width("150").Add();
+    col.Field("ShipCountry").HeaderText("Ship Country").Width("150").Add();
+}).AllowPaging().Render()
+<script>
+    class CustomAdaptor extends ejs.data.ODataV4Adaptor { }
+    document.addEventListener("DOMContentLoaded", function () {
+        let grid = document.getElementById("Grid").ej2_instances[0];
+        if (grid) {
+            let dataManager = new ejs.data.DataManager({
+                url: "/odata/Orders",
+                adaptor: new CustomAdaptor()
+            });
+            grid.dataSource = dataManager;
+        }
+    });
+</script>
+{% endhighlight %}
+{% endtabs %}
+
+![paging query](../../images/adaptors/ODataV4Adaptor/odatav4-adaptor-paging.png)
+
+## 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/aspnetmvc/documentation/grid/editing/edit) and utilize the sample implementation of the `OrdersController` in your MVC application. This controller handles HTTP requests for CRUD operations such as GET, POST, PATCH, and DELETE.
+
+To enable CRUD operations in the Syncfusion Grid within an ASP.NET MVC application, follow the below steps:
+
+{% tabs %}
+{% highlight html tabtitle="Index.cshtml" %}
+@using Syncfusion.EJ2
+
+@Html.EJS().Grid("Grid").EditSettings(edit => edit.AllowAdding(true).AllowEditing(true).AllowDeleting(true).Mode(Syncfusion.EJ2.Grids.EditMode.Normal)).Toolbar(new List<string>
+	() { "Add", "Edit", "Delete", "Update", "Cancel" }).Columns(col =>
+	{
+		col.Field("OrderID").HeaderText("Order ID").Width("150").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).IsPrimaryKey(true).Add();
+		col.Field("CustomerID").HeaderText("Customer ID").Width("150").Add();
+		col.Field("ShipCity").HeaderText("Ship City").Width("150").Add();
+		col.Field("ShipCountry").HeaderText("Ship Country").Width("150").Add();
+	}).Render()
+	<script>
+		class CustomAdaptor extends ejs.data.ODataV4Adaptor { }
+		document.addEventListener("DOMContentLoaded", function () {
+			let grid = document.getElementById("Grid").ej2_instances[0];
+			if (grid) {
+				let dataManager = new ejs.data.DataManager({
+					url: "/odata/Orders",
+					adaptor: new CustomAdaptor()
+				});
+				grid.dataSource = dataManager;
+			}
+		});
+	</script>
+{% endhighlight %}
+{% endtabs %}
+
+> Normal/Inline editing is the default edit mode for the Grid component. To enable CRUD operations, ensure that the [isPrimaryKey](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Grids.GridColumn.html#Syncfusion_EJ2_Grids_GridColumn_IsPrimaryKey)property is set to **true** for a specific Grid column, ensuring that its value is unique.
path: ej2-asp-core-mvc/grid/EJ2_ASP.MVC/connecting-to-adaptors/custom-adaptor.md
user: login: farveensulthana
body: IsPrimaryKey property value not properly defined
created_at: 2025-03-09T09:42:26Z
author_association: CONTRIBUTOR
diff_hunk: @@ -0,0 +1,672 @@
+---
+layout: post
+title: Bind data & perform CRUD action with CustomAdaptor in Syncfusion Grid
+description: Learn here all about Bind data and perform CRUD action with CustomAdaptor in Syncfusion ##Platform_Name## Grid of Syncfusion Essential JS 2 and more.
+control: Custom Adaptor
+platform: ej2-asp-core-mvc
+documentation: ug
+domainurl: ##DomainURL##
+---
+
+# CustomAdaptor in Syncfusion ASP.NET MVC Grid Component
+
+The `CustomAdaptor` in the Syncfusion ASP.NET MVC Grid Component allows to create their own custom adaptors by extending the built-in adaptors. The custom adaptor involves handling the built-in adaptor query process, request and response. The `CustomAdaptor` to be allows extending the OData V4 services, enabling efficient data fetching and manipulation. By default, there are three method for CustomAdaptor built-in methods.
+
+## Types of CustomAdaptor methods
+
+There are three types of methods in custom adaptors.
+
+### ProcessQuery
+
+It handling or executing a query sent to a data source such as database or custom dataService. This query request for data retrieval, insertion, updating, or deletion. The processQuery can be two argument are `DataManager` and `Query`. The `DataManager` argument using change the url value and `Query` argument are set the additional parameters value or change the any queries such as sort, filter and group etc.
+
+**DataManager**
+
+![DataManager](../../images/adaptors/customadaptor/custom-adaptor-datamanager.png)
+
+**Query**
+
+![Query](../../images/adaptors/customadaptor/custom-adaptor-query.png)
+
+```js
+processQuery(dm, query) {
+    query.addParams('Syncfusion in ASP.NET MVC Grid', 'true'); // Add additional parameter
path: ej2-asp-core-mvc/grid/EJ2_ASP.MVC/connecting-to-adaptors/custom-adaptor.md
user: login: NithyaSivaprakasam
body: full stop added
created_at: 2025-03-11T05:34:04Z
author_association: CONTRIBUTOR
diff_hunk: @@ -0,0 +1,672 @@
+---
+layout: post
+title: Bind data & perform CRUD action with CustomAdaptor in Syncfusion Grid
+description: Learn here all about Bind data and perform CRUD action with CustomAdaptor in Syncfusion ##Platform_Name## Grid of Syncfusion Essential JS 2 and more.
+control: Custom Adaptor
+platform: ej2-asp-core-mvc
+documentation: ug
+domainurl: ##DomainURL##
+---
+
+# CustomAdaptor in Syncfusion ASP.NET MVC Grid Component
+
+The `CustomAdaptor` in the Syncfusion ASP.NET MVC Grid Component allows to create their own custom adaptors by extending the built-in adaptors. The custom adaptor involves handling the built-in adaptor query process, request and response. The `CustomAdaptor` to be allows extending the OData V4 services, enabling efficient data fetching and manipulation. By default, there are three method for CustomAdaptor built-in methods.
+
+## Types of CustomAdaptor methods
+
+There are three types of methods in custom adaptors.
+
+### ProcessQuery
+
+It handling or executing a query sent to a data source such as database or custom dataService. This query request for data retrieval, insertion, updating, or deletion. The processQuery can be two argument are `DataManager` and `Query`. The `DataManager` argument using change the url value and `Query` argument are set the additional parameters value or change the any queries such as sort, filter and group etc.
+
+**DataManager**
+
+![DataManager](../../images/adaptors/customadaptor/custom-adaptor-datamanager.png)
+
+**Query**
+
+![Query](../../images/adaptors/customadaptor/custom-adaptor-query.png)
+
+```js
+processQuery(dm, query) {
+    query.addParams('Syncfusion in ASP.NET MVC Grid', 'true'); // Add additional parameter
+    return super.processQuery.apply(this, arguments);
+}
+```
+
+### beforeSend
+
+It executed before an request is sent to the server. This function provides an modify the parameter and request headers, data or performing validation.The `beforeSend` can be three argument are `DataManager`, `Request` and `Fetch`. The `DataManager` argument are provided the dataSource and adaptor value. The `Request` argument are sending the custom header by setting the `Authorization`. The `Settings` argument is optional. 
path: ej2-asp-core-mvc/grid/EJ2_ASP.MVC/connecting-to-adaptors/custom-adaptor.md
user: login: NithyaSivaprakasam
body: Changed content as per vikram's angular pr
created_at: 2025-03-11T05:34:22Z
author_association: CONTRIBUTOR
diff_hunk: @@ -0,0 +1,672 @@
+---
+layout: post
+title: Bind data & perform CRUD action with CustomAdaptor in Syncfusion Grid
+description: Learn here all about Bind data and perform CRUD action with CustomAdaptor in Syncfusion ##Platform_Name## Grid of Syncfusion Essential JS 2 and more.
+control: Custom Adaptor
+platform: ej2-asp-core-mvc
+documentation: ug
+domainurl: ##DomainURL##
+---
+
+# CustomAdaptor in Syncfusion ASP.NET MVC Grid Component
+
+The `CustomAdaptor` in the Syncfusion ASP.NET MVC Grid Component allows to create their own custom adaptors by extending the built-in adaptors. The custom adaptor involves handling the built-in adaptor query process, request and response. The `CustomAdaptor` to be allows extending the OData V4 services, enabling efficient data fetching and manipulation. By default, there are three method for CustomAdaptor built-in methods.
+
+## Types of CustomAdaptor methods
+
+There are three types of methods in custom adaptors.
+
+### ProcessQuery
+
+It handling or executing a query sent to a data source such as database or custom dataService. This query request for data retrieval, insertion, updating, or deletion. The processQuery can be two argument are `DataManager` and `Query`. The `DataManager` argument using change the url value and `Query` argument are set the additional parameters value or change the any queries such as sort, filter and group etc.
+
+**DataManager**
+
+![DataManager](../../images/adaptors/customadaptor/custom-adaptor-datamanager.png)
+
+**Query**
+
+![Query](../../images/adaptors/customadaptor/custom-adaptor-query.png)
+
+```js
+processQuery(dm, query) {
+    query.addParams('Syncfusion in ASP.NET MVC Grid', 'true'); // Add additional parameter
+    return super.processQuery.apply(this, arguments);
+}
+```
+
+### beforeSend
+
+It executed before an request is sent to the server. This function provides an modify the parameter and request headers, data or performing validation.The `beforeSend` can be three argument are `DataManager`, `Request` and `Fetch`. The `DataManager` argument are provided the dataSource and adaptor value. The `Request` argument are sending the custom header by setting the `Authorization`. The `Settings` argument is optional. 
path: ej2-asp-core-mvc/grid/EJ2_ASP.MVC/connecting-to-adaptors/custom-adaptor.md
user: login: NithyaSivaprakasam
body: Modified
created_at: 2025-03-11T05:36:32Z
author_association: CONTRIBUTOR
diff_hunk: @@ -0,0 +1,672 @@
+---
+layout: post
+title: Bind data & perform CRUD action with CustomAdaptor in Syncfusion Grid
+description: Learn here all about Bind data and perform CRUD action with CustomAdaptor in Syncfusion ##Platform_Name## Grid of Syncfusion Essential JS 2 and more.
+control: Custom Adaptor
+platform: ej2-asp-core-mvc
+documentation: ug
+domainurl: ##DomainURL##
+---
+
+# CustomAdaptor in Syncfusion ASP.NET MVC Grid Component
+
+The `CustomAdaptor` in the Syncfusion ASP.NET MVC Grid Component allows to create their own custom adaptors by extending the built-in adaptors. The custom adaptor involves handling the built-in adaptor query process, request and response. The `CustomAdaptor` to be allows extending the OData V4 services, enabling efficient data fetching and manipulation. By default, there are three method for CustomAdaptor built-in methods.
+
+## Types of CustomAdaptor methods
+
+There are three types of methods in custom adaptors.
+
+### ProcessQuery
+
+It handling or executing a query sent to a data source such as database or custom dataService. This query request for data retrieval, insertion, updating, or deletion. The processQuery can be two argument are `DataManager` and `Query`. The `DataManager` argument using change the url value and `Query` argument are set the additional parameters value or change the any queries such as sort, filter and group etc.
+
+**DataManager**
+
+![DataManager](../../images/adaptors/customadaptor/custom-adaptor-datamanager.png)
+
+**Query**
+
+![Query](../../images/adaptors/customadaptor/custom-adaptor-query.png)
+
+```js
+processQuery(dm, query) {
+    query.addParams('Syncfusion in ASP.NET MVC Grid', 'true'); // Add additional parameter
+    return super.processQuery.apply(this, arguments);
+}
+```
+
+### beforeSend
+
+It executed before an request is sent to the server. This function provides an modify the parameter and request headers, data or performing validation.The `beforeSend` can be three argument are `DataManager`, `Request` and `Fetch`. The `DataManager` argument are provided the dataSource and adaptor value. The `Request` argument are sending the custom header by setting the `Authorization`. The `Settings` argument is optional. 
+
+**DataManager**
+
+![DataManager](../../images/adaptors/customadaptor/custom-adaptor-datamanager.png)
+
+**Request**
+
+![Request](../../images/adaptors/customadaptor/custom-adaptor-request.png)
+
+**Settings**
+
+![Settings](../../images/adaptors/customadaptor/custom-adaptor-fetch.png)
+
+```js
+beforeSend(dm, request, settings) {
+request.headers.set('Authorization', `Bearer${(window as any).token}`);
+return super.beforeSend(dm, request, settings);
+}
+```
+
+### processResponse
+
+It is responsible for handling the response received from a server after the asynchronous request. It performs such as parsing the response data, handling error and preparing the data for consumption. The `processResponse` can be multiple arguments are optional.
+
+```js
+processResponse(data, ds, query, xhr, request, changes) {
+    const original = super.processResponse(data, ds, query, xhr, request, changes);
+    let i =0;
+    if (original.result){
+        original.result.forEach((item) => ej.base.setValue('SNo', ++i, item));
+    }
+return original;
+}
+```
+
+This guide provides detailed instructions on binding data and performing CRUD (Create, Read, Update, Delete) actions using the `CustomAdaptor` by extending the `ODataV4Adaptor` in your Syncfusion ASP.NET MVC Grid.
+ 
+## Creating an Custom service
+
+To configure a server with Syncfusion ASP.NET MVC Grid using OData, follow these steps:
+
+**1. Project Creation**
+
+1. Open **Visual Studio**.
+2. Select **Create a new project** → Choose **ASP.NET Web Application (.NET Framework)**.
+3. Name the project **ODataV4Adaptor** and select **MVC** as the project template.
+4. Ensure that the **Web API** option is selected (this is crucial for enabling OData).
+
+For detailed information, refer to this [documentation](https://learn.microsoft.com/en-us/aspnet/mvc/overview/getting-started/introduction/getting-started#create-your-first-app).
+
+**2. Install NuGet Packages**
+
+Using the NuGet package manager in Visual Studio (Tools → NuGet Package Manager → Manage NuGet Packages for Solution), install the `Microsoft.AspNet.OData` NuGet package for OData support and `Newtonsoft.Json` for JSON serialization support.
+
+**3. Model Class Creation:**
+
+Create a model class named `OrdersDetails.cs` inside the **Models** folder.
+
+{% tabs %}
+{% highlight cs tabtitle="OrdersDetails.cs" %}
+
+ namespace ODataV4Adaptor.Models
+{
+  public class OrdersDetails
+  {
+      public static List<OrdersDetails> order = new List<OrdersDetails>();
+      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<OrdersDetails> 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;
+      }
+      [Key]
+      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 %}
+
+**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<T>` method, where `OrdersDetails` represents the CLR type containing order details. 
+
+```cs
+        private static IEdmModel GetEdmModel()
+        {
+            var builder = new ODataConventionModelBuilder();
+            builder.EntitySet<OrdersDetails>("Orders");  // Define OData Entity.
+            return builder.GetEdmModel();
+        }
+```
+
+**5. Register the OData Services**
+
+Once the Entity Data Model is built, you need to register the OData services in your ASP.NET MVC application. Here's how:
+
+```cs
+// WebApiConfig.cs
+using Microsoft.AspNet.OData.Builder;
+using Microsoft.AspNet.OData.Extensions;
+using Microsoft.OData.Edm;
+using ODataV4Adaptor.Models;
+using System;
+using System.Collections.Generic;
+using System.Linq;
+using System.Web;
+using System.Web.Http;
+using System.Web.UI.WebControls;
+
+namespace CustomAdaptor.App_Start
+{
+    public static class WebApiConfig
+    {
+        public static void Register(HttpConfiguration config)
+        {
+            // Enable OData.
+            config.MapODataServiceRoute(
+                routeName: "ODataRoute",
+                routePrefix: "odata",
+                model: GetEdmModel()
+            );
+            // Enable Query Support.
+            config.Count().Filter().OrderBy().Expand().Select().MaxTop(null);
+            // Web API routes.
+            config.Routes.MapHttpRoute(
+                name: "DefaultApi",
+                routeTemplate: "api/{controller}/{action}/{id}",
+                defaults: new { id = System.Web.Http.RouteParameter.Optional }
+            );
+            // Configure JSON formatting.
+            config.Formatters.JsonFormatter.SerializerSettings.Formatting = Newtonsoft.Json.Formatting.Indented;
+        }
+        private static IEdmModel GetEdmModel()
+        {
+            var builder = new ODataConventionModelBuilder();
+            builder.EntitySet<OrdersDetails>("Orders");  // Define OData Entity.
+            return builder.GetEdmModel();
+        }
+    }
+}
+```
+
+**5. Add Controllers**
+
+Create a controllers to expose the OData endpoints.
+
+{% tabs %}
+{% highlight cs tabtitle="OrdersController.cs" %}
+using System.Linq;
+using Microsoft.AspNet.OData;
+using System.Web.Http;
+using CustomAdaptor.Models;
+
+namespace CustomAdaptor.Controllers
+{
+    public class OrdersController : ODataController
+    {
+        /// <summary>
+        /// Retrieves all orders.
+        /// </summary>
+        /// <returns>The collection of orders.</returns>
+        [EnableQuery]
+        public IHttpActionResult Get()
+        {
+            var data = OrdersDetails.GetAllRecords().AsQueryable();
+            return Ok(data);
+        }
+    }
+}
+{% endhighlight %}
+{% endtabs %}
+
+**6. 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 ASP.NET MVC Grid to an Custom service extending the ODataV4 service
+
+To integrate the Syncfusion Grid into your ASP.NET MVC project using Visual Studio, follow these steps:
+
+**Step 1:** Install the Syncfusion ASP.NET MVC Package:
+
+To add `ASP.NET MVC` in the application, open the NuGet package manager in Visual Studio (Tools → NuGet Package Manager → Manage NuGet Packages for Solution), search for [Syncfusion.EJ2.MVC5](https://www.nuget.org/packages/Syncfusion.EJ2.MVC5) and install it.
+Alternatively, you can install it using the following Package Manager Console command:
+
+{% tabs %}
+{% highlight C# tabtitle="Package Manager" %}
+
+Install-Package Syncfusion.EJ2.MVC5 -Version {{ site.releaseversion }}
+
+{% endhighlight %}
+{% endtabs %}
+
+**Step 2:** Add Syncfusion ASP.NET MVC namespace
+
+Add `Syncfusion.EJ2` namespace reference in `Web.config` under `Views` folder.
+
+```cs
+<namespaces>
+    <add namespace="Syncfusion.EJ2"/>
+</namespaces>
+```
+
+**Step 3:** Add stylesheet and script resources
+
+To include the required styles and scripts, add the following references inside the `<head>` of `~/Pages/Shared/_Layout.cshtml` file:
+{% tabs %}
+{% highlight cshtml tabtitle="~/_Layout.cshtml" %}
+
+<head>
+    ...
+    <!-- Syncfusion ASP.NET MVC control styles -->
+    <link rel="stylesheet" href="https://cdn.syncfusion.com/ej2/{{ site.ej2version }}/bootstrap5.css" />
+    <!-- Syncfusion ASP.NET MVC control scripts -->
+    <script src="https://cdn.syncfusion.com/ej2/{{ site.ej2version }}/dist/ej2.min.js"></script>
+    <!-- Include the necessary CSS files to style the Syncfusion ASP.NET MVC controls: -->
+    <link href="https://cdn.syncfusion.com/ej2/{{ site.ej2version }}/ej2-base/styles/bootstrap5.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/{{ site.ej2version }}/ej2-grids/styles/bootstrap5.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/{{ site.ej2version }}/ej2-buttons/styles/bootstrap5.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/{{ site.ej2version }}/ej2-popups/styles/bootstrap5.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/{{ site.ej2version }}/ej2-richtexteditor/styles/bootstrap5.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/{{ site.ej2version }}/ej2-navigations/styles/bootstrap5.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/{{ site.ej2version }}/ej2-dropdowns/styles/bootstrap5.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/{{ site.ej2version }}/ej2-lists/styles/bootstrap5.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/{{ site.ej2version }}/ej2-inputs/styles/bootstrap5.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/{{ site.ej2version }}/ej2-calendars/styles/bootstrap5.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/{{ site.ej2version }}/ej2-notifications/styles/bootstrap5.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/{{ site.ej2version }}/ej2-splitbuttons/styles/bootstrap5.css" rel="stylesheet" />
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
+    <script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type="text/javascript"></script>
+</head>
+
+{% endhighlight %}
+{% endtabs %}
+
+**Step 4:** Register Syncfusion Script Manager
+
+To ensure proper script execution, register the Syncfusion Script Manager `EJS().ScriptManager()` at the end of `<body>` in the `~/Pages/Shared/_Layout.cshtml` file as follows.
+
+{% tabs %}
+{% highlight cshtml tabtitle="~/_Layout.cshtml" %}
+<body>
+...
+<!-- Syncfusion ASP.NET MVC Script Manager -->
+@Html.EJS().ScriptManager()
+</body>
+{% endhighlight %}
+{% endtabs %}
+
+**Step 4: Adding Custom Adaptor and Syncfusion Grid**
+
+To create a custom adaptor, extend the ODataV4Adaptor. This custom adaptor will implement three key methods:
+
+* The `processQuery` method is used to change the URL of your API endpoint and set the additional parameters for executing the query.
+
+* The `beforeSend` method is used to send the custom header for `Authorization` in the request header.
+
+* The `processResponse` method is used to set the value for customize the column for new field is `SNo`.
+
+**Implementing the Custom Adaptor**
+
+Define a `DataManager` instance, specifying the API endpoint (https://localhost:xxxx/odata/Orders) in the url property and setting the adaptor to `CustomAdaptor`.
+
+{% tabs %}
+{% highlight html tabtitle="Index.cshtml" %}
+@Html.EJS().Grid("Grid").Columns(col =>
path: ej2-asp-core-mvc/grid/EJ2_ASP.MVC/connecting-to-adaptors/custom-adaptor.md
user: login: NithyaSivaprakasam
body: This is how my code is aligned in Visual studio
created_at: 2025-03-11T05:36:56Z
author_association: CONTRIBUTOR
diff_hunk: @@ -0,0 +1,672 @@
+---
+layout: post
+title: Bind data & perform CRUD action with CustomAdaptor in Syncfusion Grid
+description: Learn here all about Bind data and perform CRUD action with CustomAdaptor in Syncfusion ##Platform_Name## Grid of Syncfusion Essential JS 2 and more.
+control: Custom Adaptor
+platform: ej2-asp-core-mvc
+documentation: ug
+domainurl: ##DomainURL##
+---
+
+# CustomAdaptor in Syncfusion ASP.NET MVC Grid Component
+
+The `CustomAdaptor` in the Syncfusion ASP.NET MVC Grid Component allows to create their own custom adaptors by extending the built-in adaptors. The custom adaptor involves handling the built-in adaptor query process, request and response. The `CustomAdaptor` to be allows extending the OData V4 services, enabling efficient data fetching and manipulation. By default, there are three method for CustomAdaptor built-in methods.
+
+## Types of CustomAdaptor methods
+
+There are three types of methods in custom adaptors.
+
+### ProcessQuery
+
+It handling or executing a query sent to a data source such as database or custom dataService. This query request for data retrieval, insertion, updating, or deletion. The processQuery can be two argument are `DataManager` and `Query`. The `DataManager` argument using change the url value and `Query` argument are set the additional parameters value or change the any queries such as sort, filter and group etc.
+
+**DataManager**
+
+![DataManager](../../images/adaptors/customadaptor/custom-adaptor-datamanager.png)
+
+**Query**
+
+![Query](../../images/adaptors/customadaptor/custom-adaptor-query.png)
+
+```js
+processQuery(dm, query) {
+    query.addParams('Syncfusion in ASP.NET MVC Grid', 'true'); // Add additional parameter
+    return super.processQuery.apply(this, arguments);
+}
+```
+
+### beforeSend
+
+It executed before an request is sent to the server. This function provides an modify the parameter and request headers, data or performing validation.The `beforeSend` can be three argument are `DataManager`, `Request` and `Fetch`. The `DataManager` argument are provided the dataSource and adaptor value. The `Request` argument are sending the custom header by setting the `Authorization`. The `Settings` argument is optional. 
+
+**DataManager**
+
+![DataManager](../../images/adaptors/customadaptor/custom-adaptor-datamanager.png)
+
+**Request**
+
+![Request](../../images/adaptors/customadaptor/custom-adaptor-request.png)
+
+**Settings**
+
+![Settings](../../images/adaptors/customadaptor/custom-adaptor-fetch.png)
+
+```js
+beforeSend(dm, request, settings) {
+request.headers.set('Authorization', `Bearer${(window as any).token}`);
+return super.beforeSend(dm, request, settings);
+}
+```
+
+### processResponse
+
+It is responsible for handling the response received from a server after the asynchronous request. It performs such as parsing the response data, handling error and preparing the data for consumption. The `processResponse` can be multiple arguments are optional.
+
+```js
+processResponse(data, ds, query, xhr, request, changes) {
+    const original = super.processResponse(data, ds, query, xhr, request, changes);
+    let i =0;
+    if (original.result){
+        original.result.forEach((item) => ej.base.setValue('SNo', ++i, item));
+    }
+return original;
+}
+```
+
+This guide provides detailed instructions on binding data and performing CRUD (Create, Read, Update, Delete) actions using the `CustomAdaptor` by extending the `ODataV4Adaptor` in your Syncfusion ASP.NET MVC Grid.
+ 
+## Creating an Custom service
+
+To configure a server with Syncfusion ASP.NET MVC Grid using OData, follow these steps:
+
+**1. Project Creation**
+
+1. Open **Visual Studio**.
+2. Select **Create a new project** → Choose **ASP.NET Web Application (.NET Framework)**.
+3. Name the project **ODataV4Adaptor** and select **MVC** as the project template.
+4. Ensure that the **Web API** option is selected (this is crucial for enabling OData).
+
+For detailed information, refer to this [documentation](https://learn.microsoft.com/en-us/aspnet/mvc/overview/getting-started/introduction/getting-started#create-your-first-app).
+
+**2. Install NuGet Packages**
+
+Using the NuGet package manager in Visual Studio (Tools → NuGet Package Manager → Manage NuGet Packages for Solution), install the `Microsoft.AspNet.OData` NuGet package for OData support and `Newtonsoft.Json` for JSON serialization support.
+
+**3. Model Class Creation:**
+
+Create a model class named `OrdersDetails.cs` inside the **Models** folder.
+
+{% tabs %}
+{% highlight cs tabtitle="OrdersDetails.cs" %}
+
+ namespace ODataV4Adaptor.Models
+{
+  public class OrdersDetails
+  {
+      public static List<OrdersDetails> order = new List<OrdersDetails>();
+      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<OrdersDetails> 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;
+      }
+      [Key]
+      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 %}
+
+**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<T>` method, where `OrdersDetails` represents the CLR type containing order details. 
+
+```cs
+        private static IEdmModel GetEdmModel()
+        {
+            var builder = new ODataConventionModelBuilder();
+            builder.EntitySet<OrdersDetails>("Orders");  // Define OData Entity.
+            return builder.GetEdmModel();
+        }
+```
+
+**5. Register the OData Services**
+
+Once the Entity Data Model is built, you need to register the OData services in your ASP.NET MVC application. Here's how:
+
+```cs
+// WebApiConfig.cs
+using Microsoft.AspNet.OData.Builder;
+using Microsoft.AspNet.OData.Extensions;
+using Microsoft.OData.Edm;
+using ODataV4Adaptor.Models;
+using System;
+using System.Collections.Generic;
+using System.Linq;
+using System.Web;
+using System.Web.Http;
+using System.Web.UI.WebControls;
+
+namespace CustomAdaptor.App_Start
+{
+    public static class WebApiConfig
+    {
+        public static void Register(HttpConfiguration config)
+        {
+            // Enable OData.
+            config.MapODataServiceRoute(
+                routeName: "ODataRoute",
+                routePrefix: "odata",
+                model: GetEdmModel()
+            );
+            // Enable Query Support.
+            config.Count().Filter().OrderBy().Expand().Select().MaxTop(null);
+            // Web API routes.
+            config.Routes.MapHttpRoute(
+                name: "DefaultApi",
+                routeTemplate: "api/{controller}/{action}/{id}",
+                defaults: new { id = System.Web.Http.RouteParameter.Optional }
+            );
+            // Configure JSON formatting.
+            config.Formatters.JsonFormatter.SerializerSettings.Formatting = Newtonsoft.Json.Formatting.Indented;
+        }
+        private static IEdmModel GetEdmModel()
+        {
+            var builder = new ODataConventionModelBuilder();
+            builder.EntitySet<OrdersDetails>("Orders");  // Define OData Entity.
+            return builder.GetEdmModel();
+        }
+    }
+}
+```
+
+**5. Add Controllers**
+
+Create a controllers to expose the OData endpoints.
+
+{% tabs %}
+{% highlight cs tabtitle="OrdersController.cs" %}
+using System.Linq;
+using Microsoft.AspNet.OData;
+using System.Web.Http;
+using CustomAdaptor.Models;
+
+namespace CustomAdaptor.Controllers
+{
+    public class OrdersController : ODataController
+    {
+        /// <summary>
+        /// Retrieves all orders.
+        /// </summary>
+        /// <returns>The collection of orders.</returns>
+        [EnableQuery]
+        public IHttpActionResult Get()
+        {
+            var data = OrdersDetails.GetAllRecords().AsQueryable();
+            return Ok(data);
+        }
+    }
+}
+{% endhighlight %}
+{% endtabs %}
+
+**6. 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 ASP.NET MVC Grid to an Custom service extending the ODataV4 service
+
+To integrate the Syncfusion Grid into your ASP.NET MVC project using Visual Studio, follow these steps:
+
+**Step 1:** Install the Syncfusion ASP.NET MVC Package:
+
+To add `ASP.NET MVC` in the application, open the NuGet package manager in Visual Studio (Tools → NuGet Package Manager → Manage NuGet Packages for Solution), search for [Syncfusion.EJ2.MVC5](https://www.nuget.org/packages/Syncfusion.EJ2.MVC5) and install it.
+Alternatively, you can install it using the following Package Manager Console command:
+
+{% tabs %}
+{% highlight C# tabtitle="Package Manager" %}
+
+Install-Package Syncfusion.EJ2.MVC5 -Version {{ site.releaseversion }}
+
+{% endhighlight %}
+{% endtabs %}
+
+**Step 2:** Add Syncfusion ASP.NET MVC namespace
+
+Add `Syncfusion.EJ2` namespace reference in `Web.config` under `Views` folder.
+
+```cs
+<namespaces>
+    <add namespace="Syncfusion.EJ2"/>
+</namespaces>
+```
+
+**Step 3:** Add stylesheet and script resources
+
+To include the required styles and scripts, add the following references inside the `<head>` of `~/Pages/Shared/_Layout.cshtml` file:
+{% tabs %}
+{% highlight cshtml tabtitle="~/_Layout.cshtml" %}
+
+<head>
+    ...
+    <!-- Syncfusion ASP.NET MVC control styles -->
+    <link rel="stylesheet" href="https://cdn.syncfusion.com/ej2/{{ site.ej2version }}/bootstrap5.css" />
+    <!-- Syncfusion ASP.NET MVC control scripts -->
+    <script src="https://cdn.syncfusion.com/ej2/{{ site.ej2version }}/dist/ej2.min.js"></script>
+    <!-- Include the necessary CSS files to style the Syncfusion ASP.NET MVC controls: -->
+    <link href="https://cdn.syncfusion.com/ej2/{{ site.ej2version }}/ej2-base/styles/bootstrap5.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/{{ site.ej2version }}/ej2-grids/styles/bootstrap5.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/{{ site.ej2version }}/ej2-buttons/styles/bootstrap5.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/{{ site.ej2version }}/ej2-popups/styles/bootstrap5.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/{{ site.ej2version }}/ej2-richtexteditor/styles/bootstrap5.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/{{ site.ej2version }}/ej2-navigations/styles/bootstrap5.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/{{ site.ej2version }}/ej2-dropdowns/styles/bootstrap5.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/{{ site.ej2version }}/ej2-lists/styles/bootstrap5.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/{{ site.ej2version }}/ej2-inputs/styles/bootstrap5.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/{{ site.ej2version }}/ej2-calendars/styles/bootstrap5.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/{{ site.ej2version }}/ej2-notifications/styles/bootstrap5.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/{{ site.ej2version }}/ej2-splitbuttons/styles/bootstrap5.css" rel="stylesheet" />
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
+    <script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type="text/javascript"></script>
+</head>
+
+{% endhighlight %}
+{% endtabs %}
+
+**Step 4:** Register Syncfusion Script Manager
+
+To ensure proper script execution, register the Syncfusion Script Manager `EJS().ScriptManager()` at the end of `<body>` in the `~/Pages/Shared/_Layout.cshtml` file as follows.
+
+{% tabs %}
+{% highlight cshtml tabtitle="~/_Layout.cshtml" %}
+<body>
+...
+<!-- Syncfusion ASP.NET MVC Script Manager -->
+@Html.EJS().ScriptManager()
+</body>
+{% endhighlight %}
+{% endtabs %}
+
+**Step 4: Adding Custom Adaptor and Syncfusion Grid**
+
+To create a custom adaptor, extend the ODataV4Adaptor. This custom adaptor will implement three key methods:
+
+* The `processQuery` method is used to change the URL of your API endpoint and set the additional parameters for executing the query.
+
+* The `beforeSend` method is used to send the custom header for `Authorization` in the request header.
+
+* The `processResponse` method is used to set the value for customize the column for new field is `SNo`.
+
+**Implementing the Custom Adaptor**
+
+Define a `DataManager` instance, specifying the API endpoint (https://localhost:xxxx/odata/Orders) in the url property and setting the adaptor to `CustomAdaptor`.
+
+{% tabs %}
+{% highlight html tabtitle="Index.cshtml" %}
+@Html.EJS().Grid("Grid").Columns(col =>
+	{
+		col.Field("SNo").HeaderText("S. No").Width("100").Add();
+		col.Field("OrderID").HeaderText("Order ID").Width("150").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).IsPrimaryKey(true).Add();
+		col.Field("CustomerID").HeaderText("Customer ID").Width("150").Add();
+		col.Field("ShipCity").HeaderText("Ship City").Width("150").Add();
+		col.Field("ShipCountry").HeaderText("Ship Country").Width("150").Add();
+	}).Render()
+<script>
+    class CustomAdaptor extends ejs.data.ODataV4Adaptor {}
path: ej2-asp-core-mvc/grid/EJ2_ASP.MVC/connecting-to-adaptors/custom-adaptor.md
user: login: NithyaSivaprakasam
body: Added coded
created_at: 2025-03-11T05:37:06Z
author_association: CONTRIBUTOR
diff_hunk: @@ -0,0 +1,672 @@
+---
+layout: post
+title: Bind data & perform CRUD action with CustomAdaptor in Syncfusion Grid
+description: Learn here all about Bind data and perform CRUD action with CustomAdaptor in Syncfusion ##Platform_Name## Grid of Syncfusion Essential JS 2 and more.
+control: Custom Adaptor
+platform: ej2-asp-core-mvc
+documentation: ug
+domainurl: ##DomainURL##
+---
+
+# CustomAdaptor in Syncfusion ASP.NET MVC Grid Component
+
+The `CustomAdaptor` in the Syncfusion ASP.NET MVC Grid Component allows to create their own custom adaptors by extending the built-in adaptors. The custom adaptor involves handling the built-in adaptor query process, request and response. The `CustomAdaptor` to be allows extending the OData V4 services, enabling efficient data fetching and manipulation. By default, there are three method for CustomAdaptor built-in methods.
+
+## Types of CustomAdaptor methods
+
+There are three types of methods in custom adaptors.
+
+### ProcessQuery
+
+It handling or executing a query sent to a data source such as database or custom dataService. This query request for data retrieval, insertion, updating, or deletion. The processQuery can be two argument are `DataManager` and `Query`. The `DataManager` argument using change the url value and `Query` argument are set the additional parameters value or change the any queries such as sort, filter and group etc.
+
+**DataManager**
+
+![DataManager](../../images/adaptors/customadaptor/custom-adaptor-datamanager.png)
+
+**Query**
+
+![Query](../../images/adaptors/customadaptor/custom-adaptor-query.png)
+
+```js
+processQuery(dm, query) {
+    query.addParams('Syncfusion in ASP.NET MVC Grid', 'true'); // Add additional parameter
+    return super.processQuery.apply(this, arguments);
+}
+```
+
+### beforeSend
+
+It executed before an request is sent to the server. This function provides an modify the parameter and request headers, data or performing validation.The `beforeSend` can be three argument are `DataManager`, `Request` and `Fetch`. The `DataManager` argument are provided the dataSource and adaptor value. The `Request` argument are sending the custom header by setting the `Authorization`. The `Settings` argument is optional. 
+
+**DataManager**
+
+![DataManager](../../images/adaptors/customadaptor/custom-adaptor-datamanager.png)
+
+**Request**
+
+![Request](../../images/adaptors/customadaptor/custom-adaptor-request.png)
+
+**Settings**
+
+![Settings](../../images/adaptors/customadaptor/custom-adaptor-fetch.png)
+
+```js
+beforeSend(dm, request, settings) {
+request.headers.set('Authorization', `Bearer${(window as any).token}`);
+return super.beforeSend(dm, request, settings);
+}
+```
+
+### processResponse
+
+It is responsible for handling the response received from a server after the asynchronous request. It performs such as parsing the response data, handling error and preparing the data for consumption. The `processResponse` can be multiple arguments are optional.
+
+```js
+processResponse(data, ds, query, xhr, request, changes) {
+    const original = super.processResponse(data, ds, query, xhr, request, changes);
+    let i =0;
+    if (original.result){
+        original.result.forEach((item) => ej.base.setValue('SNo', ++i, item));
+    }
+return original;
+}
+```
+
+This guide provides detailed instructions on binding data and performing CRUD (Create, Read, Update, Delete) actions using the `CustomAdaptor` by extending the `ODataV4Adaptor` in your Syncfusion ASP.NET MVC Grid.
+ 
+## Creating an Custom service
+
+To configure a server with Syncfusion ASP.NET MVC Grid using OData, follow these steps:
+
+**1. Project Creation**
+
+1. Open **Visual Studio**.
+2. Select **Create a new project** → Choose **ASP.NET Web Application (.NET Framework)**.
+3. Name the project **ODataV4Adaptor** and select **MVC** as the project template.
+4. Ensure that the **Web API** option is selected (this is crucial for enabling OData).
+
+For detailed information, refer to this [documentation](https://learn.microsoft.com/en-us/aspnet/mvc/overview/getting-started/introduction/getting-started#create-your-first-app).
+
+**2. Install NuGet Packages**
+
+Using the NuGet package manager in Visual Studio (Tools → NuGet Package Manager → Manage NuGet Packages for Solution), install the `Microsoft.AspNet.OData` NuGet package for OData support and `Newtonsoft.Json` for JSON serialization support.
+
+**3. Model Class Creation:**
+
+Create a model class named `OrdersDetails.cs` inside the **Models** folder.
+
+{% tabs %}
+{% highlight cs tabtitle="OrdersDetails.cs" %}
+
+ namespace ODataV4Adaptor.Models
+{
+  public class OrdersDetails
+  {
+      public static List<OrdersDetails> order = new List<OrdersDetails>();
+      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<OrdersDetails> 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;
+      }
+      [Key]
+      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 %}
+
+**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<T>` method, where `OrdersDetails` represents the CLR type containing order details. 
+
+```cs
+        private static IEdmModel GetEdmModel()
+        {
+            var builder = new ODataConventionModelBuilder();
+            builder.EntitySet<OrdersDetails>("Orders");  // Define OData Entity.
+            return builder.GetEdmModel();
+        }
+```
+
+**5. Register the OData Services**
+
+Once the Entity Data Model is built, you need to register the OData services in your ASP.NET MVC application. Here's how:
+
+```cs
+// WebApiConfig.cs
+using Microsoft.AspNet.OData.Builder;
+using Microsoft.AspNet.OData.Extensions;
+using Microsoft.OData.Edm;
+using ODataV4Adaptor.Models;
+using System;
+using System.Collections.Generic;
+using System.Linq;
+using System.Web;
+using System.Web.Http;
+using System.Web.UI.WebControls;
+
+namespace CustomAdaptor.App_Start
+{
+    public static class WebApiConfig
+    {
+        public static void Register(HttpConfiguration config)
+        {
+            // Enable OData.
+            config.MapODataServiceRoute(
+                routeName: "ODataRoute",
+                routePrefix: "odata",
+                model: GetEdmModel()
+            );
+            // Enable Query Support.
+            config.Count().Filter().OrderBy().Expand().Select().MaxTop(null);
+            // Web API routes.
+            config.Routes.MapHttpRoute(
+                name: "DefaultApi",
+                routeTemplate: "api/{controller}/{action}/{id}",
+                defaults: new { id = System.Web.Http.RouteParameter.Optional }
+            );
+            // Configure JSON formatting.
+            config.Formatters.JsonFormatter.SerializerSettings.Formatting = Newtonsoft.Json.Formatting.Indented;
+        }
+        private static IEdmModel GetEdmModel()
+        {
+            var builder = new ODataConventionModelBuilder();
+            builder.EntitySet<OrdersDetails>("Orders");  // Define OData Entity.
+            return builder.GetEdmModel();
+        }
+    }
+}
+```
+
+**5. Add Controllers**
+
+Create a controllers to expose the OData endpoints.
+
+{% tabs %}
+{% highlight cs tabtitle="OrdersController.cs" %}
+using System.Linq;
+using Microsoft.AspNet.OData;
+using System.Web.Http;
+using CustomAdaptor.Models;
+
+namespace CustomAdaptor.Controllers
+{
+    public class OrdersController : ODataController
+    {
+        /// <summary>
+        /// Retrieves all orders.
+        /// </summary>
+        /// <returns>The collection of orders.</returns>
+        [EnableQuery]
+        public IHttpActionResult Get()
+        {
+            var data = OrdersDetails.GetAllRecords().AsQueryable();
+            return Ok(data);
+        }
+    }
+}
+{% endhighlight %}
+{% endtabs %}
+
+**6. 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 ASP.NET MVC Grid to an Custom service extending the ODataV4 service
+
+To integrate the Syncfusion Grid into your ASP.NET MVC project using Visual Studio, follow these steps:
+
+**Step 1:** Install the Syncfusion ASP.NET MVC Package:
+
+To add `ASP.NET MVC` in the application, open the NuGet package manager in Visual Studio (Tools → NuGet Package Manager → Manage NuGet Packages for Solution), search for [Syncfusion.EJ2.MVC5](https://www.nuget.org/packages/Syncfusion.EJ2.MVC5) and install it.
+Alternatively, you can install it using the following Package Manager Console command:
+
+{% tabs %}
+{% highlight C# tabtitle="Package Manager" %}
+
+Install-Package Syncfusion.EJ2.MVC5 -Version {{ site.releaseversion }}
+
+{% endhighlight %}
+{% endtabs %}
+
+**Step 2:** Add Syncfusion ASP.NET MVC namespace
+
+Add `Syncfusion.EJ2` namespace reference in `Web.config` under `Views` folder.
+
+```cs
+<namespaces>
+    <add namespace="Syncfusion.EJ2"/>
+</namespaces>
+```
+
+**Step 3:** Add stylesheet and script resources
+
+To include the required styles and scripts, add the following references inside the `<head>` of `~/Pages/Shared/_Layout.cshtml` file:
+{% tabs %}
+{% highlight cshtml tabtitle="~/_Layout.cshtml" %}
+
+<head>
+    ...
+    <!-- Syncfusion ASP.NET MVC control styles -->
+    <link rel="stylesheet" href="https://cdn.syncfusion.com/ej2/{{ site.ej2version }}/bootstrap5.css" />
+    <!-- Syncfusion ASP.NET MVC control scripts -->
+    <script src="https://cdn.syncfusion.com/ej2/{{ site.ej2version }}/dist/ej2.min.js"></script>
+    <!-- Include the necessary CSS files to style the Syncfusion ASP.NET MVC controls: -->
+    <link href="https://cdn.syncfusion.com/ej2/{{ site.ej2version }}/ej2-base/styles/bootstrap5.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/{{ site.ej2version }}/ej2-grids/styles/bootstrap5.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/{{ site.ej2version }}/ej2-buttons/styles/bootstrap5.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/{{ site.ej2version }}/ej2-popups/styles/bootstrap5.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/{{ site.ej2version }}/ej2-richtexteditor/styles/bootstrap5.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/{{ site.ej2version }}/ej2-navigations/styles/bootstrap5.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/{{ site.ej2version }}/ej2-dropdowns/styles/bootstrap5.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/{{ site.ej2version }}/ej2-lists/styles/bootstrap5.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/{{ site.ej2version }}/ej2-inputs/styles/bootstrap5.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/{{ site.ej2version }}/ej2-calendars/styles/bootstrap5.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/{{ site.ej2version }}/ej2-notifications/styles/bootstrap5.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/{{ site.ej2version }}/ej2-splitbuttons/styles/bootstrap5.css" rel="stylesheet" />
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
+    <script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type="text/javascript"></script>
+</head>
+
+{% endhighlight %}
+{% endtabs %}
+
+**Step 4:** Register Syncfusion Script Manager
+
+To ensure proper script execution, register the Syncfusion Script Manager `EJS().ScriptManager()` at the end of `<body>` in the `~/Pages/Shared/_Layout.cshtml` file as follows.
+
+{% tabs %}
+{% highlight cshtml tabtitle="~/_Layout.cshtml" %}
+<body>
+...
+<!-- Syncfusion ASP.NET MVC Script Manager -->
+@Html.EJS().ScriptManager()
+</body>
+{% endhighlight %}
+{% endtabs %}
+
+**Step 4: Adding Custom Adaptor and Syncfusion Grid**
+
+To create a custom adaptor, extend the ODataV4Adaptor. This custom adaptor will implement three key methods:
+
+* The `processQuery` method is used to change the URL of your API endpoint and set the additional parameters for executing the query.
+
+* The `beforeSend` method is used to send the custom header for `Authorization` in the request header.
+
+* The `processResponse` method is used to set the value for customize the column for new field is `SNo`.
+
+**Implementing the Custom Adaptor**
+
+Define a `DataManager` instance, specifying the API endpoint (https://localhost:xxxx/odata/Orders) in the url property and setting the adaptor to `CustomAdaptor`.
+
+{% tabs %}
+{% highlight html tabtitle="Index.cshtml" %}
+@Html.EJS().Grid("Grid").Columns(col =>
+	{
+		col.Field("SNo").HeaderText("S. No").Width("100").Add();
+		col.Field("OrderID").HeaderText("Order ID").Width("150").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).IsPrimaryKey(true).Add();
+		col.Field("CustomerID").HeaderText("Customer ID").Width("150").Add();
+		col.Field("ShipCity").HeaderText("Ship City").Width("150").Add();
+		col.Field("ShipCountry").HeaderText("Ship Country").Width("150").Add();
+	}).Render()
+<script>
+    class CustomAdaptor extends ejs.data.ODataV4Adaptor {}
+    document.addEventListener("DOMContentLoaded", function () {
+        let grid = document.getElementById("Grid").ej2_instances[0];
+        if (grid) {
+            let dataManager = new ejs.data.DataManager({
+                url: "https://localhost:xxxx/odata/Orders",
+                adaptor: new CustomAdaptor()
+            });
+            grid.dataSource = dataManager;
+        }
+    });
+</script>
+{% 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**.
+
+## Handling Searching Operation
path: ej2-asp-core-mvc/grid/EJ2_ASP.MVC/connecting-to-adaptors/custom-adaptor.md
user: login: NithyaSivaprakasam
body: Modified
created_at: 2025-03-11T05:38:15Z
author_association: CONTRIBUTOR
diff_hunk: @@ -0,0 +1,672 @@
+---
+layout: post
+title: Bind data & perform CRUD action with CustomAdaptor in Syncfusion Grid
+description: Learn here all about Bind data and perform CRUD action with CustomAdaptor in Syncfusion ##Platform_Name## Grid of Syncfusion Essential JS 2 and more.
+control: Custom Adaptor
+platform: ej2-asp-core-mvc
+documentation: ug
+domainurl: ##DomainURL##
+---
+
+# CustomAdaptor in Syncfusion ASP.NET MVC Grid Component
+
+The `CustomAdaptor` in the Syncfusion ASP.NET MVC Grid Component allows to create their own custom adaptors by extending the built-in adaptors. The custom adaptor involves handling the built-in adaptor query process, request and response. The `CustomAdaptor` to be allows extending the OData V4 services, enabling efficient data fetching and manipulation. By default, there are three method for CustomAdaptor built-in methods.
+
+## Types of CustomAdaptor methods
+
+There are three types of methods in custom adaptors.
+
+### ProcessQuery
+
+It handling or executing a query sent to a data source such as database or custom dataService. This query request for data retrieval, insertion, updating, or deletion. The processQuery can be two argument are `DataManager` and `Query`. The `DataManager` argument using change the url value and `Query` argument are set the additional parameters value or change the any queries such as sort, filter and group etc.
+
+**DataManager**
+
+![DataManager](../../images/adaptors/customadaptor/custom-adaptor-datamanager.png)
+
+**Query**
+
+![Query](../../images/adaptors/customadaptor/custom-adaptor-query.png)
+
+```js
+processQuery(dm, query) {
+    query.addParams('Syncfusion in ASP.NET MVC Grid', 'true'); // Add additional parameter
+    return super.processQuery.apply(this, arguments);
+}
+```
+
+### beforeSend
+
+It executed before an request is sent to the server. This function provides an modify the parameter and request headers, data or performing validation.The `beforeSend` can be three argument are `DataManager`, `Request` and `Fetch`. The `DataManager` argument are provided the dataSource and adaptor value. The `Request` argument are sending the custom header by setting the `Authorization`. The `Settings` argument is optional. 
+
+**DataManager**
+
+![DataManager](../../images/adaptors/customadaptor/custom-adaptor-datamanager.png)
+
+**Request**
+
+![Request](../../images/adaptors/customadaptor/custom-adaptor-request.png)
+
+**Settings**
+
+![Settings](../../images/adaptors/customadaptor/custom-adaptor-fetch.png)
+
+```js
+beforeSend(dm, request, settings) {
+request.headers.set('Authorization', `Bearer${(window as any).token}`);
+return super.beforeSend(dm, request, settings);
+}
+```
+
+### processResponse
+
+It is responsible for handling the response received from a server after the asynchronous request. It performs such as parsing the response data, handling error and preparing the data for consumption. The `processResponse` can be multiple arguments are optional.
+
+```js
+processResponse(data, ds, query, xhr, request, changes) {
+    const original = super.processResponse(data, ds, query, xhr, request, changes);
+    let i =0;
+    if (original.result){
+        original.result.forEach((item) => ej.base.setValue('SNo', ++i, item));
+    }
+return original;
+}
+```
+
+This guide provides detailed instructions on binding data and performing CRUD (Create, Read, Update, Delete) actions using the `CustomAdaptor` by extending the `ODataV4Adaptor` in your Syncfusion ASP.NET MVC Grid.
+ 
+## Creating an Custom service
+
+To configure a server with Syncfusion ASP.NET MVC Grid using OData, follow these steps:
+
+**1. Project Creation**
+
+1. Open **Visual Studio**.
+2. Select **Create a new project** → Choose **ASP.NET Web Application (.NET Framework)**.
+3. Name the project **ODataV4Adaptor** and select **MVC** as the project template.
+4. Ensure that the **Web API** option is selected (this is crucial for enabling OData).
+
+For detailed information, refer to this [documentation](https://learn.microsoft.com/en-us/aspnet/mvc/overview/getting-started/introduction/getting-started#create-your-first-app).
+
+**2. Install NuGet Packages**
+
+Using the NuGet package manager in Visual Studio (Tools → NuGet Package Manager → Manage NuGet Packages for Solution), install the `Microsoft.AspNet.OData` NuGet package for OData support and `Newtonsoft.Json` for JSON serialization support.
+
+**3. Model Class Creation:**
+
+Create a model class named `OrdersDetails.cs` inside the **Models** folder.
+
+{% tabs %}
+{% highlight cs tabtitle="OrdersDetails.cs" %}
+
+ namespace ODataV4Adaptor.Models
+{
+  public class OrdersDetails
+  {
+      public static List<OrdersDetails> order = new List<OrdersDetails>();
+      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<OrdersDetails> 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;
+      }
+      [Key]
+      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 %}
+
+**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<T>` method, where `OrdersDetails` represents the CLR type containing order details. 
+
+```cs
+        private static IEdmModel GetEdmModel()
+        {
+            var builder = new ODataConventionModelBuilder();
+            builder.EntitySet<OrdersDetails>("Orders");  // Define OData Entity.
+            return builder.GetEdmModel();
+        }
+```
+
+**5. Register the OData Services**
+
+Once the Entity Data Model is built, you need to register the OData services in your ASP.NET MVC application. Here's how:
+
+```cs
+// WebApiConfig.cs
+using Microsoft.AspNet.OData.Builder;
+using Microsoft.AspNet.OData.Extensions;
+using Microsoft.OData.Edm;
+using ODataV4Adaptor.Models;
+using System;
+using System.Collections.Generic;
+using System.Linq;
+using System.Web;
+using System.Web.Http;
+using System.Web.UI.WebControls;
+
+namespace CustomAdaptor.App_Start
+{
+    public static class WebApiConfig
+    {
+        public static void Register(HttpConfiguration config)
+        {
+            // Enable OData.
+            config.MapODataServiceRoute(
+                routeName: "ODataRoute",
+                routePrefix: "odata",
+                model: GetEdmModel()
+            );
+            // Enable Query Support.
+            config.Count().Filter().OrderBy().Expand().Select().MaxTop(null);
+            // Web API routes.
+            config.Routes.MapHttpRoute(
+                name: "DefaultApi",
+                routeTemplate: "api/{controller}/{action}/{id}",
+                defaults: new { id = System.Web.Http.RouteParameter.Optional }
+            );
+            // Configure JSON formatting.
+            config.Formatters.JsonFormatter.SerializerSettings.Formatting = Newtonsoft.Json.Formatting.Indented;
+        }
+        private static IEdmModel GetEdmModel()
+        {
+            var builder = new ODataConventionModelBuilder();
+            builder.EntitySet<OrdersDetails>("Orders");  // Define OData Entity.
+            return builder.GetEdmModel();
+        }
+    }
+}
+```
+
+**5. Add Controllers**
+
+Create a controllers to expose the OData endpoints.
+
+{% tabs %}
+{% highlight cs tabtitle="OrdersController.cs" %}
+using System.Linq;
+using Microsoft.AspNet.OData;
+using System.Web.Http;
+using CustomAdaptor.Models;
+
+namespace CustomAdaptor.Controllers
+{
+    public class OrdersController : ODataController
+    {
+        /// <summary>
+        /// Retrieves all orders.
+        /// </summary>
+        /// <returns>The collection of orders.</returns>
+        [EnableQuery]
+        public IHttpActionResult Get()
+        {
+            var data = OrdersDetails.GetAllRecords().AsQueryable();
+            return Ok(data);
+        }
+    }
+}
+{% endhighlight %}
+{% endtabs %}
+
+**6. 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 ASP.NET MVC Grid to an Custom service extending the ODataV4 service
+
+To integrate the Syncfusion Grid into your ASP.NET MVC project using Visual Studio, follow these steps:
+
+**Step 1:** Install the Syncfusion ASP.NET MVC Package:
+
+To add `ASP.NET MVC` in the application, open the NuGet package manager in Visual Studio (Tools → NuGet Package Manager → Manage NuGet Packages for Solution), search for [Syncfusion.EJ2.MVC5](https://www.nuget.org/packages/Syncfusion.EJ2.MVC5) and install it.
+Alternatively, you can install it using the following Package Manager Console command:
+
+{% tabs %}
+{% highlight C# tabtitle="Package Manager" %}
+
+Install-Package Syncfusion.EJ2.MVC5 -Version {{ site.releaseversion }}
+
+{% endhighlight %}
+{% endtabs %}
+
+**Step 2:** Add Syncfusion ASP.NET MVC namespace
+
+Add `Syncfusion.EJ2` namespace reference in `Web.config` under `Views` folder.
+
+```cs
+<namespaces>
+    <add namespace="Syncfusion.EJ2"/>
+</namespaces>
+```
+
+**Step 3:** Add stylesheet and script resources
+
+To include the required styles and scripts, add the following references inside the `<head>` of `~/Pages/Shared/_Layout.cshtml` file:
+{% tabs %}
+{% highlight cshtml tabtitle="~/_Layout.cshtml" %}
+
+<head>
+    ...
+    <!-- Syncfusion ASP.NET MVC control styles -->
+    <link rel="stylesheet" href="https://cdn.syncfusion.com/ej2/{{ site.ej2version }}/bootstrap5.css" />
+    <!-- Syncfusion ASP.NET MVC control scripts -->
+    <script src="https://cdn.syncfusion.com/ej2/{{ site.ej2version }}/dist/ej2.min.js"></script>
+    <!-- Include the necessary CSS files to style the Syncfusion ASP.NET MVC controls: -->
+    <link href="https://cdn.syncfusion.com/ej2/{{ site.ej2version }}/ej2-base/styles/bootstrap5.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/{{ site.ej2version }}/ej2-grids/styles/bootstrap5.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/{{ site.ej2version }}/ej2-buttons/styles/bootstrap5.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/{{ site.ej2version }}/ej2-popups/styles/bootstrap5.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/{{ site.ej2version }}/ej2-richtexteditor/styles/bootstrap5.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/{{ site.ej2version }}/ej2-navigations/styles/bootstrap5.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/{{ site.ej2version }}/ej2-dropdowns/styles/bootstrap5.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/{{ site.ej2version }}/ej2-lists/styles/bootstrap5.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/{{ site.ej2version }}/ej2-inputs/styles/bootstrap5.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/{{ site.ej2version }}/ej2-calendars/styles/bootstrap5.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/{{ site.ej2version }}/ej2-notifications/styles/bootstrap5.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/{{ site.ej2version }}/ej2-splitbuttons/styles/bootstrap5.css" rel="stylesheet" />
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
+    <script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type="text/javascript"></script>
+</head>
+
+{% endhighlight %}
+{% endtabs %}
+
+**Step 4:** Register Syncfusion Script Manager
+
+To ensure proper script execution, register the Syncfusion Script Manager `EJS().ScriptManager()` at the end of `<body>` in the `~/Pages/Shared/_Layout.cshtml` file as follows.
+
+{% tabs %}
+{% highlight cshtml tabtitle="~/_Layout.cshtml" %}
+<body>
+...
+<!-- Syncfusion ASP.NET MVC Script Manager -->
+@Html.EJS().ScriptManager()
+</body>
+{% endhighlight %}
+{% endtabs %}
+
+**Step 4: Adding Custom Adaptor and Syncfusion Grid**
+
+To create a custom adaptor, extend the ODataV4Adaptor. This custom adaptor will implement three key methods:
+
+* The `processQuery` method is used to change the URL of your API endpoint and set the additional parameters for executing the query.
+
+* The `beforeSend` method is used to send the custom header for `Authorization` in the request header.
+
+* The `processResponse` method is used to set the value for customize the column for new field is `SNo`.
+
+**Implementing the Custom Adaptor**
+
+Define a `DataManager` instance, specifying the API endpoint (https://localhost:xxxx/odata/Orders) in the url property and setting the adaptor to `CustomAdaptor`.
+
+{% tabs %}
+{% highlight html tabtitle="Index.cshtml" %}
+@Html.EJS().Grid("Grid").Columns(col =>
+	{
+		col.Field("SNo").HeaderText("S. No").Width("100").Add();
+		col.Field("OrderID").HeaderText("Order ID").Width("150").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).IsPrimaryKey(true).Add();
+		col.Field("CustomerID").HeaderText("Customer ID").Width("150").Add();
+		col.Field("ShipCity").HeaderText("Ship City").Width("150").Add();
+		col.Field("ShipCountry").HeaderText("Ship Country").Width("150").Add();
+	}).Render()
+<script>
+    class CustomAdaptor extends ejs.data.ODataV4Adaptor {}
+    document.addEventListener("DOMContentLoaded", function () {
+        let grid = document.getElementById("Grid").ej2_instances[0];
+        if (grid) {
+            let dataManager = new ejs.data.DataManager({
+                url: "https://localhost:xxxx/odata/Orders",
+                adaptor: new CustomAdaptor()
+            });
+            grid.dataSource = dataManager;
+        }
+    });
+</script>
+{% 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**.
+
+## 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="WebApiConfig.cs" %}
+...
+// Enable OData.
+config.MapODataServiceRoute(
+    routeName: "ODataRoute",
+    routePrefix: "odata",
+    model: GetEdmModel()
+);
+// Enable Query Support.
+config.Count().Filter(); // Handles searching operation.
+...
+{% endhighlight %}
+{% highlight html tabtitle="Index.cshtml" %}
+@Html.EJS().Grid("Grid").Columns(col =>
+{
+    col.Field("OrderID").HeaderText("Order ID").Width("150").IsPrimaryKey(true).Add();
+    col.Field("CustomerID").HeaderText("Customer ID").Width("150").Add();
+    col.Field("EmployeeID").HeaderText("Employee ID").Width("150").Add();
+    col.Field("ShipCountry").HeaderText("Ship Country").Width("150").Add();
+}).Toolbar(new List<string>() { "Search" }).Render()
+<script>
+    class CustomAdaptor extends ejs.data.ODataV4Adaptor { }
+    document.addEventListener("DOMContentLoaded", function () {
+        let grid = document.getElementById("Grid").ej2_instances[0];
+        if (grid) {
+            let dataManager = new ejs.data.DataManager({
+                url: "/odata/Orders",
+                adaptor: new CustomAdaptor()
+            });
+            grid.dataSource = dataManager;
+        }
+    });
+</script>
+{% endhighlight %}
+{% endtabs %}
+
+![Searching query](../../images/adaptors/ODataV4Adaptor/odatav4-adaptor-searching.png)
+
+## 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="WebApiConfig.cs" %}
+...
+// Enable OData.
+config.MapODataServiceRoute(
+    routeName: "ODataRoute",
+    routePrefix: "odata",
+    model: GetEdmModel()
+);
+// Enable Query Support.
+config.Count().Filter(); // Handles filtering  operation.
+...
+{% endhighlight %}
+{% highlight html tabtitle="Index.cshtml" %}
+@Html.EJS().Grid("Grid").Columns(col =>
+{
+    col.Field("OrderID").HeaderText("Order ID").Width("150").IsPrimaryKey(true).Add();
+    col.Field("CustomerID").HeaderText("Customer ID").Width("150").Add();
+    col.Field("EmployeeID").HeaderText("Employee ID").Width("150").Add();
+    col.Field("ShipCountry").HeaderText("Ship Country").Width("150").Add();
+}).AllowFiltering().Render()
+<script>
+    class CustomAdaptor extends ejs.data.ODataV4Adaptor { }
+    document.addEventListener("DOMContentLoaded", function () {
+        let grid = document.getElementById("Grid").ej2_instances[0];
+        if (grid) {
+            let dataManager = new ejs.data.DataManager({
+                url: "/odata/Orders",
+                adaptor: new CustomAdaptor()
+            });
+            grid.dataSource = dataManager;
+        }
+    });
+</script>
+{% endhighlight %}
+{% endtabs %}
+
+**Single column filtering**
+![Filtering query](../../images/adaptors/ODataV4Adaptor/odatav4-adaptor-filtering.png)
+**Multi column filtering**
+![Filtering query](../../images/adaptors/ODataV4Adaptor/odatav4-adaptor-multi-column-filtering.png)
+
+## 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="WebApiConfig.cs" %}
+...
+// Enable OData
+config.MapODataServiceRoute(
+    routeName: "ODataRoute",
+    routePrefix: "odata",
+    model: GetEdmModel()
+);
+// Enable Query Support
+config.Count().OrderBy(); // Handles sorting  operation.
+...
+{% endhighlight %}
+{% highlight html tabtitle="Index.cshtml" %}
+
+@Html.EJS().Grid("Grid").Columns(col =>
+{
+    col.Field("OrderID").HeaderText("Order ID").Width("150").IsPrimaryKey(true).Add();
+    col.Field("CustomerID").HeaderText("Customer ID").Width("150").Add();
+    col.Field("EmployeeID").HeaderText("Employee ID").Width("150").Add();
+    col.Field("ShipCountry").HeaderText("Ship Country").Width("150").Add();
+}).AllowSorting().Render()
+<script>
+    class CustomAdaptor extends ejs.data.ODataV4Adaptor { }
+    document.addEventListener("DOMContentLoaded", function () {
+        let grid = document.getElementById("Grid").ej2_instances[0];
+        if (grid) {
+            let dataManager = new ejs.data.DataManager({
+                url: "/odata/Orders",
+                adaptor: new CustomAdaptor()
+            });
+            grid.dataSource = dataManager;
+        }
+    });
+</script>
+{% endhighlight %}
+{% endtabs %}
+
+**Single column sorting**
+
+![Single column sorting query](../../images/adaptors/ODataV4Adaptor/odatav4-adaptor-sorting.png)
+
+**Multi column sorting**
+
+![Multi column sorting query](../../images/adaptors/ODataV4Adaptor/odatav4-adaptor-multi-column-sorting.png)
+
+## 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="WebApiConfig.cs" %}
+....
+// Enable OData
+config.MapODataServiceRoute(
+    routeName: "ODataRoute",
+    routePrefix: "odata",
+    model: GetEdmModel()
+);
+// Enable Query Support
+config.Count().MaxTop(null); // Handles paging  operation.
+....
+{% endhighlight %}
+{% highlight html tabtitle="Index.cshtml" %}
+
+@Html.EJS().Grid("Grid").Columns(col =>
+{
+    col.Field("OrderID").HeaderText("Order ID").Width("150").IsPrimaryKey(true).Add();
+    col.Field("CustomerID").HeaderText("Customer ID").Width("150").Add();
+    col.Field("EmployeeID").HeaderText("Employee ID").Width("150").Add();
+    col.Field("ShipCountry").HeaderText("Ship Country").Width("150").Add();
+}).AllowPaging().Render()
+<script>
+    class CustomAdaptor extends ejs.data.ODataV4Adaptor { }
+    document.addEventListener("DOMContentLoaded", function () {
+        let grid = document.getElementById("Grid").ej2_instances[0];
+        if (grid) {
+            let dataManager = new ejs.data.DataManager({
+                url: "/odata/Orders",
+                adaptor: new CustomAdaptor()
+            });
+            grid.dataSource = dataManager;
+        }
+    });
+</script>
+{% endhighlight %}
+{% endtabs %}
+
+![paging query](../../images/adaptors/ODataV4Adaptor/odatav4-adaptor-paging.png)
+
+## 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/aspnetmvc/documentation/grid/editing/edit) and utilize the sample implementation of the `OrdersController` in your MVC application. This controller handles HTTP requests for CRUD operations such as GET, POST, PATCH, and DELETE.
+
+To enable CRUD operations in the Syncfusion Grid within an ASP.NET MVC application, follow the below steps:
+
+{% tabs %}
+{% highlight html tabtitle="Index.cshtml" %}
+@using Syncfusion.EJ2
+
+@Html.EJS().Grid("Grid").EditSettings(edit => edit.AllowAdding(true).AllowEditing(true).AllowDeleting(true).Mode(Syncfusion.EJ2.Grids.EditMode.Normal)).Toolbar(new List<string>
+	() { "Add", "Edit", "Delete", "Update", "Cancel" }).Columns(col =>
+	{
+		col.Field("OrderID").HeaderText("Order ID").Width("150").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).IsPrimaryKey(true).Add();
+		col.Field("CustomerID").HeaderText("Customer ID").Width("150").Add();
+		col.Field("ShipCity").HeaderText("Ship City").Width("150").Add();
+		col.Field("ShipCountry").HeaderText("Ship Country").Width("150").Add();
+	}).Render()
+	<script>
+		class CustomAdaptor extends ejs.data.ODataV4Adaptor { }
+		document.addEventListener("DOMContentLoaded", function () {
+			let grid = document.getElementById("Grid").ej2_instances[0];
+			if (grid) {
+				let dataManager = new ejs.data.DataManager({
+					url: "/odata/Orders",
+					adaptor: new CustomAdaptor()
+				});
+				grid.dataSource = dataManager;
+			}
+		});
+	</script>
+{% endhighlight %}
+{% endtabs %}
+
+> Normal/Inline editing is the default edit mode for the Grid component. To enable CRUD operations, ensure that the [isPrimaryKey](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Grids.GridColumn.html#Syncfusion_EJ2_Grids_GridColumn_IsPrimaryKey)property is set to **true** for a specific Grid column, ensuring that its value is unique.
path: ej2-asp-core-mvc/grid/EJ2_ASP.MVC/connecting-to-adaptors/custom-adaptor.md
user: login: NithyaSivaprakasam
body: changed
created_at: 2025-03-11T05:39:18Z
author_association: CONTRIBUTOR
diff_hunk: @@ -0,0 +1,758 @@
+---
+layout: post
+title: Bind data & perform CRUD action with CustomAdaptor in Syncfusion Grid
+description: Learn here all about Bind data and perform CRUD action with CustomAdaptor in Syncfusion ##Platform_Name## Grid of Syncfusion Essential JS 2 and more.
+control: Custom Adaptor
+platform: ej2-asp-core-mvc
+documentation: ug
+domainurl: ##DomainURL##
+---
+
+# CustomAdaptor in Syncfusion ASP.NET Core Grid
+
+The `CustomAdaptor` in the Syncfusion ASP.NET Core Grid allows to create their own custom adaptors by extending the built-in adaptors. The custom adaptor involves handling the built-in adaptor query process, request and response. The `CustomAdaptor` to be allows extending the OData V4 services, enabling efficient data fetching and manipulation. By default, there are three method for CustomAdaptor built-in methods.
path: ej2-asp-core-mvc/grid/EJ2_ASP.NETCORE/connecting-to-adaptors/custom-adaptor.md
user: login: farveensulthana
body: CustomAdaptor property doesn't contain backtick
created_at: 2025-03-11T11:17:18Z
author_association: CONTRIBUTOR
diff_hunk: @@ -0,0 +1,758 @@
+---
+layout: post
+title: Bind data & perform CRUD action with CustomAdaptor in Syncfusion Grid
+description: Learn here all about Bind data and perform CRUD action with CustomAdaptor in Syncfusion ##Platform_Name## Grid of Syncfusion Essential JS 2 and more.
+control: Custom Adaptor
+platform: ej2-asp-core-mvc
+documentation: ug
+domainurl: ##DomainURL##
+---
+
+# CustomAdaptor in Syncfusion ASP.NET Core Grid
+
+The `CustomAdaptor` in the Syncfusion ASP.NET Core Grid allows to create their own custom adaptors by extending the built-in adaptors. The custom adaptor involves handling the built-in adaptor query process, request and response. The `CustomAdaptor` to be allows extending the OData V4 services, enabling efficient data fetching and manipulation. By default, there are three method for CustomAdaptor built-in methods.
+
+## Types of CustomAdaptor methods
+
+There are three types of methods in custom adaptors.
+
+### ProcessQuery
+
+The `ProcessQuery` method handles the execution of a query sent to a `DataSource`, such as a database or custom data service. This query is responsible for performing operations like data retrieval, insertion, updating, or deletion. The `ProcessQuery` method accepts two arguments: 
path: ej2-asp-core-mvc/grid/EJ2_ASP.NETCORE/connecting-to-adaptors/custom-adaptor.md
user: login: farveensulthana
body: why DataSource defined with upper casing 
created_at: 2025-03-11T11:43:27Z
author_association: CONTRIBUTOR
diff_hunk: @@ -0,0 +1,758 @@
+---
+layout: post
+title: Bind data & perform CRUD action with CustomAdaptor in Syncfusion Grid
+description: Learn here all about Bind data and perform CRUD action with CustomAdaptor in Syncfusion ##Platform_Name## Grid of Syncfusion Essential JS 2 and more.
+control: Custom Adaptor
+platform: ej2-asp-core-mvc
+documentation: ug
+domainurl: ##DomainURL##
+---
+
+# CustomAdaptor in Syncfusion ASP.NET Core Grid
+
+The `CustomAdaptor` in the Syncfusion ASP.NET Core Grid allows to create their own custom adaptors by extending the built-in adaptors. The custom adaptor involves handling the built-in adaptor query process, request and response. The `CustomAdaptor` to be allows extending the OData V4 services, enabling efficient data fetching and manipulation. By default, there are three method for CustomAdaptor built-in methods.
+
+## Types of CustomAdaptor methods
+
+There are three types of methods in custom adaptors.
+
+### ProcessQuery
+
+The `ProcessQuery` method handles the execution of a query sent to a `DataSource`, such as a database or custom data service. This query is responsible for performing operations like data retrieval, insertion, updating, or deletion. The `ProcessQuery` method accepts two arguments: 
path: ej2-asp-core-mvc/grid/EJ2_ASP.NETCORE/connecting-to-adaptors/custom-adaptor.md
user: login: farveensulthana
body: mention processResponse query in lower casing 
created_at: 2025-03-11T12:13:05Z
author_association: CONTRIBUTOR
diff_hunk: @@ -0,0 +1,758 @@
+---
+layout: post
+title: Bind data & perform CRUD action with CustomAdaptor in Syncfusion Grid
+description: Learn here all about Bind data and perform CRUD action with CustomAdaptor in Syncfusion ##Platform_Name## Grid of Syncfusion Essential JS 2 and more.
+control: Custom Adaptor
+platform: ej2-asp-core-mvc
+documentation: ug
+domainurl: ##DomainURL##
+---
+
+# CustomAdaptor in Syncfusion ASP.NET Core Grid
+
+The `CustomAdaptor` in the Syncfusion ASP.NET Core Grid allows to create their own custom adaptors by extending the built-in adaptors. The custom adaptor involves handling the built-in adaptor query process, request and response. The `CustomAdaptor` to be allows extending the OData V4 services, enabling efficient data fetching and manipulation. By default, there are three method for CustomAdaptor built-in methods.
+
+## Types of CustomAdaptor methods
+
+There are three types of methods in custom adaptors.
+
+### ProcessQuery
+
+The `ProcessQuery` method handles the execution of a query sent to a `DataSource`, such as a database or custom data service. This query is responsible for performing operations like data retrieval, insertion, updating, or deletion. The `ProcessQuery` method accepts two arguments: 
+
+* `DataManager`: Used to modify the URL dynamically.
+
+* `Query`: Allows setting additional parameter values or modifying queries such as sorting, filtering, and grouping, etc.
+
+**DataManager**
+
+![DataManager](../../images/adaptors/customadaptor/custom-adaptor-datamanager.png)
+
+**Query**
+
+![Query](../../images/adaptors/customadaptor/custom-adaptor-query.png)
+
+```js
+processQuery(dm, query) {
+    query.addParams('Syncfusion in ASP.NET Core Grid', 'true'); // Add additional parameter.
+    return super.processQuery.apply(this, arguments);
+}
+```
+
+### beforeSend
+
+The `beforeSend` method is executed before a request is sent to the server. This function allows modifying parameters, request headers, and data, or performing validation before the request is processed. It accepts three arguments:
+
+* `DataManager`: Provides the `dataSource` and `adaptor` value.
+
+* `Request`: Used to send custom headers, such as setting the `Authorization` header.
+
+* `Settings`: An optional argument that allows additional configurations.
+
+**DataManager**
+
+![DataManager](../../images/adaptors/customadaptor/custom-adaptor-datamanager.png)
+
+**Request**
+
+![Request](../../images/adaptors/customadaptor/custom-adaptor-request.png)
+
+**Settings**
+
+![Settings](../../images/adaptors/customadaptor/custom-adaptor-fetch.png)
+
+```js
+beforeSend(dm, request, settings) {
+    request.headers.set('Authorization', `true`);
+    return super.beforeSend(dm, request, settings);
+}
+```
+
+### processResponse
+
+The `processResponse` method handles the response received from the server after an asynchronous request. It is responsible for parsing the response data, managing errors, and preparing the data for further processing. This method can accept multiple optional arguments, allowing customization based on specific requirements.
+
+```js
+processResponse(data, ds, query, xhr, request, changes) {
+    let i =0;
+    const original = super.processResponse(data, ds, query, xhr, request, changes);
+    // Adding serial number.
+    if (original.result){
+        original.result.forEach((item) => ej.base.setValue('SNo', ++i, item));
+    }
+return original;
+}
+```
+
+This guide provides detailed instructions on binding data and performing CRUD (Create, Read, Update, Delete) actions using the `CustomAdaptor` by extending the `ODataV4Adaptor` in your Syncfusion ASP.NET Core Grid.
+ 
+## Creating an Custom service
+
+To configure a server with Syncfusion ASP.NET Core Grid, you need to follow the below steps:
+
+**1. Project Creation:**
+
+Open Visual Studio and create an ASP.NET Core project named **CustomAdaptor**. To create an ASP.NET Core application, follow the documentation [link](https://learn.microsoft.com/en-us/aspnet/core/tutorials/razor-pages/razor-pages-start?view=aspnetcore-8.0&tabs=visual-studio#create-a-razor-pages-web-app) 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](https://www.nuget.org/packages?q=Microsoft.AspNetCore.OData) NuGet package.
+
+**3. Model Class Creation:**
+
+Create a model class named `OrdersDetails.cs` inside the **Models** folder.
+
+{% tabs %}
+{% highlight cs tabtitle="OrdersDetails.cs" %}
+
+ namespace CustomAdaptor.Models
+{
+  public class OrdersDetails
+  {
+      public static List<OrdersDetails> order = new List<OrdersDetails>();
+      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<OrdersDetails> 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;
+      }
+      [Key]
+      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 %}
+
+**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<T>` method, where `OrdersDetails` represents the CLR type containing order details. 
+
+```cs
+using CustomAdaptor.Models;
+using Microsoft.AspNetCore.OData;
+using Microsoft.OData.ModelBuilder;
+
+// Create an ODataConventionModelBuilder to build the OData model.
+var modelBuilder = new ODataConventionModelBuilder();
+
+// Register the "Orders" entity set with the OData model builder.
+modelBuilder.EntitySet<OrdersDetails>("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 CustomAdaptor.Models;
+
+namespace CustomAdaptor.Controllers
+{
+    [Route("[controller]")]
+    [ApiController]
+    public class OrdersController : ControllerBase
+    {
+        /// <summary>
+        /// Retrieves all orders.
+        /// </summary>
+        /// <returns>The collection of orders.</returns>
+        [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 ASP.NET Core Grid to an Custom service extending the ODataV4 service
+
+To integrate the Syncfusion Grid into your ASP.NET Core project using Visual Studio, follow these steps:
+
+**Step 1:** Install the Syncfusion ASP.NET Core Package:
+
+To add `ASP.NET Core` in the application, open the NuGet package manager in Visual Studio (Tools → NuGet Package Manager → Manage NuGet Packages for Solution), search for [Syncfusion.EJ2.AspNet.Core](https://www.nuget.org/packages/Syncfusion.EJ2.AspNet.Core) and install it.
+Alternatively, you can install it using the following Package Manager Console command:
+
+{% tabs %}
+{% highlight C# tabtitle="Package Manager" %}
+
+Install-Package Syncfusion.EJ2.AspNet.Core -Version {{ site.releaseversion }}
+
+{% endhighlight %}
+{% endtabs %}
+
+**Step 2:** Add Syncfusion ASP.NET Core Tag Helper
+
+Open `~/Pages/_ViewImports.cshtml` file and import the `Syncfusion.EJ2` TagHelper.
+
+{% tabs %}
+{% highlight C# tabtitle="~/_ViewImports.cshtml" %}
+
+@addTagHelper *, Syncfusion.EJ2
+
+{% endhighlight %}
+{% endtabs %}
+
+**Step 3:** Add Stylesheets and Script Resources
+
+To include the required styles and scripts, add the following references inside the `<head>` of `~/Pages/Shared/_Layout.cshtml` file:
+
+{% tabs %}
+{% highlight cshtml tabtitle="~/_Layout.cshtml" %}
+
+<head>
+    ...
+    <!-- Syncfusion ASP.NET Core control styles -->
+    <link rel="stylesheet" href="https://cdn.syncfusion.com/ej2/{{ site.ej2version }}/bootstrap5.css" />
+    <!-- Syncfusion ASP.NET Core control scripts -->
+    <script src="https://cdn.syncfusion.com/ej2/{{ site.ej2version }}/dist/ej2.min.js"></script>
+    <!-- Include the necessary CSS files to style the Syncfusion ASP.NET Core controls-->
+    <link href="https://cdn.syncfusion.com/ej2/{{ site.ej2version }}/ej2-base/styles/bootstrap5.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/{{ site.ej2version }}/ej2-grids/styles/bootstrap5.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/{{ site.ej2version }}/ej2-buttons/styles/bootstrap5.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/{{ site.ej2version }}/ej2-popups/styles/bootstrap5.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/{{ site.ej2version }}/ej2-richtexteditor/styles/bootstrap5.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/{{ site.ej2version }}/ej2-navigations/styles/bootstrap5.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/{{ site.ej2version }}/ej2-dropdowns/styles/bootstrap5.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/{{ site.ej2version }}/ej2-lists/styles/bootstrap5.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/{{ site.ej2version }}/ej2-inputs/styles/bootstrap5.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/{{ site.ej2version }}/ej2-calendars/styles/bootstrap5.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/{{ site.ej2version }}/ej2-notifications/styles/bootstrap5.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/{{ site.ej2version }}/ej2-splitbuttons/styles/bootstrap5.css" rel="stylesheet" />
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
+    <script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type="text/javascript"></script>
+</head>
+
+{% endhighlight %}
+{% endtabs %}
+
+**Step 4:** Register Syncfusion Script Manager:
+
+To ensure proper script execution, register the Syncfusion Script Manager `<ejs-scripts>` at the end of the `<body>` tag in your ASP.NET Core application as follows:
+
+{% tabs %}
+{% highlight cshtml tabtitle="~/_Layout.cshtml" %}
+<body>
+    ...
+    <!-- Syncfusion ASP.NET Core Script Manager -->
+    <ejs-scripts></ejs-scripts>
+</body>
+{% endhighlight %}
+{% endtabs %}
+
+**Step 5: Adding Custom Adaptor**
+
+To create a custom adaptor, extend the ODataV4Adaptor. This custom adaptor will implement three key methods: `processQuery`, `beforeSend`, and `processResponse`.
+
+* The `processQuery` method modifies the API endpoint URL and sets additional parameters required for executing the query.
+
+* The `beforeSend` method adds custom headers, such as the `Authorization` header, before sending the request.
+
+* The `processResponse` method customizes the response by modifying data, such as adding a new field (`SNo`) to the dataset.
+
+```js
+<script>
+	class CustomAdaptor extends ej.data.ODataV4Adaptor {
+		processResponse(data, ds, query, xhr, request, changes) {
+			let i = 0;
+			const original = super.processResponse(data, ds, query, xhr, request, changes);
+			// Adding serial number to each row.
+			if (original.result) {
+				original.result.forEach((item) => ej.base.setValue('SNo', ++i, item));
+			}
+			return original;
+		}
+		beforeSend(dm, request, settings) {
+			request.headers.set('Authorization', `true`);
+			super.beforeSend(dm, request, settings);
+		}
+		processQuery(dm, query) {
+			dm.dataSource.url = 'https://localhost:xxxx/odata/orders'; // Update with your API endpoint.
+			query.addParams('Syncfusion in ASP.NET Core Grid', 'true'); // Add additional parameters.
+			return super.processQuery.apply(this, arguments);
+		}
+	}
+	document.addEventListener("DOMContentLoaded", function () {
+		let grid = document.getElementById("Grid").ej2_instances[0];
+		if (grid) {
+			let dataManager = new ej.data.DataManager({
+				url: "https://localhost:xxxx/odata/Orders", // Replace `xxxx` with your actual localhost port number.
+				adaptor: new CustomAdaptor(),
+			});
+			grid.dataSource = dataManager;
+		}
+	});
+</script>
+```
+
+**Step 6: Adding Syncfusion Grid**
+
+Define a `DataManager` instance, specifying the API endpoint (https://localhost:xxxx/odata/Orders) in the url property and setting the adaptor to `CustomAdaptor`.
+
+{% tabs %}
+{% highlight html tabtitle="Index.cshtml" %}
+@page
+@model IndexModel
+@{
+	ViewData["Title"] = "Home page";
+}
+<div>
+	<ejs-grid id="Grid" height="315">
+		<e-grid-columns>
+			<e-grid-column field="SNo" headerText="S.No" width="120" textAlign="Right"></e-grid-column>
+			<e-grid-column field="OrderID" headerText="Order ID" width="120" textAlign="Right" isPrimaryKey="true"></e-grid-column>
+			<e-grid-column field="CustomerID" headerText="Customer ID" width="150"></e-grid-column>
+			<e-grid-column field="EmployeeID" headerText="Employee ID" width="150"></e-grid-column>
+			<e-grid-column field="ShipCountry" headerText="Ship Country" width="150"></e-grid-column>
+		</e-grid-columns>
+	</ejs-grid>
+</div>
+<script>
+	class CustomAdaptor extends ej.data.ODataV4Adaptor {}
+	document.addEventListener("DOMContentLoaded", function () {
+		let grid = document.getElementById("Grid").ej2_instances[0];
+		if (grid) {
+			let dataManager = new ej.data.DataManager({
+				url: "https://localhost:xxxx/odata/Orders", // Replace `xxxx` with your actual localhost port number.
+				adaptor: new CustomAdaptor()
+			});
+
+			grid.dataSource = dataManager;
+		}
+	});
+</script>
+{% endhighlight %}
+{% endtabs %}
+
+**Step 7:** Configure the server:
+
+In the `Program.cs` file of your project, configure the server to serve static files and handle API requests by adding the following code:
+
+```cs
+builder.Services.AddRazorPages();
+builder.Services.AddControllers();
+
+var app = builder.Build();
+
+app.MapRazorPages();
+app.MapControllers();
+```
+**Step 8:** Run the Project:
+
+Run the project in Visual Studio, and the Syncfusion ASP.NET Core Grid will successfully fetch data from the API service.
+
+> 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).
+
+## 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<OrdersDetails>("Orders");
+
+// Add services to the container.
+
+// Add controllers with OData support to the service collection.
+builder.Services.AddControllers().AddOData(
+    options => options
+        .Count()
+        .Filter() 
+        .AddRouteComponents("odata", modelBuilder.GetEdmModel()));
+{% endhighlight %}
+{% highlight ts tabtitle="Index.cshtml" %}
path: ej2-asp-core-mvc/grid/EJ2_ASP.NETCORE/connecting-to-adaptors/custom-adaptor.md
user: login: farveensulthana
body: is this razor page
created_at: 2025-03-11T12:34:49Z
author_association: CONTRIBUTOR

PR comments:
user: login: SyncfusionBuild
created_at: 2025-03-05T05:48:46Z
body: **Build Status: INQUEUE :clock3:<br/>Build Location: [942316-CustomAdaptor](https://ci.syncfusion.com/job/Content/job/ej2-asp-core-mvc-docs/4265/console)**
author_association: COLLABORATOR
user: login: SyncfusionBuild
created_at: 2025-03-05T05:52:06Z
body: **Build Status: INPROGRESS :arrows_clockwise:<br/>Build Location: [942316-CustomAdaptor](https://ci.syncfusion.com/job/Content/job/ej2-asp-core-mvc-docs/4265/console)**
author_association: COLLABORATOR
user: login: SyncfusionBuild
created_at: 2025-03-05T05:57:08Z
body: **CI Status: FAILURE :x:<br/>Source Compilation: SUCCESS :white_check_mark:<br/>Failure Reason: [CI Failure with violation](https://ci.syncfusion.com/job/Content/job/ej2-asp-core-mvc-docs/4265/artifact/cireports/)<br/>Build Location: [942316-CustomAdaptor](https://ci.syncfusion.com/job/Content/job/ej2-asp-core-mvc-docs/4265/)<br/>Image Alt Text Error(s): [0](https://ci.syncfusion.com/job/Content/job/ej2-asp-core-mvc-docs/4265/artifact/cireports/ImageValidation/AltTextValidation.html)<br/>Image Size Error(s): [10](https://ci.syncfusion.com/job/Content/job/ej2-asp-core-mvc-docs/4265/artifact/cireports/ImageValidation/ImageSizeValidation.html)<br/>Image Name Error(s): [0](https://ci.syncfusion.com/job/Content/job/ej2-asp-core-mvc-docs/4265/artifact/cireports/ImageValidation/ImageNameValidation.html)<br/>FT Layout Syntax Error(s): [0](https://ci.syncfusion.com/job/Content/job/ej2-asp-core-mvc-docs/4265/artifact/cireports/FTLayoutSyntaxValidation/FTStructureValidation.html)<br/>Front matter Error(s): [0](https://ci.syncfusion.com/job/Content/job/ej2-asp-core-mvc-docs/4265/artifact/cireports/FrontMatterValidation/FrontMatterValidation.html)<br/>File Path Error(s): [1](https://ci.syncfusion.com/job/Content/job/ej2-asp-core-mvc-docs/4265/artifact/cireports/FilePathValidation/FilePathValidation.html)<br/>CodeSnippet File Path Missing Error(s): [0](https://ci.syncfusion.com/job/Content/job/ej2-asp-core-mvc-docs/4265/artifact/cireports/CodeSnippetFilePathValidation/CodeSnippetFilePathValidation.html)<br/>Toc Anchor Tags Validation Error(s): [0](https://ci.syncfusion.com/job/Content/job/ej2-asp-core-mvc-docs/4265/artifact/cireports/AnchorTagsValidation/AnchorTagsValidation.html)<br/>MD Tag Validation Error(s): [0](https://ci.syncfusion.com/job/Content/job/ej2-asp-core-mvc-docs/4265/artifact/cireports/MDTagsValidation/MDTagsValidation.html)<br/>**
author_association: COLLABORATOR
user: login: SyncfusionBuild
created_at: 2025-03-05T06:04:02Z
body: **Build Status: INPROGRESS :arrows_clockwise:<br/>Build Location: [942316-CustomAdaptor](https://ci.syncfusion.com/job/Content/job/ej2-asp-core-mvc-docs/4266/console)**
author_association: COLLABORATOR
user: login: SyncfusionBuild
created_at: 2025-03-05T06:06:32Z
body: **CI Status: FAILURE :x:<br/>Source Compilation: SUCCESS :white_check_mark:<br/>Failure Reason: [CI Failure with violation](https://ci.syncfusion.com/job/Content/job/ej2-asp-core-mvc-docs/4266/artifact/cireports/)<br/>Build Location: [942316-CustomAdaptor](https://ci.syncfusion.com/job/Content/job/ej2-asp-core-mvc-docs/4266/)<br/>Image Alt Text Error(s): [0](https://ci.syncfusion.com/job/Content/job/ej2-asp-core-mvc-docs/4266/artifact/cireports/ImageValidation/AltTextValidation.html)<br/>Image Size Error(s): [1](https://ci.syncfusion.com/job/Content/job/ej2-asp-core-mvc-docs/4266/artifact/cireports/ImageValidation/ImageSizeValidation.html)<br/>Image Name Error(s): [0](https://ci.syncfusion.com/job/Content/job/ej2-asp-core-mvc-docs/4266/artifact/cireports/ImageValidation/ImageNameValidation.html)<br/>FT Layout Syntax Error(s): [0](https://ci.syncfusion.com/job/Content/job/ej2-asp-core-mvc-docs/4266/artifact/cireports/FTLayoutSyntaxValidation/FTStructureValidation.html)<br/>Front matter Error(s): [0](https://ci.syncfusion.com/job/Content/job/ej2-asp-core-mvc-docs/4266/artifact/cireports/FrontMatterValidation/FrontMatterValidation.html)<br/>File Path Error(s): [1](https://ci.syncfusion.com/job/Content/job/ej2-asp-core-mvc-docs/4266/artifact/cireports/FilePathValidation/FilePathValidation.html)<br/>CodeSnippet File Path Missing Error(s): [0](https://ci.syncfusion.com/job/Content/job/ej2-asp-core-mvc-docs/4266/artifact/cireports/CodeSnippetFilePathValidation/CodeSnippetFilePathValidation.html)<br/>Toc Anchor Tags Validation Error(s): [0](https://ci.syncfusion.com/job/Content/job/ej2-asp-core-mvc-docs/4266/artifact/cireports/AnchorTagsValidation/AnchorTagsValidation.html)<br/>MD Tag Validation Error(s): [0](https://ci.syncfusion.com/job/Content/job/ej2-asp-core-mvc-docs/4266/artifact/cireports/MDTagsValidation/MDTagsValidation.html)<br/>**
author_association: COLLABORATOR
user: login: SyncfusionBuild
created_at: 2025-03-05T06:07:59Z
body: The running **[CI Job](https://ci.syncfusion.com/job/Content/job/ej2-asp-core-mvc-docs/4267/console)** is terminated due to changes committed on the source branch for this Merge Request and CI triggered for latest commit.
author_association: COLLABORATOR
user: login: SyncfusionBuild
created_at: 2025-03-05T06:08:12Z
body: **CI Status: ABORTED :x:<br/>Source Compilation: Not Started :x:<br/>Build Location: [942316-CustomAdaptor](https://ci.syncfusion.com/job/Content/job/ej2-asp-core-mvc-docs/4267/)<br/>**
author_association: COLLABORATOR
user: login: SyncfusionBuild
created_at: 2025-03-05T06:08:51Z
body: **Build Status: INPROGRESS :arrows_clockwise:<br/>Build Location: [942316-CustomAdaptor](https://ci.syncfusion.com/job/Content/job/ej2-asp-core-mvc-docs/4268/console)**
author_association: COLLABORATOR
user: login: SyncfusionBuild
created_at: 2025-03-05T06:11:22Z
body: **CI Status: FAILURE :x:<br/>Source Compilation: SUCCESS :white_check_mark:<br/>Failure Reason: [CI Failure with violation](https://ci.syncfusion.com/job/Content/job/ej2-asp-core-mvc-docs/4268/artifact/cireports/)<br/>Build Location: [942316-CustomAdaptor](https://ci.syncfusion.com/job/Content/job/ej2-asp-core-mvc-docs/4268/)<br/>Image Alt Text Error(s): [0](https://ci.syncfusion.com/job/Content/job/ej2-asp-core-mvc-docs/4268/artifact/cireports/ImageValidation/AltTextValidation.html)<br/>Image Size Error(s): [1](https://ci.syncfusion.com/job/Content/job/ej2-asp-core-mvc-docs/4268/artifact/cireports/ImageValidation/ImageSizeValidation.html)<br/>Image Name Error(s): [0](https://ci.syncfusion.com/job/Content/job/ej2-asp-core-mvc-docs/4268/artifact/cireports/ImageValidation/ImageNameValidation.html)<br/>FT Layout Syntax Error(s): [0](https://ci.syncfusion.com/job/Content/job/ej2-asp-core-mvc-docs/4268/artifact/cireports/FTLayoutSyntaxValidation/FTStructureValidation.html)<br/>Front matter Error(s): [0](https://ci.syncfusion.com/job/Content/job/ej2-asp-core-mvc-docs/4268/artifact/cireports/FrontMatterValidation/FrontMatterValidation.html)<br/>File Path Error(s): [2](https://ci.syncfusion.com/job/Content/job/ej2-asp-core-mvc-docs/4268/artifact/cireports/FilePathValidation/FilePathValidation.html)<br/>CodeSnippet File Path Missing Error(s): [0](https://ci.syncfusion.com/job/Content/job/ej2-asp-core-mvc-docs/4268/artifact/cireports/CodeSnippetFilePathValidation/CodeSnippetFilePathValidation.html)<br/>Toc Anchor Tags Validation Error(s): [0](https://ci.syncfusion.com/job/Content/job/ej2-asp-core-mvc-docs/4268/artifact/cireports/AnchorTagsValidation/AnchorTagsValidation.html)<br/>MD Tag Validation Error(s): [0](https://ci.syncfusion.com/job/Content/job/ej2-asp-core-mvc-docs/4268/artifact/cireports/MDTagsValidation/MDTagsValidation.html)<br/>**
author_association: COLLABORATOR
user: login: SyncfusionBuild
created_at: 2025-03-10T18:20:29Z
body: **Build Status: INPROGRESS :arrows_clockwise:<br/>Build Location: [942316-CustomAdaptor](https://ci.syncfusion.com/job/Content/job/ej2-asp-core-mvc-docs/4352/console)**
author_association: COLLABORATOR
user: login: SyncfusionBuild
created_at: 2025-03-10T18:35:29Z
body: **CI Status: FAILURE :x:<br/>Source Compilation: SUCCESS :white_check_mark:<br/>Failure Reason: [CI Failure with violation](https://ci.syncfusion.com/job/Content/job/ej2-asp-core-mvc-docs/4352/artifact/cireports/)<br/>Build Location: [942316-CustomAdaptor](https://ci.syncfusion.com/job/Content/job/ej2-asp-core-mvc-docs/4352/)<br/>Image Alt Text Error(s): [0](https://ci.syncfusion.com/job/Content/job/ej2-asp-core-mvc-docs/4352/artifact/cireports/ImageValidation/AltTextValidation.html)<br/>Image Size Error(s): [1](https://ci.syncfusion.com/job/Content/job/ej2-asp-core-mvc-docs/4352/artifact/cireports/ImageValidation/ImageSizeValidation.html)<br/>Image Name Error(s): [0](https://ci.syncfusion.com/job/Content/job/ej2-asp-core-mvc-docs/4352/artifact/cireports/ImageValidation/ImageNameValidation.html)<br/>FT Layout Syntax Error(s): [0](https://ci.syncfusion.com/job/Content/job/ej2-asp-core-mvc-docs/4352/artifact/cireports/FTLayoutSyntaxValidation/FTStructureValidation.html)<br/>Front matter Error(s): [0](https://ci.syncfusion.com/job/Content/job/ej2-asp-core-mvc-docs/4352/artifact/cireports/FrontMatterValidation/FrontMatterValidation.html)<br/>File Path Error(s): [0](https://ci.syncfusion.com/job/Content/job/ej2-asp-core-mvc-docs/4352/artifact/cireports/FilePathValidation/FilePathValidation.html)<br/>CodeSnippet File Path Missing Error(s): [0](https://ci.syncfusion.com/job/Content/job/ej2-asp-core-mvc-docs/4352/artifact/cireports/CodeSnippetFilePathValidation/CodeSnippetFilePathValidation.html)<br/>Toc Anchor Tags Validation Error(s): [0](https://ci.syncfusion.com/job/Content/job/ej2-asp-core-mvc-docs/4352/artifact/cireports/AnchorTagsValidation/AnchorTagsValidation.html)<br/>MD Tag Validation Error(s): [0](https://ci.syncfusion.com/job/Content/job/ej2-asp-core-mvc-docs/4352/artifact/cireports/MDTagsValidation/MDTagsValidation.html)<br/>**
author_association: COLLABORATOR
user: login: SyncfusionBuild
created_at: 2025-03-10T19:58:49Z
body: **Build Status: INPROGRESS :arrows_clockwise:<br/>Build Location: [942316-CustomAdaptor](https://ci.syncfusion.com/job/Content/job/ej2-asp-core-mvc-docs/4353/console)**
author_association: COLLABORATOR
user: login: SyncfusionBuild
created_at: 2025-03-10T20:12:59Z
body: **CI Status: SUCCESS :white_check_mark:<br/>Source Compilation: SUCCESS :white_check_mark:<br/>Build Location: [942316-CustomAdaptor](https://ci.syncfusion.com/job/Content/job/ej2-asp-core-mvc-docs/4353/)<br/>Image Alt Text Error(s): [0](https://ci.syncfusion.com/job/Content/job/ej2-asp-core-mvc-docs/4353/artifact/cireports/ImageValidation/AltTextValidation.html)<br/>Image Size Error(s): [0](https://ci.syncfusion.com/job/Content/job/ej2-asp-core-mvc-docs/4353/artifact/cireports/ImageValidation/ImageSizeValidation.html)<br/>Image Name Error(s): [0](https://ci.syncfusion.com/job/Content/job/ej2-asp-core-mvc-docs/4353/artifact/cireports/ImageValidation/ImageNameValidation.html)<br/>FT Layout Syntax Error(s): [0](https://ci.syncfusion.com/job/Content/job/ej2-asp-core-mvc-docs/4353/artifact/cireports/FTLayoutSyntaxValidation/FTStructureValidation.html)<br/>Front matter Error(s): [0](https://ci.syncfusion.com/job/Content/job/ej2-asp-core-mvc-docs/4353/artifact/cireports/FrontMatterValidation/FrontMatterValidation.html)<br/>File Path Error(s): [0](https://ci.syncfusion.com/job/Content/job/ej2-asp-core-mvc-docs/4353/artifact/cireports/FilePathValidation/FilePathValidation.html)<br/>CodeSnippet File Path Missing Error(s): [0](https://ci.syncfusion.com/job/Content/job/ej2-asp-core-mvc-docs/4353/artifact/cireports/CodeSnippetFilePathValidation/CodeSnippetFilePathValidation.html)<br/>Toc Anchor Tags Validation Error(s): [0](https://ci.syncfusion.com/job/Content/job/ej2-asp-core-mvc-docs/4353/artifact/cireports/AnchorTagsValidation/AnchorTagsValidation.html)<br/>MD Tag Validation Error(s): [0](https://ci.syncfusion.com/job/Content/job/ej2-asp-core-mvc-docs/4353/artifact/cireports/MDTagsValidation/MDTagsValidation.html)<br/>**
author_association: COLLABORATOR
user: login: SyncfusionBuild
created_at: 2025-03-11T04:57:09Z
body: **Build Status: INPROGRESS :arrows_clockwise:<br/>Build Location: [942316-CustomAdaptor](https://ci.syncfusion.com/job/Content/job/ej2-asp-core-mvc-docs/4354/console)**
author_association: COLLABORATOR
user: login: SyncfusionBuild
created_at: 2025-03-11T04:59:39Z
body: **CI Status: SUCCESS :white_check_mark:<br/>Source Compilation: SUCCESS :white_check_mark:<br/>Build Location: [942316-CustomAdaptor](https://ci.syncfusion.com/job/Content/job/ej2-asp-core-mvc-docs/4354/)<br/>Image Alt Text Error(s): [0](https://ci.syncfusion.com/job/Content/job/ej2-asp-core-mvc-docs/4354/artifact/cireports/ImageValidation/AltTextValidation.html)<br/>Image Size Error(s): [0](https://ci.syncfusion.com/job/Content/job/ej2-asp-core-mvc-docs/4354/artifact/cireports/ImageValidation/ImageSizeValidation.html)<br/>Image Name Error(s): [0](https://ci.syncfusion.com/job/Content/job/ej2-asp-core-mvc-docs/4354/artifact/cireports/ImageValidation/ImageNameValidation.html)<br/>FT Layout Syntax Error(s): [0](https://ci.syncfusion.com/job/Content/job/ej2-asp-core-mvc-docs/4354/artifact/cireports/FTLayoutSyntaxValidation/FTStructureValidation.html)<br/>Front matter Error(s): [0](https://ci.syncfusion.com/job/Content/job/ej2-asp-core-mvc-docs/4354/artifact/cireports/FrontMatterValidation/FrontMatterValidation.html)<br/>File Path Error(s): [0](https://ci.syncfusion.com/job/Content/job/ej2-asp-core-mvc-docs/4354/artifact/cireports/FilePathValidation/FilePathValidation.html)<br/>CodeSnippet File Path Missing Error(s): [0](https://ci.syncfusion.com/job/Content/job/ej2-asp-core-mvc-docs/4354/artifact/cireports/CodeSnippetFilePathValidation/CodeSnippetFilePathValidation.html)<br/>Toc Anchor Tags Validation Error(s): [0](https://ci.syncfusion.com/job/Content/job/ej2-asp-core-mvc-docs/4354/artifact/cireports/AnchorTagsValidation/AnchorTagsValidation.html)<br/>MD Tag Validation Error(s): [0](https://ci.syncfusion.com/job/Content/job/ej2-asp-core-mvc-docs/4354/artifact/cireports/MDTagsValidation/MDTagsValidation.html)<br/>**
author_association: COLLABORATOR
user: login: SyncfusionBuild
created_at: 2025-03-11T05:08:39Z
body: **Build Status: INPROGRESS :arrows_clockwise:<br/>Build Location: [942316-CustomAdaptor](https://ci.syncfusion.com/job/Content/job/ej2-asp-core-mvc-docs/4355/console)**
author_association: COLLABORATOR
user: login: SyncfusionBuild
created_at: 2025-03-11T05:11:59Z
body: **CI Status: SUCCESS :white_check_mark:<br/>Source Compilation: SUCCESS :white_check_mark:<br/>Build Location: [942316-CustomAdaptor](https://ci.syncfusion.com/job/Content/job/ej2-asp-core-mvc-docs/4355/)<br/>Image Alt Text Error(s): [0](https://ci.syncfusion.com/job/Content/job/ej2-asp-core-mvc-docs/4355/artifact/cireports/ImageValidation/AltTextValidation.html)<br/>Image Size Error(s): [0](https://ci.syncfusion.com/job/Content/job/ej2-asp-core-mvc-docs/4355/artifact/cireports/ImageValidation/ImageSizeValidation.html)<br/>Image Name Error(s): [0](https://ci.syncfusion.com/job/Content/job/ej2-asp-core-mvc-docs/4355/artifact/cireports/ImageValidation/ImageNameValidation.html)<br/>FT Layout Syntax Error(s): [0](https://ci.syncfusion.com/job/Content/job/ej2-asp-core-mvc-docs/4355/artifact/cireports/FTLayoutSyntaxValidation/FTStructureValidation.html)<br/>Front matter Error(s): [0](https://ci.syncfusion.com/job/Content/job/ej2-asp-core-mvc-docs/4355/artifact/cireports/FrontMatterValidation/FrontMatterValidation.html)<br/>File Path Error(s): [0](https://ci.syncfusion.com/job/Content/job/ej2-asp-core-mvc-docs/4355/artifact/cireports/FilePathValidation/FilePathValidation.html)<br/>CodeSnippet File Path Missing Error(s): [0](https://ci.syncfusion.com/job/Content/job/ej2-asp-core-mvc-docs/4355/artifact/cireports/CodeSnippetFilePathValidation/CodeSnippetFilePathValidation.html)<br/>Toc Anchor Tags Validation Error(s): [0](https://ci.syncfusion.com/job/Content/job/ej2-asp-core-mvc-docs/4355/artifact/cireports/AnchorTagsValidation/AnchorTagsValidation.html)<br/>MD Tag Validation Error(s): [0](https://ci.syncfusion.com/job/Content/job/ej2-asp-core-mvc-docs/4355/artifact/cireports/MDTagsValidation/MDTagsValidation.html)<br/>**
author_association: COLLABORATOR
user: login: SyncfusionBuild
created_at: 2025-03-11T05:33:59Z
body: **Build Status: INPROGRESS :arrows_clockwise:<br/>Build Location: [942316-CustomAdaptor](https://ci.syncfusion.com/job/Content/job/ej2-asp-core-mvc-docs/4356/console)**
author_association: COLLABORATOR
user: login: SyncfusionBuild
created_at: 2025-03-11T05:36:29Z
body: **CI Status: SUCCESS :white_check_mark:<br/>Source Compilation: SUCCESS :white_check_mark:<br/>Build Location: [942316-CustomAdaptor](https://ci.syncfusion.com/job/Content/job/ej2-asp-core-mvc-docs/4356/)<br/>Image Alt Text Error(s): [0](https://ci.syncfusion.com/job/Content/job/ej2-asp-core-mvc-docs/4356/artifact/cireports/ImageValidation/AltTextValidation.html)<br/>Image Size Error(s): [0](https://ci.syncfusion.com/job/Content/job/ej2-asp-core-mvc-docs/4356/artifact/cireports/ImageValidation/ImageSizeValidation.html)<br/>Image Name Error(s): [0](https://ci.syncfusion.com/job/Content/job/ej2-asp-core-mvc-docs/4356/artifact/cireports/ImageValidation/ImageNameValidation.html)<br/>FT Layout Syntax Error(s): [0](https://ci.syncfusion.com/job/Content/job/ej2-asp-core-mvc-docs/4356/artifact/cireports/FTLayoutSyntaxValidation/FTStructureValidation.html)<br/>Front matter Error(s): [0](https://ci.syncfusion.com/job/Content/job/ej2-asp-core-mvc-docs/4356/artifact/cireports/FrontMatterValidation/FrontMatterValidation.html)<br/>File Path Error(s): [0](https://ci.syncfusion.com/job/Content/job/ej2-asp-core-mvc-docs/4356/artifact/cireports/FilePathValidation/FilePathValidation.html)<br/>CodeSnippet File Path Missing Error(s): [0](https://ci.syncfusion.com/job/Content/job/ej2-asp-core-mvc-docs/4356/artifact/cireports/CodeSnippetFilePathValidation/CodeSnippetFilePathValidation.html)<br/>Toc Anchor Tags Validation Error(s): [0](https://ci.syncfusion.com/job/Content/job/ej2-asp-core-mvc-docs/4356/artifact/cireports/AnchorTagsValidation/AnchorTagsValidation.html)<br/>MD Tag Validation Error(s): [0](https://ci.syncfusion.com/job/Content/job/ej2-asp-core-mvc-docs/4356/artifact/cireports/MDTagsValidation/MDTagsValidation.html)<br/>**
author_association: COLLABORATOR
user: login: SyncfusionBuild
created_at: 2025-03-11T05:40:46Z
body: **Build Status: INPROGRESS :arrows_clockwise:<br/>Build Location: [942316-CustomAdaptor](https://ci.syncfusion.com/job/Content/job/ej2-asp-core-mvc-docs/4357/console)**
author_association: COLLABORATOR
user: login: SyncfusionBuild
created_at: 2025-03-11T05:43:16Z
body: **CI Status: SUCCESS :white_check_mark:<br/>Source Compilation: SUCCESS :white_check_mark:<br/>Build Location: [942316-CustomAdaptor](https://ci.syncfusion.com/job/Content/job/ej2-asp-core-mvc-docs/4357/)<br/>Image Alt Text Error(s): [0](https://ci.syncfusion.com/job/Content/job/ej2-asp-core-mvc-docs/4357/artifact/cireports/ImageValidation/AltTextValidation.html)<br/>Image Size Error(s): [0](https://ci.syncfusion.com/job/Content/job/ej2-asp-core-mvc-docs/4357/artifact/cireports/ImageValidation/ImageSizeValidation.html)<br/>Image Name Error(s): [0](https://ci.syncfusion.com/job/Content/job/ej2-asp-core-mvc-docs/4357/artifact/cireports/ImageValidation/ImageNameValidation.html)<br/>FT Layout Syntax Error(s): [0](https://ci.syncfusion.com/job/Content/job/ej2-asp-core-mvc-docs/4357/artifact/cireports/FTLayoutSyntaxValidation/FTStructureValidation.html)<br/>Front matter Error(s): [0](https://ci.syncfusion.com/job/Content/job/ej2-asp-core-mvc-docs/4357/artifact/cireports/FrontMatterValidation/FrontMatterValidation.html)<br/>File Path Error(s): [0](https://ci.syncfusion.com/job/Content/job/ej2-asp-core-mvc-docs/4357/artifact/cireports/FilePathValidation/FilePathValidation.html)<br/>CodeSnippet File Path Missing Error(s): [0](https://ci.syncfusion.com/job/Content/job/ej2-asp-core-mvc-docs/4357/artifact/cireports/CodeSnippetFilePathValidation/CodeSnippetFilePathValidation.html)<br/>Toc Anchor Tags Validation Error(s): [0](https://ci.syncfusion.com/job/Content/job/ej2-asp-core-mvc-docs/4357/artifact/cireports/AnchorTagsValidation/AnchorTagsValidation.html)<br/>MD Tag Validation Error(s): [0](https://ci.syncfusion.com/job/Content/job/ej2-asp-core-mvc-docs/4357/artifact/cireports/MDTagsValidation/MDTagsValidation.html)<br/>**
author_association: COLLABORATOR
user: login: SyncfusionBuild
created_at: 2025-03-11T07:00:19Z
body: **Build Status: INPROGRESS :arrows_clockwise:<br/>Build Location: [942316-CustomAdaptor](https://ci.syncfusion.com/job/Content/job/ej2-asp-core-mvc-docs/4359/console)**
author_association: COLLABORATOR
user: login: SyncfusionBuild
created_at: 2025-03-11T07:02:49Z
body: **CI Status: SUCCESS :white_check_mark:<br/>Source Compilation: SUCCESS :white_check_mark:<br/>Build Location: [942316-CustomAdaptor](https://ci.syncfusion.com/job/Content/job/ej2-asp-core-mvc-docs/4359/)<br/>Image Alt Text Error(s): [0](https://ci.syncfusion.com/job/Content/job/ej2-asp-core-mvc-docs/4359/artifact/cireports/ImageValidation/AltTextValidation.html)<br/>Image Size Error(s): [0](https://ci.syncfusion.com/job/Content/job/ej2-asp-core-mvc-docs/4359/artifact/cireports/ImageValidation/ImageSizeValidation.html)<br/>Image Name Error(s): [0](https://ci.syncfusion.com/job/Content/job/ej2-asp-core-mvc-docs/4359/artifact/cireports/ImageValidation/ImageNameValidation.html)<br/>FT Layout Syntax Error(s): [0](https://ci.syncfusion.com/job/Content/job/ej2-asp-core-mvc-docs/4359/artifact/cireports/FTLayoutSyntaxValidation/FTStructureValidation.html)<br/>Front matter Error(s): [0](https://ci.syncfusion.com/job/Content/job/ej2-asp-core-mvc-docs/4359/artifact/cireports/FrontMatterValidation/FrontMatterValidation.html)<br/>File Path Error(s): [0](https://ci.syncfusion.com/job/Content/job/ej2-asp-core-mvc-docs/4359/artifact/cireports/FilePathValidation/FilePathValidation.html)<br/>CodeSnippet File Path Missing Error(s): [0](https://ci.syncfusion.com/job/Content/job/ej2-asp-core-mvc-docs/4359/artifact/cireports/CodeSnippetFilePathValidation/CodeSnippetFilePathValidation.html)<br/>Toc Anchor Tags Validation Error(s): [0](https://ci.syncfusion.com/job/Content/job/ej2-asp-core-mvc-docs/4359/artifact/cireports/AnchorTagsValidation/AnchorTagsValidation.html)<br/>MD Tag Validation Error(s): [0](https://ci.syncfusion.com/job/Content/job/ej2-asp-core-mvc-docs/4359/artifact/cireports/MDTagsValidation/MDTagsValidation.html)<br/>**
author_association: COLLABORATOR
user: login: SyncfusionBuild
created_at: 2025-03-11T12:22:35Z
body: **Build Status: INPROGRESS :arrows_clockwise:<br/>Build Location: [942316-CustomAdaptor](https://ci.syncfusion.com/job/Content/job/ej2-asp-core-mvc-docs/4366/console)**
author_association: COLLABORATOR
user: login: SyncfusionBuild
created_at: 2025-03-11T12:24:22Z
body: **CI Status: FAILURE :x:<br/>Source Compilation: Not Started :x:<br/>Build Location: [942316-CustomAdaptor](https://ci.syncfusion.com/job/Content/job/ej2-asp-core-mvc-docs/4366/)<br/>**
author_association: COLLABORATOR
user: login: SyncfusionBuild
created_at: 2025-03-11T12:29:44Z
body: **Build Status: INPROGRESS :arrows_clockwise:<br/>Build Location: [942316-CustomAdaptor](https://ci.syncfusion.com/job/Content/job/ej2-asp-core-mvc-docs/4367/console)**
author_association: COLLABORATOR
user: login: Syncfusion-CI
created_at: 2025-03-11T12:47:15Z
body: **CI Status: FAILURE :x:<br/>Source Compilation: SUCCESS :white_check_mark:<br/>Failure Reason: [CI Failure with violation](https://ci.syncfusion.com/job/Content/job/ej2-asp-core-mvc-docs/4367/artifact/cireports/)<br/>Build Location: [942316-CustomAdaptor](https://ci.syncfusion.com/job/Content/job/ej2-asp-core-mvc-docs/4367/)<br/>Image Alt Text Error(s): [0](https://ci.syncfusion.com/job/Content/job/ej2-asp-core-mvc-docs/4367/artifact/cireports/ImageValidation/AltTextValidation.html)<br/>Image Size Error(s): [0](https://ci.syncfusion.com/job/Content/job/ej2-asp-core-mvc-docs/4367/artifact/cireports/ImageValidation/ImageSizeValidation.html)<br/>Image Name Error(s): [0](https://ci.syncfusion.com/job/Content/job/ej2-asp-core-mvc-docs/4367/artifact/cireports/ImageValidation/ImageNameValidation.html)<br/>FT Layout Syntax Error(s): [0](https://ci.syncfusion.com/job/Content/job/ej2-asp-core-mvc-docs/4367/artifact/cireports/FTLayoutSyntaxValidation/FTStructureValidation.html)<br/>Front matter Error(s): [0](https://ci.syncfusion.com/job/Content/job/ej2-asp-core-mvc-docs/4367/artifact/cireports/FrontMatterValidation/FrontMatterValidation.html)<br/>File Path Error(s): [2](https://ci.syncfusion.com/job/Content/job/ej2-asp-core-mvc-docs/4367/artifact/cireports/FilePathValidation/FilePathValidation.html)<br/>CodeSnippet File Path Missing Error(s): [0](https://ci.syncfusion.com/job/Content/job/ej2-asp-core-mvc-docs/4367/artifact/cireports/CodeSnippetFilePathValidation/CodeSnippetFilePathValidation.html)<br/>Toc Anchor Tags Validation Error(s): [0](https://ci.syncfusion.com/job/Content/job/ej2-asp-core-mvc-docs/4367/artifact/cireports/AnchorTagsValidation/AnchorTagsValidation.html)<br/>MD Tag Validation Error(s): [0](https://ci.syncfusion.com/job/Content/job/ej2-asp-core-mvc-docs/4367/artifact/cireports/MDTagsValidation/MDTagsValidation.html)<br/>**
author_association: NONE
user: login: SyncfusionBuild
created_at: 2025-03-11T13:46:59Z
body: **Build Status: INPROGRESS :arrows_clockwise:<br/>Build Location: [942316-CustomAdaptor](https://ci.syncfusion.com/job/Content/job/ej2-asp-core-mvc-docs/4370/console)**
author_association: COLLABORATOR
user: login: SyncfusionBuild
created_at: 2025-03-11T13:51:53Z
body: The running **[CI Job](https://ci.syncfusion.com/job/Content/job/ej2-asp-core-mvc-docs/4370/console)** is terminated due to changes committed on the source branch for this Merge Request and CI triggered for latest commit.
author_association: COLLABORATOR
user: login: SyncfusionBuild
created_at: 2025-03-11T13:51:59Z
body: **CI Status: ABORTED :x:<br/>Source Compilation: Not Started :x:<br/>Build Location: [942316-CustomAdaptor](https://ci.syncfusion.com/job/Content/job/ej2-asp-core-mvc-docs/4370/)<br/>**
author_association: COLLABORATOR
user: login: SyncfusionBuild
created_at: 2025-03-11T13:52:45Z
body: **Build Status: INPROGRESS :arrows_clockwise:<br/>Build Location: [942316-CustomAdaptor](https://ci.syncfusion.com/job/Content/job/ej2-asp-core-mvc-docs/4371/console)**
author_association: COLLABORATOR
user: login: Syncfusion-CI
created_at: 2025-03-11T14:03:41Z
body: **CI Status: FAILURE :x:<br/>Source Compilation: SUCCESS :white_check_mark:<br/>Failure Reason: [CI Failure with violation](https://ci.syncfusion.com/job/Content/job/ej2-asp-core-mvc-docs/4371/artifact/cireports/)<br/>Build Location: [942316-CustomAdaptor](https://ci.syncfusion.com/job/Content/job/ej2-asp-core-mvc-docs/4371/)<br/>Image Alt Text Error(s): [0](https://ci.syncfusion.com/job/Content/job/ej2-asp-core-mvc-docs/4371/artifact/cireports/ImageValidation/AltTextValidation.html)<br/>Image Size Error(s): [0](https://ci.syncfusion.com/job/Content/job/ej2-asp-core-mvc-docs/4371/artifact/cireports/ImageValidation/ImageSizeValidation.html)<br/>Image Name Error(s): [0](https://ci.syncfusion.com/job/Content/job/ej2-asp-core-mvc-docs/4371/artifact/cireports/ImageValidation/ImageNameValidation.html)<br/>FT Layout Syntax Error(s): [0](https://ci.syncfusion.com/job/Content/job/ej2-asp-core-mvc-docs/4371/artifact/cireports/FTLayoutSyntaxValidation/FTStructureValidation.html)<br/>Front matter Error(s): [0](https://ci.syncfusion.com/job/Content/job/ej2-asp-core-mvc-docs/4371/artifact/cireports/FrontMatterValidation/FrontMatterValidation.html)<br/>File Path Error(s): [2](https://ci.syncfusion.com/job/Content/job/ej2-asp-core-mvc-docs/4371/artifact/cireports/FilePathValidation/FilePathValidation.html)<br/>CodeSnippet File Path Missing Error(s): [0](https://ci.syncfusion.com/job/Content/job/ej2-asp-core-mvc-docs/4371/artifact/cireports/CodeSnippetFilePathValidation/CodeSnippetFilePathValidation.html)<br/>Toc Anchor Tags Validation Error(s): [0](https://ci.syncfusion.com/job/Content/job/ej2-asp-core-mvc-docs/4371/artifact/cireports/AnchorTagsValidation/AnchorTagsValidation.html)<br/>MD Tag Validation Error(s): [0](https://ci.syncfusion.com/job/Content/job/ej2-asp-core-mvc-docs/4371/artifact/cireports/MDTagsValidation/MDTagsValidation.html)<br/>**
author_association: NONE
user: login: Syncfusion-CI
created_at: 2025-03-11T14:05:40Z
body: The running **[CI Job](https://ci.syncfusion.com/job/Content/job/ej2-asp-core-mvc-docs/4372/console)** is terminated due to changes committed on the source branch for this Merge Request and CI triggered for latest commit.
author_association: NONE
user: login: Syncfusion-CI
created_at: 2025-03-11T14:05:52Z
body: **CI Status: ABORTED :x:<br/>Source Compilation: Not Started :x:<br/>Build Location: [942316-CustomAdaptor](https://ci.syncfusion.com/job/Content/job/ej2-asp-core-mvc-docs/4372/)<br/>**
author_association: NONE
user: login: Syncfusion-CI
created_at: 2025-03-11T14:06:31Z
body: The CI [Job](https://ci.syncfusion.com/job/Content/job/ej2-asp-core-mvc-docs/4373/console) is already running for this Pull Request/Merge Approved with latest commit id. You cannot trigger the duplicate job for same.
author_association: NONE
user: login: Syncfusion-CI
created_at: 2025-03-11T14:06:41Z
body: **Build Status: INPROGRESS :arrows_clockwise:<br/>Build Location: [942316-CustomAdaptor](https://ci.syncfusion.com/job/Content/job/ej2-asp-core-mvc-docs/4373/console)**
author_association: NONE
user: login: Syncfusion-CI
created_at: 2025-03-11T14:21:45Z
body: **CI Status: FAILURE :x:<br/>Source Compilation: SUCCESS :white_check_mark:<br/>Failure Reason: [CI Failure with violation](https://ci.syncfusion.com/job/Content/job/ej2-asp-core-mvc-docs/4373/artifact/cireports/)<br/>Build Location: [942316-CustomAdaptor](https://ci.syncfusion.com/job/Content/job/ej2-asp-core-mvc-docs/4373/)<br/>Image Alt Text Error(s): [0](https://ci.syncfusion.com/job/Content/job/ej2-asp-core-mvc-docs/4373/artifact/cireports/ImageValidation/AltTextValidation.html)<br/>Image Size Error(s): [0](https://ci.syncfusion.com/job/Content/job/ej2-asp-core-mvc-docs/4373/artifact/cireports/ImageValidation/ImageSizeValidation.html)<br/>Image Name Error(s): [0](https://ci.syncfusion.com/job/Content/job/ej2-asp-core-mvc-docs/4373/artifact/cireports/ImageValidation/ImageNameValidation.html)<br/>FT Layout Syntax Error(s): [0](https://ci.syncfusion.com/job/Content/job/ej2-asp-core-mvc-docs/4373/artifact/cireports/FTLayoutSyntaxValidation/FTStructureValidation.html)<br/>Front matter Error(s): [0](https://ci.syncfusion.com/job/Content/job/ej2-asp-core-mvc-docs/4373/artifact/cireports/FrontMatterValidation/FrontMatterValidation.html)<br/>File Path Error(s): [2](https://ci.syncfusion.com/job/Content/job/ej2-asp-core-mvc-docs/4373/artifact/cireports/FilePathValidation/FilePathValidation.html)<br/>CodeSnippet File Path Missing Error(s): [0](https://ci.syncfusion.com/job/Content/job/ej2-asp-core-mvc-docs/4373/artifact/cireports/CodeSnippetFilePathValidation/CodeSnippetFilePathValidation.html)<br/>Toc Anchor Tags Validation Error(s): [0](https://ci.syncfusion.com/job/Content/job/ej2-asp-core-mvc-docs/4373/artifact/cireports/AnchorTagsValidation/AnchorTagsValidation.html)<br/>MD Tag Validation Error(s): [0](https://ci.syncfusion.com/job/Content/job/ej2-asp-core-mvc-docs/4373/artifact/cireports/MDTagsValidation/MDTagsValidation.html)<br/>**
author_association: NONE
user: login: SyncfusionBuild
created_at: 2025-03-11T16:28:19Z
body: **Build Status: INPROGRESS :arrows_clockwise:<br/>Build Location: [942316-CustomAdaptor](https://ci.syncfusion.com/job/Content/job/ej2-asp-core-mvc-docs/4376/console)**
author_association: COLLABORATOR
user: login: SyncfusionBuild
created_at: 2025-03-11T16:38:18Z
body: **CI Status: FAILURE :x:<br/>Source Compilation: SUCCESS :white_check_mark:<br/>Failure Reason: [CI Failure with violation](https://ci.syncfusion.com/job/Content/job/ej2-asp-core-mvc-docs/4376/artifact/cireports/)<br/>Build Location: [942316-CustomAdaptor](https://ci.syncfusion.com/job/Content/job/ej2-asp-core-mvc-docs/4376/)<br/>Image Alt Text Error(s): [0](https://ci.syncfusion.com/job/Content/job/ej2-asp-core-mvc-docs/4376/artifact/cireports/ImageValidation/AltTextValidation.html)<br/>Image Size Error(s): [0](https://ci.syncfusion.com/job/Content/job/ej2-asp-core-mvc-docs/4376/artifact/cireports/ImageValidation/ImageSizeValidation.html)<br/>Image Name Error(s): [0](https://ci.syncfusion.com/job/Content/job/ej2-asp-core-mvc-docs/4376/artifact/cireports/ImageValidation/ImageNameValidation.html)<br/>FT Layout Syntax Error(s): [0](https://ci.syncfusion.com/job/Content/job/ej2-asp-core-mvc-docs/4376/artifact/cireports/FTLayoutSyntaxValidation/FTStructureValidation.html)<br/>Front matter Error(s): [0](https://ci.syncfusion.com/job/Content/job/ej2-asp-core-mvc-docs/4376/artifact/cireports/FrontMatterValidation/FrontMatterValidation.html)<br/>File Path Error(s): [2](https://ci.syncfusion.com/job/Content/job/ej2-asp-core-mvc-docs/4376/artifact/cireports/FilePathValidation/FilePathValidation.html)<br/>CodeSnippet File Path Missing Error(s): [0](https://ci.syncfusion.com/job/Content/job/ej2-asp-core-mvc-docs/4376/artifact/cireports/CodeSnippetFilePathValidation/CodeSnippetFilePathValidation.html)<br/>Toc Anchor Tags Validation Error(s): [0](https://ci.syncfusion.com/job/Content/job/ej2-asp-core-mvc-docs/4376/artifact/cireports/AnchorTagsValidation/AnchorTagsValidation.html)<br/>MD Tag Validation Error(s): [0](https://ci.syncfusion.com/job/Content/job/ej2-asp-core-mvc-docs/4376/artifact/cireports/MDTagsValidation/MDTagsValidation.html)<br/>**
author_association: COLLABORATOR
user: login: SyncfusionBuild
created_at: 2025-03-11T16:46:34Z
body: **Build Status: INQUEUE :clock3:<br/>Build Location: [942316-CustomAdaptor](https://ci.syncfusion.com/job/Content/job/ej2-asp-core-mvc-docs/4377/console)**
author_association: COLLABORATOR
user: login: SyncfusionBuild
created_at: 2025-03-11T16:47:24Z
body: **Build Status: INPROGRESS :arrows_clockwise:<br/>Build Location: [942316-CustomAdaptor](https://ci.syncfusion.com/job/Content/job/ej2-asp-core-mvc-docs/4377/console)**
author_association: COLLABORATOR
user: login: SyncfusionBuild
created_at: 2025-03-11T16:56:34Z
body: **CI Status: FAILURE :x:<br/>Source Compilation: SUCCESS :white_check_mark:<br/>Failure Reason: [CI Failure with violation](https://ci.syncfusion.com/job/Content/job/ej2-asp-core-mvc-docs/4377/artifact/cireports/)<br/>Build Location: [942316-CustomAdaptor](https://ci.syncfusion.com/job/Content/job/ej2-asp-core-mvc-docs/4377/)<br/>Image Alt Text Error(s): [0](https://ci.syncfusion.com/job/Content/job/ej2-asp-core-mvc-docs/4377/artifact/cireports/ImageValidation/AltTextValidation.html)<br/>Image Size Error(s): [0](https://ci.syncfusion.com/job/Content/job/ej2-asp-core-mvc-docs/4377/artifact/cireports/ImageValidation/ImageSizeValidation.html)<br/>Image Name Error(s): [0](https://ci.syncfusion.com/job/Content/job/ej2-asp-core-mvc-docs/4377/artifact/cireports/ImageValidation/ImageNameValidation.html)<br/>FT Layout Syntax Error(s): [0](https://ci.syncfusion.com/job/Content/job/ej2-asp-core-mvc-docs/4377/artifact/cireports/FTLayoutSyntaxValidation/FTStructureValidation.html)<br/>Front matter Error(s): [0](https://ci.syncfusion.com/job/Content/job/ej2-asp-core-mvc-docs/4377/artifact/cireports/FrontMatterValidation/FrontMatterValidation.html)<br/>File Path Error(s): [2](https://ci.syncfusion.com/job/Content/job/ej2-asp-core-mvc-docs/4377/artifact/cireports/FilePathValidation/FilePathValidation.html)<br/>CodeSnippet File Path Missing Error(s): [0](https://ci.syncfusion.com/job/Content/job/ej2-asp-core-mvc-docs/4377/artifact/cireports/CodeSnippetFilePathValidation/CodeSnippetFilePathValidation.html)<br/>Toc Anchor Tags Validation Error(s): [0](https://ci.syncfusion.com/job/Content/job/ej2-asp-core-mvc-docs/4377/artifact/cireports/AnchorTagsValidation/AnchorTagsValidation.html)<br/>MD Tag Validation Error(s): [0](https://ci.syncfusion.com/job/Content/job/ej2-asp-core-mvc-docs/4377/artifact/cireports/MDTagsValidation/MDTagsValidation.html)<br/>**
author_association: COLLABORATOR
user: login: SyncfusionBuild
created_at: 2025-03-12T06:32:22Z
body: **Build Status: INPROGRESS :arrows_clockwise:<br/>Build Location: [942316-CustomAdaptor](https://ci.syncfusion.com/job/Content/job/ej2-asp-core-mvc-docs/4396/console)**
author_association: COLLABORATOR
user: login: SyncfusionBuild
created_at: 2025-03-12T06:44:52Z
body: **CI Status: FAILURE :x:<br/>Source Compilation: SUCCESS :white_check_mark:<br/>Failure Reason: [CI Failure with violation](https://ci.syncfusion.com/job/Content/job/ej2-asp-core-mvc-docs/4396/artifact/cireports/)<br/>Build Location: [942316-CustomAdaptor](https://ci.syncfusion.com/job/Content/job/ej2-asp-core-mvc-docs/4396/)<br/>Image Alt Text Error(s): [0](https://ci.syncfusion.com/job/Content/job/ej2-asp-core-mvc-docs/4396/artifact/cireports/ImageValidation/AltTextValidation.html)<br/>Image Size Error(s): [0](https://ci.syncfusion.com/job/Content/job/ej2-asp-core-mvc-docs/4396/artifact/cireports/ImageValidation/ImageSizeValidation.html)<br/>Image Name Error(s): [0](https://ci.syncfusion.com/job/Content/job/ej2-asp-core-mvc-docs/4396/artifact/cireports/ImageValidation/ImageNameValidation.html)<br/>FT Layout Syntax Error(s): [0](https://ci.syncfusion.com/job/Content/job/ej2-asp-core-mvc-docs/4396/artifact/cireports/FTLayoutSyntaxValidation/FTStructureValidation.html)<br/>Front matter Error(s): [0](https://ci.syncfusion.com/job/Content/job/ej2-asp-core-mvc-docs/4396/artifact/cireports/FrontMatterValidation/FrontMatterValidation.html)<br/>File Path Error(s): [1](https://ci.syncfusion.com/job/Content/job/ej2-asp-core-mvc-docs/4396/artifact/cireports/FilePathValidation/FilePathValidation.html)<br/>CodeSnippet File Path Missing Error(s): [0](https://ci.syncfusion.com/job/Content/job/ej2-asp-core-mvc-docs/4396/artifact/cireports/CodeSnippetFilePathValidation/CodeSnippetFilePathValidation.html)<br/>Toc Anchor Tags Validation Error(s): [0](https://ci.syncfusion.com/job/Content/job/ej2-asp-core-mvc-docs/4396/artifact/cireports/AnchorTagsValidation/AnchorTagsValidation.html)<br/>MD Tag Validation Error(s): [0](https://ci.syncfusion.com/job/Content/job/ej2-asp-core-mvc-docs/4396/artifact/cireports/MDTagsValidation/MDTagsValidation.html)<br/>**
author_association: COLLABORATOR
user: login: Syncfusion-CI
created_at: 2025-03-12T07:19:51Z
body: **Build Status: INPROGRESS :arrows_clockwise:<br/>Build Location: [942316-CustomAdaptor](https://ci.syncfusion.com/job/Content/job/ej2-asp-core-mvc-docs/4400/console)**
author_association: NONE
user: login: Syncfusion-CI
created_at: 2025-03-12T07:20:46Z
body: **CI Status: FAILURE :x:<br/>Source Compilation: Not Started :x:<br/>Build Location: [942316-CustomAdaptor](https://ci.syncfusion.com/job/Content/job/ej2-asp-core-mvc-docs/4400/)<br/>**
author_association: NONE
user: login: NithyaSivaprakasam
created_at: 2025-03-12T07:29:59Z
body: Rebuild
author_association: CONTRIBUTOR
user: login: Syncfusion-CI
created_at: 2025-03-12T07:35:54Z
body: **Build Status: INPROGRESS :arrows_clockwise:<br/>Build Location: [942316-CustomAdaptor](https://ci.syncfusion.com/job/Content/job/ej2-asp-core-mvc-docs/4401/console)**
author_association: NONE
user: login: SyncfusionBuild
created_at: 2025-03-12T07:43:25Z
body: **CI Status: SUCCESS :white_check_mark:<br/>Source Compilation: SUCCESS :white_check_mark:<br/>Build Location: [942316-CustomAdaptor](https://ci.syncfusion.com/job/Content/job/ej2-asp-core-mvc-docs/4401/)<br/>Image Alt Text Error(s): [0](https://ci.syncfusion.com/job/Content/job/ej2-asp-core-mvc-docs/4401/artifact/cireports/ImageValidation/AltTextValidation.html)<br/>Image Size Error(s): [0](https://ci.syncfusion.com/job/Content/job/ej2-asp-core-mvc-docs/4401/artifact/cireports/ImageValidation/ImageSizeValidation.html)<br/>Image Name Error(s): [0](https://ci.syncfusion.com/job/Content/job/ej2-asp-core-mvc-docs/4401/artifact/cireports/ImageValidation/ImageNameValidation.html)<br/>FT Layout Syntax Error(s): [0](https://ci.syncfusion.com/job/Content/job/ej2-asp-core-mvc-docs/4401/artifact/cireports/FTLayoutSyntaxValidation/FTStructureValidation.html)<br/>Front matter Error(s): [0](https://ci.syncfusion.com/job/Content/job/ej2-asp-core-mvc-docs/4401/artifact/cireports/FrontMatterValidation/FrontMatterValidation.html)<br/>File Path Error(s): [0](https://ci.syncfusion.com/job/Content/job/ej2-asp-core-mvc-docs/4401/artifact/cireports/FilePathValidation/FilePathValidation.html)<br/>CodeSnippet File Path Missing Error(s): [0](https://ci.syncfusion.com/job/Content/job/ej2-asp-core-mvc-docs/4401/artifact/cireports/CodeSnippetFilePathValidation/CodeSnippetFilePathValidation.html)<br/>Toc Anchor Tags Validation Error(s): [0](https://ci.syncfusion.com/job/Content/job/ej2-asp-core-mvc-docs/4401/artifact/cireports/AnchorTagsValidation/AnchorTagsValidation.html)<br/>MD Tag Validation Error(s): [0](https://ci.syncfusion.com/job/Content/job/ej2-asp-core-mvc-docs/4401/artifact/cireports/MDTagsValidation/MDTagsValidation.html)<br/>**
author_association: COLLABORATOR
user: login: Syncfusion-CI
created_at: 2025-03-13T07:14:55Z
body: **Build Status: INPROGRESS :arrows_clockwise:<br/>Build Location: [942316-CustomAdaptor](https://ci.syncfusion.com/job/Content/job/ej2-asp-core-mvc-docs/4432/console)**
author_association: NONE
user: login: Syncfusion-CI
created_at: 2025-03-13T07:16:37Z
body: **CI Status: SUCCESS :white_check_mark:<br/>Source Compilation: SUCCESS :white_check_mark:<br/>Build Location: [942316-CustomAdaptor](https://ci.syncfusion.com/job/Content/job/ej2-asp-core-mvc-docs/4432/)<br/>Image Alt Text Error(s): [0](https://ci.syncfusion.com/job/Content/job/ej2-asp-core-mvc-docs/4432/artifact/cireports/ImageValidation/AltTextValidation.html)<br/>Image Size Error(s): [0](https://ci.syncfusion.com/job/Content/job/ej2-asp-core-mvc-docs/4432/artifact/cireports/ImageValidation/ImageSizeValidation.html)<br/>Image Name Error(s): [0](https://ci.syncfusion.com/job/Content/job/ej2-asp-core-mvc-docs/4432/artifact/cireports/ImageValidation/ImageNameValidation.html)<br/>FT Layout Syntax Error(s): [0](https://ci.syncfusion.com/job/Content/job/ej2-asp-core-mvc-docs/4432/artifact/cireports/FTLayoutSyntaxValidation/FTStructureValidation.html)<br/>Front matter Error(s): [0](https://ci.syncfusion.com/job/Content/job/ej2-asp-core-mvc-docs/4432/artifact/cireports/FrontMatterValidation/FrontMatterValidation.html)<br/>File Path Error(s): [0](https://ci.syncfusion.com/job/Content/job/ej2-asp-core-mvc-docs/4432/artifact/cireports/FilePathValidation/FilePathValidation.html)<br/>CodeSnippet File Path Missing Error(s): [0](https://ci.syncfusion.com/job/Content/job/ej2-asp-core-mvc-docs/4432/artifact/cireports/CodeSnippetFilePathValidation/CodeSnippetFilePathValidation.html)<br/>Toc Anchor Tags Validation Error(s): [0](https://ci.syncfusion.com/job/Content/job/ej2-asp-core-mvc-docs/4432/artifact/cireports/AnchorTagsValidation/AnchorTagsValidation.html)<br/>MD Tag Validation Error(s): [0](https://ci.syncfusion.com/job/Content/job/ej2-asp-core-mvc-docs/4432/artifact/cireports/MDTagsValidation/MDTagsValidation.html)<br/>**
author_association: NONE
user: login: SyncfusionBuild
created_at: 2025-03-13T09:54:54Z
body: **Build Status: INPROGRESS :arrows_clockwise:<br/>Build Location: [942316-CustomAdaptor](https://ci.syncfusion.com/job/Content/job/ej2-asp-core-mvc-docs/4447/console)**
author_association: COLLABORATOR
user: login: SyncfusionBuild
created_at: 2025-03-13T09:58:14Z
body: **CI Status: SUCCESS :white_check_mark:<br/>Source Compilation: SUCCESS :white_check_mark:<br/>Build Location: [942316-CustomAdaptor](https://ci.syncfusion.com/job/Content/job/ej2-asp-core-mvc-docs/4447/)<br/>Image Alt Text Error(s): [0](https://ci.syncfusion.com/job/Content/job/ej2-asp-core-mvc-docs/4447/artifact/cireports/ImageValidation/AltTextValidation.html)<br/>Image Size Error(s): [0](https://ci.syncfusion.com/job/Content/job/ej2-asp-core-mvc-docs/4447/artifact/cireports/ImageValidation/ImageSizeValidation.html)<br/>Image Name Error(s): [0](https://ci.syncfusion.com/job/Content/job/ej2-asp-core-mvc-docs/4447/artifact/cireports/ImageValidation/ImageNameValidation.html)<br/>FT Layout Syntax Error(s): [0](https://ci.syncfusion.com/job/Content/job/ej2-asp-core-mvc-docs/4447/artifact/cireports/FTLayoutSyntaxValidation/FTStructureValidation.html)<br/>Front matter Error(s): [0](https://ci.syncfusion.com/job/Content/job/ej2-asp-core-mvc-docs/4447/artifact/cireports/FrontMatterValidation/FrontMatterValidation.html)<br/>File Path Error(s): [0](https://ci.syncfusion.com/job/Content/job/ej2-asp-core-mvc-docs/4447/artifact/cireports/FilePathValidation/FilePathValidation.html)<br/>CodeSnippet File Path Missing Error(s): [0](https://ci.syncfusion.com/job/Content/job/ej2-asp-core-mvc-docs/4447/artifact/cireports/CodeSnippetFilePathValidation/CodeSnippetFilePathValidation.html)<br/>Toc Anchor Tags Validation Error(s): [0](https://ci.syncfusion.com/job/Content/job/ej2-asp-core-mvc-docs/4447/artifact/cireports/AnchorTagsValidation/AnchorTagsValidation.html)<br/>MD Tag Validation Error(s): [0](https://ci.syncfusion.com/job/Content/job/ej2-asp-core-mvc-docs/4447/artifact/cireports/MDTagsValidation/MDTagsValidation.html)<br/>**
author_association: COLLABORATOR
user: login: SyncfusionBuild
created_at: 2025-03-13T10:05:39Z
body: **Build Status: INPROGRESS :arrows_clockwise:<br/>Build Location: [942316-CustomAdaptor](https://ci.syncfusion.com/job/Content/job/ej2-asp-core-mvc-docs/4449/console)**
author_association: COLLABORATOR
user: login: SyncfusionBuild
created_at: 2025-03-13T10:08:09Z
body: **CI Status: SUCCESS :white_check_mark:<br/>Source Compilation: SUCCESS :white_check_mark:<br/>Build Location: [942316-CustomAdaptor](https://ci.syncfusion.com/job/Content/job/ej2-asp-core-mvc-docs/4449/)<br/>Image Alt Text Error(s): [0](https://ci.syncfusion.com/job/Content/job/ej2-asp-core-mvc-docs/4449/artifact/cireports/ImageValidation/AltTextValidation.html)<br/>Image Size Error(s): [0](https://ci.syncfusion.com/job/Content/job/ej2-asp-core-mvc-docs/4449/artifact/cireports/ImageValidation/ImageSizeValidation.html)<br/>Image Name Error(s): [0](https://ci.syncfusion.com/job/Content/job/ej2-asp-core-mvc-docs/4449/artifact/cireports/ImageValidation/ImageNameValidation.html)<br/>FT Layout Syntax Error(s): [0](https://ci.syncfusion.com/job/Content/job/ej2-asp-core-mvc-docs/4449/artifact/cireports/FTLayoutSyntaxValidation/FTStructureValidation.html)<br/>Front matter Error(s): [0](https://ci.syncfusion.com/job/Content/job/ej2-asp-core-mvc-docs/4449/artifact/cireports/FrontMatterValidation/FrontMatterValidation.html)<br/>File Path Error(s): [0](https://ci.syncfusion.com/job/Content/job/ej2-asp-core-mvc-docs/4449/artifact/cireports/FilePathValidation/FilePathValidation.html)<br/>CodeSnippet File Path Missing Error(s): [0](https://ci.syncfusion.com/job/Content/job/ej2-asp-core-mvc-docs/4449/artifact/cireports/CodeSnippetFilePathValidation/CodeSnippetFilePathValidation.html)<br/>Toc Anchor Tags Validation Error(s): [0](https://ci.syncfusion.com/job/Content/job/ej2-asp-core-mvc-docs/4449/artifact/cireports/AnchorTagsValidation/AnchorTagsValidation.html)<br/>MD Tag Validation Error(s): [0](https://ci.syncfusion.com/job/Content/job/ej2-asp-core-mvc-docs/4449/artifact/cireports/MDTagsValidation/MDTagsValidation.html)<br/>**
author_association: COLLABORATOR