diff --git a/CustomAdaptor/CustomAdaptor.Server/Controllers/OrdersController.cs b/CustomAdaptor/CustomAdaptor.Server/Controllers/OrdersController.cs
new file mode 100644
index 0000000..3ad639e
--- /dev/null
+++ b/CustomAdaptor/CustomAdaptor.Server/Controllers/OrdersController.cs
@@ -0,0 +1,80 @@
+using Microsoft.AspNetCore.Mvc;
+using Microsoft.AspNetCore.OData.Query;
+using Microsoft.AspNetCore.OData.Routing.Controllers;
+using ODataV4Adaptor.Server.Models;
+
+namespace OdataV4Adaptor.Server.Controllers
+{
+
+    public class OrdersController : Controller
+    {
+        /// <summary>
+        /// Retrieves all orders.
+        /// </summary>
+        /// <returns>The collection of orders.</returns>
+        [HttpGet]
+        [EnableQuery]
+        public IActionResult Get()
+        {
+            var data = OrdersDetails.GetAllRecords().AsQueryable();
+            return Ok(data);
+        }
+
+        /// <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 Json(addRecord);
+        }
+
+        /// <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");
+            }
+            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 Json(updateRecord);
+        }
+
+        /// <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 Json(deleteRecord);
+        }
+    }
+}
\ No newline at end of file
diff --git a/CustomAdaptor/CustomAdaptor.Server/Controllers/WeatherForecastController.cs b/CustomAdaptor/CustomAdaptor.Server/Controllers/WeatherForecastController.cs
new file mode 100644
index 0000000..3931fb8
--- /dev/null
+++ b/CustomAdaptor/CustomAdaptor.Server/Controllers/WeatherForecastController.cs
@@ -0,0 +1,33 @@
+using Microsoft.AspNetCore.Mvc;
+
+namespace ODataV4Adaptor.Server.Controllers
+{
+    [ApiController]
+    [Route("[controller]")]
+    public class WeatherForecastController : ControllerBase
+    {
+        private static readonly string[] Summaries = new[]
+        {
+            "Freezing", "Bracing", "Chilly", "Cool", "Mild", "Warm", "Balmy", "Hot", "Sweltering", "Scorching"
+        };
+
+        private readonly ILogger<WeatherForecastController> _logger;
+
+        public WeatherForecastController(ILogger<WeatherForecastController> logger)
+        {
+            _logger = logger;
+        }
+
+        [HttpGet(Name = "GetWeatherForecast")]
+        public IEnumerable<WeatherForecast> Get()
+        {
+            return Enumerable.Range(1, 5).Select(index => new WeatherForecast
+            {
+                Date = DateOnly.FromDateTime(DateTime.Now.AddDays(index)),
+                TemperatureC = Random.Shared.Next(-20, 55),
+                Summary = Summaries[Random.Shared.Next(Summaries.Length)]
+            })
+            .ToArray();
+        }
+    }
+}
diff --git a/CustomAdaptor/CustomAdaptor.Server/Models/OrdersDetails.cs b/CustomAdaptor/CustomAdaptor.Server/Models/OrdersDetails.cs
new file mode 100644
index 0000000..1bb7b03
--- /dev/null
+++ b/CustomAdaptor/CustomAdaptor.Server/Models/OrdersDetails.cs
@@ -0,0 +1,44 @@
+using System.ComponentModel.DataAnnotations;
+
+namespace ODataV4Adaptor.Server.Models
+{
+    public class OrdersDetails
+    {
+        public static List<OrdersDetails> order = new List<OrdersDetails>();
+        public OrdersDetails()
+        {
+
+        }
+        public OrdersDetails(
+        int OrderID, string CustomerId, int EmployeeId, string ShipCountry)
+        {
+            this.OrderID = OrderID;
+            this.CustomerID = CustomerId;
+            this.EmployeeID = EmployeeId;
+            this.ShipCountry = ShipCountry;
+        }
+
+        public static List<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, "Denmark"));
+                    order.Add(new OrdersDetails(code + 2, "ANATR", i + 2, "Brazil"));
+                    order.Add(new OrdersDetails(code + 3, "ANTON", i + 1, "Germany"));
+                    order.Add(new OrdersDetails(code + 4, "BLONP", i + 3, "Austria"));
+                    order.Add(new OrdersDetails(code + 5, "BOLID", i + 4, "Switzerland"));
+                    code += 5;
+                }
+            }
+            return order;
+        }
+        [Key]
+        public int? OrderID { get; set; }
+        public string? CustomerID { get; set; }
+        public int? EmployeeID { get; set; }
+        public string? ShipCountry { get; set; }
+    }
+}
\ No newline at end of file
diff --git a/CustomAdaptor/CustomAdaptor.Server/ODataV4Adaptor.Server.csproj b/CustomAdaptor/CustomAdaptor.Server/ODataV4Adaptor.Server.csproj
new file mode 100644
index 0000000..f9c460d
--- /dev/null
+++ b/CustomAdaptor/CustomAdaptor.Server/ODataV4Adaptor.Server.csproj
@@ -0,0 +1,26 @@
+<Project Sdk="Microsoft.NET.Sdk.Web">
+
+  <PropertyGroup>
+    <TargetFramework>net8.0</TargetFramework>
+    <Nullable>enable</Nullable>
+    <ImplicitUsings>enable</ImplicitUsings>
+    <SpaRoot>..\odatav4adaptor.client</SpaRoot>
+    <SpaProxyLaunchCommand>npm run dev</SpaProxyLaunchCommand>
+    <SpaProxyServerUrl>https://localhost:5173</SpaProxyServerUrl>
+  </PropertyGroup>
+
+  <ItemGroup>
+    <PackageReference Include="Microsoft.AspNetCore.OData" Version="8.2.5" />
+    <PackageReference Include="Microsoft.AspNetCore.SpaProxy">
+      <Version>8.*-*</Version>
+    </PackageReference>
+    <PackageReference Include="Swashbuckle.AspNetCore" Version="6.4.0" />
+  </ItemGroup>
+
+  <ItemGroup>
+    <ProjectReference Include="..\odatav4adaptor.client\odatav4adaptor.client.esproj">
+      <ReferenceOutputAssembly>false</ReferenceOutputAssembly>
+    </ProjectReference>
+  </ItemGroup>
+
+</Project>
diff --git a/CustomAdaptor/CustomAdaptor.Server/ODataV4Adaptor.Server.csproj.user b/CustomAdaptor/CustomAdaptor.Server/ODataV4Adaptor.Server.csproj.user
new file mode 100644
index 0000000..9ff5820
--- /dev/null
+++ b/CustomAdaptor/CustomAdaptor.Server/ODataV4Adaptor.Server.csproj.user
@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="utf-8"?>
+<Project ToolsVersion="Current" xmlns="http://schemas.microsoft.com/developer/msbuild/2003">
+  <PropertyGroup>
+    <ActiveDebugProfile>https</ActiveDebugProfile>
+  </PropertyGroup>
+</Project>
\ No newline at end of file
diff --git a/CustomAdaptor/CustomAdaptor.Server/ODataV4Adaptor.Server.http b/CustomAdaptor/CustomAdaptor.Server/ODataV4Adaptor.Server.http
new file mode 100644
index 0000000..4a792e0
--- /dev/null
+++ b/CustomAdaptor/CustomAdaptor.Server/ODataV4Adaptor.Server.http
@@ -0,0 +1,6 @@
+@ODataV4Adaptor.Server_HostAddress = http://localhost:5241
+
+GET {{ODataV4Adaptor.Server_HostAddress}}/weatherforecast/
+Accept: application/json
+
+###
diff --git a/CustomAdaptor/CustomAdaptor.Server/Program.cs b/CustomAdaptor/CustomAdaptor.Server/Program.cs
new file mode 100644
index 0000000..a3384fa
--- /dev/null
+++ b/CustomAdaptor/CustomAdaptor.Server/Program.cs
@@ -0,0 +1,56 @@
+using Microsoft.AspNetCore.OData;
+using Microsoft.OData.ModelBuilder;
+using ODataV4Adaptor.Server.Models;
+
+var builder = WebApplication.CreateBuilder(args);
+
+// Add services to the container.
+var modelBuilder = new ODataConventionModelBuilder();
+modelBuilder.EntitySet<OrdersDetails>("Orders");
+
+var recordCount = OrdersDetails.GetAllRecords().Count;
+
+builder.Services.AddControllers().AddOData(
+    options => options
+    .Count()
+    .OrderBy()
+    .Filter()
+    .SetMaxTop(recordCount)
+    .AddRouteComponents(
+        "odata",
+        modelBuilder.GetEdmModel()));
+
+
+// Learn more about configuring Swagger/OpenAPI at https://aka.ms/aspnetcore/swashbuckle
+builder.Services.AddEndpointsApiExplorer();
+builder.Services.AddSwaggerGen();
+
+builder.Services.AddCors(options =>
+{
+    options.AddDefaultPolicy(builder =>
+    {
+        builder.AllowAnyOrigin().AllowAnyMethod().AllowAnyHeader();
+    });
+});
+var app = builder.Build();
+app.UseCors();
+
+app.UseDefaultFiles();
+app.UseStaticFiles();
+
+// Configure the HTTP request pipeline.
+if (app.Environment.IsDevelopment())
+{
+    app.UseSwagger();
+    app.UseSwaggerUI();
+}
+
+app.UseHttpsRedirection();
+
+app.UseAuthorization();
+
+app.MapControllers();
+
+app.MapFallbackToFile("/index.html");
+
+app.Run();
\ No newline at end of file
diff --git a/CustomAdaptor/CustomAdaptor.Server/Properties/launchSettings.json b/CustomAdaptor/CustomAdaptor.Server/Properties/launchSettings.json
new file mode 100644
index 0000000..6d3a1b6
--- /dev/null
+++ b/CustomAdaptor/CustomAdaptor.Server/Properties/launchSettings.json
@@ -0,0 +1,45 @@
+{
+  "$schema": "http://json.schemastore.org/launchsettings.json",
+  "iisSettings": {
+    "windowsAuthentication": false,
+    "anonymousAuthentication": true,
+    "iisExpress": {
+      "applicationUrl": "http://localhost:17310",
+      "sslPort": 44346
+    }
+  },
+  "profiles": {
+    "http": {
+      "commandName": "Project",
+      "dotnetRunMessages": true,
+      "launchBrowser": true,
+      "launchUrl": "swagger",
+      "applicationUrl": "http://localhost:5241",
+      "environmentVariables": {
+        "ASPNETCORE_ENVIRONMENT": "Development",
+        "ASPNETCORE_HOSTINGSTARTUPASSEMBLIES": "Microsoft.AspNetCore.SpaProxy"
+      }
+    },
+    "https": {
+      "commandName": "Project",
+      "dotnetRunMessages": true,
+      "launchBrowser": true,
+      "launchUrl": "swagger",
+      "applicationUrl": "https://localhost:7215;http://localhost:5241",
+      "environmentVariables": {
+        "ASPNETCORE_ENVIRONMENT": "Development",
+        "ASPNETCORE_HOSTINGSTARTUPASSEMBLIES": "Microsoft.AspNetCore.SpaProxy"
+      }
+    },
+    "IIS Express": {
+      "commandName": "IISExpress",
+      "launchBrowser": true,
+      "launchUrl": "swagger",
+      "environmentVariables": {
+        "ASPNETCORE_ENVIRONMENT": "Development",
+        "ASPNETCORE_HOSTINGSTARTUPASSEMBLIES": "Microsoft.AspNetCore.SpaProxy"
+      }
+    }
+  }
+}
+
diff --git a/CustomAdaptor/CustomAdaptor.Server/WeatherForecast.cs b/CustomAdaptor/CustomAdaptor.Server/WeatherForecast.cs
new file mode 100644
index 0000000..1b27afe
--- /dev/null
+++ b/CustomAdaptor/CustomAdaptor.Server/WeatherForecast.cs
@@ -0,0 +1,13 @@
+namespace ODataV4Adaptor.Server
+{
+    public class WeatherForecast
+    {
+        public DateOnly Date { get; set; }
+
+        public int TemperatureC { get; set; }
+
+        public int TemperatureF => 32 + (int)(TemperatureC / 0.5556);
+
+        public string? Summary { get; set; }
+    }
+}
diff --git a/CustomAdaptor/CustomAdaptor.Server/appsettings.Development.json b/CustomAdaptor/CustomAdaptor.Server/appsettings.Development.json
new file mode 100644
index 0000000..0c208ae
--- /dev/null
+++ b/CustomAdaptor/CustomAdaptor.Server/appsettings.Development.json
@@ -0,0 +1,8 @@
+{
+  "Logging": {
+    "LogLevel": {
+      "Default": "Information",
+      "Microsoft.AspNetCore": "Warning"
+    }
+  }
+}
diff --git a/CustomAdaptor/CustomAdaptor.Server/appsettings.json b/CustomAdaptor/CustomAdaptor.Server/appsettings.json
new file mode 100644
index 0000000..10f68b8
--- /dev/null
+++ b/CustomAdaptor/CustomAdaptor.Server/appsettings.json
@@ -0,0 +1,9 @@
+{
+  "Logging": {
+    "LogLevel": {
+      "Default": "Information",
+      "Microsoft.AspNetCore": "Warning"
+    }
+  },
+  "AllowedHosts": "*"
+}
diff --git a/CustomAdaptor/CustomAdaptor.sln b/CustomAdaptor/CustomAdaptor.sln
new file mode 100644
index 0000000..0809d7c
--- /dev/null
+++ b/CustomAdaptor/CustomAdaptor.sln
@@ -0,0 +1,33 @@
+
+Microsoft Visual Studio Solution File, Format Version 12.00
+# Visual Studio Version 17
+VisualStudioVersion = 17.9.34728.123
+MinimumVisualStudioVersion = 10.0.40219.1
+Project("{FAE04EC0-301F-11D3-BF4B-00C04F79EFBC}") = "ODataV4Adaptor.Server", "ODataV4Adaptor.Server\ODataV4Adaptor.Server.csproj", "{1C30C5B8-D458-4654-AAC3-D1865BA6B333}"
+EndProject
+Project("{54A90642-561A-4BB1-A94E-469ADEE60C69}") = "odatav4adaptor.client", "odatav4adaptor.client\odatav4adaptor.client.esproj", "{08AB8A24-B687-420F-824A-830C3AFA5F87}"
+EndProject
+Global
+	GlobalSection(SolutionConfigurationPlatforms) = preSolution
+		Debug|Any CPU = Debug|Any CPU
+		Release|Any CPU = Release|Any CPU
+	EndGlobalSection
+	GlobalSection(ProjectConfigurationPlatforms) = postSolution
+		{1C30C5B8-D458-4654-AAC3-D1865BA6B333}.Debug|Any CPU.ActiveCfg = Debug|Any CPU
+		{1C30C5B8-D458-4654-AAC3-D1865BA6B333}.Debug|Any CPU.Build.0 = Debug|Any CPU
+		{1C30C5B8-D458-4654-AAC3-D1865BA6B333}.Release|Any CPU.ActiveCfg = Release|Any CPU
+		{1C30C5B8-D458-4654-AAC3-D1865BA6B333}.Release|Any CPU.Build.0 = Release|Any CPU
+		{08AB8A24-B687-420F-824A-830C3AFA5F87}.Debug|Any CPU.ActiveCfg = Debug|Any CPU
+		{08AB8A24-B687-420F-824A-830C3AFA5F87}.Debug|Any CPU.Build.0 = Debug|Any CPU
+		{08AB8A24-B687-420F-824A-830C3AFA5F87}.Debug|Any CPU.Deploy.0 = Debug|Any CPU
+		{08AB8A24-B687-420F-824A-830C3AFA5F87}.Release|Any CPU.ActiveCfg = Release|Any CPU
+		{08AB8A24-B687-420F-824A-830C3AFA5F87}.Release|Any CPU.Build.0 = Release|Any CPU
+		{08AB8A24-B687-420F-824A-830C3AFA5F87}.Release|Any CPU.Deploy.0 = Release|Any CPU
+	EndGlobalSection
+	GlobalSection(SolutionProperties) = preSolution
+		HideSolutionNode = FALSE
+	EndGlobalSection
+	GlobalSection(ExtensibilityGlobals) = postSolution
+		SolutionGuid = {57156135-2E52-491B-AE1F-B50B2C97612A}
+	EndGlobalSection
+EndGlobal
diff --git a/CustomAdaptor/README.md b/CustomAdaptor/README.md
new file mode 100644
index 0000000..0fe87e1
--- /dev/null
+++ b/CustomAdaptor/README.md
@@ -0,0 +1,34 @@
+# Custom Adaptor in Syncfusion Vue Grid Component
+
+The `CustomAdaptor`, which extends the `ODataV4Adaptor`, enables enhanced data handling capabilities while maintaining full compatibility with OData v4 services in the Syncfusion Vue Grid Component. This guide provides instructions on binding data and performing CRUD (Create, Read, Update, Delete) operations using the extended adaptor in your Vue Grid implementation.
+
+## Getting Started
+
+**1. Clone the Repository:**
+
+Use `git clone` to fetch the repository from GitHub.
+
+```bash
+https://github.com/SyncfusionExamples/Binding-data-from-remote-service-to-vue-data-grid.git 
+```
+
+**2. Open and Build the Project:**
+
+* Open the project in Visual Studio.
+* Build the project to restore dependencies and compile it.
+* Run the project
+
+**3. Explore the Code:**
+
+* Navigate to vue client folder(~src/app.vue)
+* Debug and interact with the code as needed.
+
+![Adaptors](../assets/images/adaptor-crud-operation.gif)
+
+## Resources
+
+You can also refer the below resources to know more details about Syncfusion Vue Grid components.
+
+* [Demo](https://ej2.syncfusion.com/vue/demos/#/tailwind/grid/over-view)
+* [Documentation](https://ej2.syncfusion.com/vue/documentation/grid/getting-started)
+* [CustomAdaptor with Syncfusion DataManager](https://ej2.syncfusion.com/vue/documentation/grid/connecting-to-adaptors/custom-adaptor)
\ No newline at end of file
diff --git a/CustomAdaptor/customadaptor.client/.eslintrc.cjs b/CustomAdaptor/customadaptor.client/.eslintrc.cjs
new file mode 100644
index 0000000..15f62d7
--- /dev/null
+++ b/CustomAdaptor/customadaptor.client/.eslintrc.cjs
@@ -0,0 +1,11 @@
+/* eslint-env node */
+module.exports = {
+  root: true,
+  'extends': [
+    'plugin:vue/vue3-essential',
+    'eslint:recommended'
+  ],
+  parserOptions: {
+    ecmaVersion: 'latest'
+  }
+}
diff --git a/CustomAdaptor/customadaptor.client/.gitignore b/CustomAdaptor/customadaptor.client/.gitignore
new file mode 100644
index 0000000..8ee54e8
--- /dev/null
+++ b/CustomAdaptor/customadaptor.client/.gitignore
@@ -0,0 +1,30 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+.DS_Store
+dist
+dist-ssr
+coverage
+*.local
+
+/cypress/videos/
+/cypress/screenshots/
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
+
+*.tsbuildinfo
diff --git a/CustomAdaptor/customadaptor.client/README.md b/CustomAdaptor/customadaptor.client/README.md
new file mode 100644
index 0000000..6bbca3d
--- /dev/null
+++ b/CustomAdaptor/customadaptor.client/README.md
@@ -0,0 +1,35 @@
+# odatav4adaptor.client
+
+This template should help get you started developing with Vue 3 in Vite.
+
+## Recommended IDE Setup
+
+[VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur).
+
+## Customize configuration
+
+See [Vite Configuration Reference](https://vitejs.dev/config/).
+
+## Project Setup
+
+```sh
+npm install
+```
+
+### Compile and Hot-Reload for Development
+
+```sh
+npm run dev
+```
+
+### Compile and Minify for Production
+
+```sh
+npm run build
+```
+
+### Lint with [ESLint](https://eslint.org/)
+
+```sh
+npm run lint
+```
diff --git a/CustomAdaptor/customadaptor.client/index.html b/CustomAdaptor/customadaptor.client/index.html
new file mode 100644
index 0000000..99f583a
--- /dev/null
+++ b/CustomAdaptor/customadaptor.client/index.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <link rel="icon" href="/favicon.ico">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Vite App</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.js"></script>
+  </body>
+</html>
diff --git a/CustomAdaptor/customadaptor.client/jsconfig.json b/CustomAdaptor/customadaptor.client/jsconfig.json
new file mode 100644
index 0000000..5a1f2d2
--- /dev/null
+++ b/CustomAdaptor/customadaptor.client/jsconfig.json
@@ -0,0 +1,8 @@
+{
+  "compilerOptions": {
+    "paths": {
+      "@/*": ["./src/*"]
+    }
+  },
+  "exclude": ["node_modules", "dist"]
+}
diff --git a/CustomAdaptor/customadaptor.client/nuget.config b/CustomAdaptor/customadaptor.client/nuget.config
new file mode 100644
index 0000000..6548586
--- /dev/null
+++ b/CustomAdaptor/customadaptor.client/nuget.config
@@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="utf-8"?>
+<configuration>
+  <packageSources>
+    <clear />
+    <add key="nuget.org" value="https://api.nuget.org/v3/index.json" />
+  </packageSources>
+  <disabledPackageSources>
+    <clear />
+  </disabledPackageSources>
+</configuration>
diff --git a/CustomAdaptor/customadaptor.client/odatav4adaptor.client.esproj b/CustomAdaptor/customadaptor.client/odatav4adaptor.client.esproj
new file mode 100644
index 0000000..79bf963
--- /dev/null
+++ b/CustomAdaptor/customadaptor.client/odatav4adaptor.client.esproj
@@ -0,0 +1,11 @@
+<Project Sdk="Microsoft.VisualStudio.JavaScript.Sdk/0.5.271090-alpha">
+  <PropertyGroup>
+    <StartupCommand>npm run dev</StartupCommand>
+    <JavaScriptTestRoot>.\</JavaScriptTestRoot>
+    <JavaScriptTestFramework>Jest</JavaScriptTestFramework>
+    <!-- Allows the build (or compile) script located on package.json to run on Build -->
+    <ShouldRunBuildScript>false</ShouldRunBuildScript>
+    <!-- Folder where production build objects will be placed -->
+    <BuildOutputFolder>$(MSBuildProjectDirectory)\dist</BuildOutputFolder>
+  </PropertyGroup>
+</Project>
\ No newline at end of file
diff --git a/CustomAdaptor/customadaptor.client/package.json b/CustomAdaptor/customadaptor.client/package.json
new file mode 100644
index 0000000..956679a
--- /dev/null
+++ b/CustomAdaptor/customadaptor.client/package.json
@@ -0,0 +1,23 @@
+{
+  "name": "odatav4adaptor.client",
+  "version": "0.0.0",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview",
+    "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs --fix --ignore-path .gitignore"
+  },
+  "dependencies": {
+    "@syncfusion/ej2-data": "*",
+    "@syncfusion/ej2-vue-grids": "*",
+    "vue": "^3.4.29"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-vue": "^5.0.5",
+    "eslint": "^8.57.0",
+    "eslint-plugin-vue": "^9.23.0",
+    "vite": "^5.3.1"
+  }
+}
diff --git a/CustomAdaptor/customadaptor.client/public/favicon.ico b/CustomAdaptor/customadaptor.client/public/favicon.ico
new file mode 100644
index 0000000..df36fcf
Binary files /dev/null and b/CustomAdaptor/customadaptor.client/public/favicon.ico differ
diff --git a/CustomAdaptor/customadaptor.client/src/App.vue b/CustomAdaptor/customadaptor.client/src/App.vue
new file mode 100644
index 0000000..2c6ef88
--- /dev/null
+++ b/CustomAdaptor/customadaptor.client/src/App.vue
@@ -0,0 +1,41 @@
+<template>
+    <div id="app">
+        <ejs-grid :dataSource='data' :toolbar="toolbar" :editSettings="editSettings" :allowFiltering="true" allowSorting="true" allowPaging="true">
+            <e-columns>
+                <e-column field="SNo" headerText="SNo" width="120"></e-column>
+                <e-column field='OrderID' headerText='Order ID' width='120' textAlign='Right' isPrimaryKey="true"></e-column>
+                <e-column field='CustomerID' headerText='Customer ID' width='160'></e-column>
+                <e-column field='EmployeeID' headerText='Eployee ID' width='150'></e-column>
+                <e-column field='ShipCountry' headerText='Ship Country' width='150'></e-column>
+            </e-columns>
+        </ejs-grid>
+    </div>
+</template>
+<script setup>
+    import { provide } from "vue";
+    import { GridComponent as EjsGrid, ColumnDirective as EColumn, ColumnsDirective as EColumns, Page, Edit, Sort, Filter, Toolbar } from "@syncfusion/ej2-vue-grids";
+    import { DataManager } from "@syncfusion/ej2-data";
+
+	import CustomAdaptor from './customadaptor';
+
+    const data = new DataManager({
+		url: 'https://localhost:7215/odata/Orders',
+		adaptor: new CustomAdaptor(),
+    });
+    const editSettings = { allowEditing: true, allowAdding: true, allowDeleting: true };
+    const toolbar = ['Add', 'Edit', 'Update', 'Delete', 'Search'];
+
+    provide('grid', [Sort, Edit, Filter, Page, Toolbar]);
+
+</script>
+<style>
+    @import "../node_modules/@syncfusion/ej2-base/styles/tailwind.css";
+    @import "../node_modules/@syncfusion/ej2-buttons/styles/tailwind.css";
+    @import "../node_modules/@syncfusion/ej2-calendars/styles/tailwind.css";
+    @import "../node_modules/@syncfusion/ej2-dropdowns/styles/tailwind.css";
+    @import "../node_modules/@syncfusion/ej2-inputs/styles/tailwind.css";
+    @import "../node_modules/@syncfusion/ej2-navigations/styles/tailwind.css";
+    @import "../node_modules/@syncfusion/ej2-popups/styles/tailwind.css";
+    @import "../node_modules/@syncfusion/ej2-splitbuttons/styles/tailwind.css";
+    @import "../node_modules/@syncfusion/ej2-vue-grids/styles/tailwind.css";
+</style>
diff --git a/CustomAdaptor/customadaptor.client/src/assets/base.css b/CustomAdaptor/customadaptor.client/src/assets/base.css
new file mode 100644
index 0000000..8816868
--- /dev/null
+++ b/CustomAdaptor/customadaptor.client/src/assets/base.css
@@ -0,0 +1,86 @@
+/* color palette from <https://github.com/vuejs/theme> */
+:root {
+  --vt-c-white: #ffffff;
+  --vt-c-white-soft: #f8f8f8;
+  --vt-c-white-mute: #f2f2f2;
+
+  --vt-c-black: #181818;
+  --vt-c-black-soft: #222222;
+  --vt-c-black-mute: #282828;
+
+  --vt-c-indigo: #2c3e50;
+
+  --vt-c-divider-light-1: rgba(60, 60, 60, 0.29);
+  --vt-c-divider-light-2: rgba(60, 60, 60, 0.12);
+  --vt-c-divider-dark-1: rgba(84, 84, 84, 0.65);
+  --vt-c-divider-dark-2: rgba(84, 84, 84, 0.48);
+
+  --vt-c-text-light-1: var(--vt-c-indigo);
+  --vt-c-text-light-2: rgba(60, 60, 60, 0.66);
+  --vt-c-text-dark-1: var(--vt-c-white);
+  --vt-c-text-dark-2: rgba(235, 235, 235, 0.64);
+}
+
+/* semantic color variables for this project */
+:root {
+  --color-background: var(--vt-c-white);
+  --color-background-soft: var(--vt-c-white-soft);
+  --color-background-mute: var(--vt-c-white-mute);
+
+  --color-border: var(--vt-c-divider-light-2);
+  --color-border-hover: var(--vt-c-divider-light-1);
+
+  --color-heading: var(--vt-c-text-light-1);
+  --color-text: var(--vt-c-text-light-1);
+
+  --section-gap: 160px;
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --color-background: var(--vt-c-black);
+    --color-background-soft: var(--vt-c-black-soft);
+    --color-background-mute: var(--vt-c-black-mute);
+
+    --color-border: var(--vt-c-divider-dark-2);
+    --color-border-hover: var(--vt-c-divider-dark-1);
+
+    --color-heading: var(--vt-c-text-dark-1);
+    --color-text: var(--vt-c-text-dark-2);
+  }
+}
+
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+  margin: 0;
+  font-weight: normal;
+}
+
+body {
+  min-height: 100vh;
+  color: var(--color-text);
+  background: var(--color-background);
+  transition:
+    color 0.5s,
+    background-color 0.5s;
+  line-height: 1.6;
+  font-family:
+    Inter,
+    -apple-system,
+    BlinkMacSystemFont,
+    'Segoe UI',
+    Roboto,
+    Oxygen,
+    Ubuntu,
+    Cantarell,
+    'Fira Sans',
+    'Droid Sans',
+    'Helvetica Neue',
+    sans-serif;
+  font-size: 15px;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
diff --git a/CustomAdaptor/customadaptor.client/src/assets/logo.svg b/CustomAdaptor/customadaptor.client/src/assets/logo.svg
new file mode 100644
index 0000000..7565660
--- /dev/null
+++ b/CustomAdaptor/customadaptor.client/src/assets/logo.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 261.76 226.69"><path d="M161.096.001l-30.225 52.351L100.647.001H-.005l130.877 226.688L261.749.001z" fill="#41b883"/><path d="M161.096.001l-30.225 52.351L100.647.001H52.346l78.526 136.01L209.398.001z" fill="#34495e"/></svg>
diff --git a/CustomAdaptor/customadaptor.client/src/assets/main.css b/CustomAdaptor/customadaptor.client/src/assets/main.css
new file mode 100644
index 0000000..e69de29
diff --git a/CustomAdaptor/customadaptor.client/src/components/HelloWorld.vue b/CustomAdaptor/customadaptor.client/src/components/HelloWorld.vue
new file mode 100644
index 0000000..ce1b3ce
--- /dev/null
+++ b/CustomAdaptor/customadaptor.client/src/components/HelloWorld.vue
@@ -0,0 +1,94 @@
+<template>
+    <div class="weather-component">
+        <h1>Weather forecast</h1>
+        <p>This component demonstrates fetching data from the server.</p>
+
+        <div v-if="loading" class="loading">
+            Loading... Please refresh once the ASP.NET backend has started. See <a href="https://aka.ms/jspsintegrationvue">https://aka.ms/jspsintegrationvue</a> for more details.
+        </div>
+
+        <div v-if="post" class="content">
+            <table>
+                <thead>
+                    <tr>
+                        <th>Date</th>
+                        <th>Temp. (C)</th>
+                        <th>Temp. (F)</th>
+                        <th>Summary</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr v-for="forecast in post" :key="forecast.date">
+                        <td>{{ forecast.date }}</td>
+                        <td>{{ forecast.temperatureC }}</td>
+                        <td>{{ forecast.temperatureF }}</td>
+                        <td>{{ forecast.summary }}</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
+    </div>
+</template>
+
+<script lang="js">
+    import { defineComponent } from 'vue';
+
+    export default defineComponent({
+        data() {
+            return {
+                loading: false,
+                post: null
+            };
+        },
+        created() {
+            // fetch the data when the view is created and the data is
+            // already being observed
+            this.fetchData();
+        },
+        watch: {
+            // call again the method if the route changes
+            '$route': 'fetchData'
+        },
+        methods: {
+            fetchData() {
+                this.post = null;
+                this.loading = true;
+
+                fetch('weatherforecast')
+                    .then(r => r.json())
+                    .then(json => {
+                        this.post = json;
+                        this.loading = false;
+                        return;
+                    });
+            }
+        },
+    });
+</script>
+
+<style scoped>
+th {
+    font-weight: bold;
+}
+tr:nth-child(even) {
+    background: #F2F2F2;
+}
+
+tr:nth-child(odd) {
+    background: #FFF;
+}
+
+th, td {
+    padding-left: .5rem;
+    padding-right: .5rem;
+}
+
+.weather-component {
+    text-align: center;
+}
+
+table {
+    margin-left: auto;
+    margin-right: auto;
+}
+</style>
\ No newline at end of file
diff --git a/CustomAdaptor/customadaptor.client/src/components/TheWelcome.vue b/CustomAdaptor/customadaptor.client/src/components/TheWelcome.vue
new file mode 100644
index 0000000..dab9536
--- /dev/null
+++ b/CustomAdaptor/customadaptor.client/src/components/TheWelcome.vue
@@ -0,0 +1,88 @@
+<script setup>
+import WelcomeItem from './WelcomeItem.vue'
+import DocumentationIcon from './icons/IconDocumentation.vue'
+import ToolingIcon from './icons/IconTooling.vue'
+import EcosystemIcon from './icons/IconEcosystem.vue'
+import CommunityIcon from './icons/IconCommunity.vue'
+import SupportIcon from './icons/IconSupport.vue'
+</script>
+
+<template>
+  <WelcomeItem>
+    <template #icon>
+      <DocumentationIcon />
+    </template>
+    <template #heading>Documentation</template>
+
+    Vue’s
+    <a href="https://vuejs.org/" target="_blank" rel="noopener">official documentation</a>
+    provides you with all information you need to get started.
+  </WelcomeItem>
+
+  <WelcomeItem>
+    <template #icon>
+      <ToolingIcon />
+    </template>
+    <template #heading>Tooling</template>
+
+    This project is served and bundled with
+    <a href="https://vitejs.dev/guide/features.html" target="_blank" rel="noopener">Vite</a>. The
+    recommended IDE setup is
+    <a href="https://code.visualstudio.com/" target="_blank" rel="noopener">VSCode</a> +
+    <a href="https://github.com/johnsoncodehk/volar" target="_blank" rel="noopener">Volar</a>. If
+    you need to test your components and web pages, check out
+    <a href="https://www.cypress.io/" target="_blank" rel="noopener">Cypress</a> and
+    <a href="https://on.cypress.io/component" target="_blank" rel="noopener"
+      >Cypress Component Testing</a
+    >.
+
+    <br />
+
+    More instructions are available in <code>README.md</code>.
+  </WelcomeItem>
+
+  <WelcomeItem>
+    <template #icon>
+      <EcosystemIcon />
+    </template>
+    <template #heading>Ecosystem</template>
+
+    Get official tools and libraries for your project:
+    <a href="https://pinia.vuejs.org/" target="_blank" rel="noopener">Pinia</a>,
+    <a href="https://router.vuejs.org/" target="_blank" rel="noopener">Vue Router</a>,
+    <a href="https://test-utils.vuejs.org/" target="_blank" rel="noopener">Vue Test Utils</a>, and
+    <a href="https://github.com/vuejs/devtools" target="_blank" rel="noopener">Vue Dev Tools</a>. If
+    you need more resources, we suggest paying
+    <a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener">Awesome Vue</a>
+    a visit.
+  </WelcomeItem>
+
+  <WelcomeItem>
+    <template #icon>
+      <CommunityIcon />
+    </template>
+    <template #heading>Community</template>
+
+    Got stuck? Ask your question on
+    <a href="https://chat.vuejs.org" target="_blank" rel="noopener">Vue Land</a>, our official
+    Discord server, or
+    <a href="https://stackoverflow.com/questions/tagged/vue.js" target="_blank" rel="noopener"
+      >StackOverflow</a
+    >. You should also subscribe to
+    <a href="https://news.vuejs.org" target="_blank" rel="noopener">our mailing list</a> and follow
+    the official
+    <a href="https://twitter.com/vuejs" target="_blank" rel="noopener">@vuejs</a>
+    twitter account for latest news in the Vue world.
+  </WelcomeItem>
+
+  <WelcomeItem>
+    <template #icon>
+      <SupportIcon />
+    </template>
+    <template #heading>Support Vue</template>
+
+    As an independent project, Vue relies on community backing for its sustainability. You can help
+    us by
+    <a href="https://vuejs.org/sponsor/" target="_blank" rel="noopener">becoming a sponsor</a>.
+  </WelcomeItem>
+</template>
diff --git a/CustomAdaptor/customadaptor.client/src/components/WelcomeItem.vue b/CustomAdaptor/customadaptor.client/src/components/WelcomeItem.vue
new file mode 100644
index 0000000..6d7086a
--- /dev/null
+++ b/CustomAdaptor/customadaptor.client/src/components/WelcomeItem.vue
@@ -0,0 +1,87 @@
+<template>
+  <div class="item">
+    <i>
+      <slot name="icon"></slot>
+    </i>
+    <div class="details">
+      <h3>
+        <slot name="heading"></slot>
+      </h3>
+      <slot></slot>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.item {
+  margin-top: 2rem;
+  display: flex;
+  position: relative;
+}
+
+.details {
+  flex: 1;
+  margin-left: 1rem;
+}
+
+i {
+  display: flex;
+  place-items: center;
+  place-content: center;
+  width: 32px;
+  height: 32px;
+
+  color: var(--color-text);
+}
+
+h3 {
+  font-size: 1.2rem;
+  font-weight: 500;
+  margin-bottom: 0.4rem;
+  color: var(--color-heading);
+}
+
+@media (min-width: 1024px) {
+  .item {
+    margin-top: 0;
+    padding: 0.4rem 0 1rem calc(var(--section-gap) / 2);
+  }
+
+  i {
+    top: calc(50% - 25px);
+    left: -26px;
+    position: absolute;
+    border: 1px solid var(--color-border);
+    background: var(--color-background);
+    border-radius: 8px;
+    width: 50px;
+    height: 50px;
+  }
+
+  .item:before {
+    content: ' ';
+    border-left: 1px solid var(--color-border);
+    position: absolute;
+    left: 0;
+    bottom: calc(50% + 25px);
+    height: calc(50% - 25px);
+  }
+
+  .item:after {
+    content: ' ';
+    border-left: 1px solid var(--color-border);
+    position: absolute;
+    left: 0;
+    top: calc(50% + 25px);
+    height: calc(50% - 25px);
+  }
+
+  .item:first-of-type:before {
+    display: none;
+  }
+
+  .item:last-of-type:after {
+    display: none;
+  }
+}
+</style>
diff --git a/CustomAdaptor/customadaptor.client/src/components/icons/IconCommunity.vue b/CustomAdaptor/customadaptor.client/src/components/icons/IconCommunity.vue
new file mode 100644
index 0000000..2dc8b05
--- /dev/null
+++ b/CustomAdaptor/customadaptor.client/src/components/icons/IconCommunity.vue
@@ -0,0 +1,7 @@
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor">
+    <path
+      d="M15 4a1 1 0 1 0 0 2V4zm0 11v-1a1 1 0 0 0-1 1h1zm0 4l-.707.707A1 1 0 0 0 16 19h-1zm-4-4l.707-.707A1 1 0 0 0 11 14v1zm-4.707-1.293a1 1 0 0 0-1.414 1.414l1.414-1.414zm-.707.707l-.707-.707.707.707zM9 11v-1a1 1 0 0 0-.707.293L9 11zm-4 0h1a1 1 0 0 0-1-1v1zm0 4H4a1 1 0 0 0 1.707.707L5 15zm10-9h2V4h-2v2zm2 0a1 1 0 0 1 1 1h2a3 3 0 0 0-3-3v2zm1 1v6h2V7h-2zm0 6a1 1 0 0 1-1 1v2a3 3 0 0 0 3-3h-2zm-1 1h-2v2h2v-2zm-3 1v4h2v-4h-2zm1.707 3.293l-4-4-1.414 1.414 4 4 1.414-1.414zM11 14H7v2h4v-2zm-4 0c-.276 0-.525-.111-.707-.293l-1.414 1.414C5.42 15.663 6.172 16 7 16v-2zm-.707 1.121l3.414-3.414-1.414-1.414-3.414 3.414 1.414 1.414zM9 12h4v-2H9v2zm4 0a3 3 0 0 0 3-3h-2a1 1 0 0 1-1 1v2zm3-3V3h-2v6h2zm0-6a3 3 0 0 0-3-3v2a1 1 0 0 1 1 1h2zm-3-3H3v2h10V0zM3 0a3 3 0 0 0-3 3h2a1 1 0 0 1 1-1V0zM0 3v6h2V3H0zm0 6a3 3 0 0 0 3 3v-2a1 1 0 0 1-1-1H0zm3 3h2v-2H3v2zm1-1v4h2v-4H4zm1.707 4.707l.586-.586-1.414-1.414-.586.586 1.414 1.414z"
+    />
+  </svg>
+</template>
diff --git a/CustomAdaptor/customadaptor.client/src/components/icons/IconDocumentation.vue b/CustomAdaptor/customadaptor.client/src/components/icons/IconDocumentation.vue
new file mode 100644
index 0000000..6d4791c
--- /dev/null
+++ b/CustomAdaptor/customadaptor.client/src/components/icons/IconDocumentation.vue
@@ -0,0 +1,7 @@
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" width="20" height="17" fill="currentColor">
+    <path
+      d="M11 2.253a1 1 0 1 0-2 0h2zm-2 13a1 1 0 1 0 2 0H9zm.447-12.167a1 1 0 1 0 1.107-1.666L9.447 3.086zM1 2.253L.447 1.42A1 1 0 0 0 0 2.253h1zm0 13H0a1 1 0 0 0 1.553.833L1 15.253zm8.447.833a1 1 0 1 0 1.107-1.666l-1.107 1.666zm0-14.666a1 1 0 1 0 1.107 1.666L9.447 1.42zM19 2.253h1a1 1 0 0 0-.447-.833L19 2.253zm0 13l-.553.833A1 1 0 0 0 20 15.253h-1zm-9.553-.833a1 1 0 1 0 1.107 1.666L9.447 14.42zM9 2.253v13h2v-13H9zm1.553-.833C9.203.523 7.42 0 5.5 0v2c1.572 0 2.961.431 3.947 1.086l1.107-1.666zM5.5 0C3.58 0 1.797.523.447 1.42l1.107 1.666C2.539 2.431 3.928 2 5.5 2V0zM0 2.253v13h2v-13H0zm1.553 13.833C2.539 15.431 3.928 15 5.5 15v-2c-1.92 0-3.703.523-5.053 1.42l1.107 1.666zM5.5 15c1.572 0 2.961.431 3.947 1.086l1.107-1.666C9.203 13.523 7.42 13 5.5 13v2zm5.053-11.914C11.539 2.431 12.928 2 14.5 2V0c-1.92 0-3.703.523-5.053 1.42l1.107 1.666zM14.5 2c1.573 0 2.961.431 3.947 1.086l1.107-1.666C18.203.523 16.421 0 14.5 0v2zm3.5.253v13h2v-13h-2zm1.553 12.167C18.203 13.523 16.421 13 14.5 13v2c1.573 0 2.961.431 3.947 1.086l1.107-1.666zM14.5 13c-1.92 0-3.703.523-5.053 1.42l1.107 1.666C11.539 15.431 12.928 15 14.5 15v-2z"
+    />
+  </svg>
+</template>
diff --git a/CustomAdaptor/customadaptor.client/src/components/icons/IconEcosystem.vue b/CustomAdaptor/customadaptor.client/src/components/icons/IconEcosystem.vue
new file mode 100644
index 0000000..c3a4f07
--- /dev/null
+++ b/CustomAdaptor/customadaptor.client/src/components/icons/IconEcosystem.vue
@@ -0,0 +1,7 @@
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" width="18" height="20" fill="currentColor">
+    <path
+      d="M11.447 8.894a1 1 0 1 0-.894-1.789l.894 1.789zm-2.894-.789a1 1 0 1 0 .894 1.789l-.894-1.789zm0 1.789a1 1 0 1 0 .894-1.789l-.894 1.789zM7.447 7.106a1 1 0 1 0-.894 1.789l.894-1.789zM10 9a1 1 0 1 0-2 0h2zm-2 2.5a1 1 0 1 0 2 0H8zm9.447-5.606a1 1 0 1 0-.894-1.789l.894 1.789zm-2.894-.789a1 1 0 1 0 .894 1.789l-.894-1.789zm2 .789a1 1 0 1 0 .894-1.789l-.894 1.789zm-1.106-2.789a1 1 0 1 0-.894 1.789l.894-1.789zM18 5a1 1 0 1 0-2 0h2zm-2 2.5a1 1 0 1 0 2 0h-2zm-5.447-4.606a1 1 0 1 0 .894-1.789l-.894 1.789zM9 1l.447-.894a1 1 0 0 0-.894 0L9 1zm-2.447.106a1 1 0 1 0 .894 1.789l-.894-1.789zm-6 3a1 1 0 1 0 .894 1.789L.553 4.106zm2.894.789a1 1 0 1 0-.894-1.789l.894 1.789zm-2-.789a1 1 0 1 0-.894 1.789l.894-1.789zm1.106 2.789a1 1 0 1 0 .894-1.789l-.894 1.789zM2 5a1 1 0 1 0-2 0h2zM0 7.5a1 1 0 1 0 2 0H0zm8.553 12.394a1 1 0 1 0 .894-1.789l-.894 1.789zm-1.106-2.789a1 1 0 1 0-.894 1.789l.894-1.789zm1.106 1a1 1 0 1 0 .894 1.789l-.894-1.789zm2.894.789a1 1 0 1 0-.894-1.789l.894 1.789zM8 19a1 1 0 1 0 2 0H8zm2-2.5a1 1 0 1 0-2 0h2zm-7.447.394a1 1 0 1 0 .894-1.789l-.894 1.789zM1 15H0a1 1 0 0 0 .553.894L1 15zm1-2.5a1 1 0 1 0-2 0h2zm12.553 2.606a1 1 0 1 0 .894 1.789l-.894-1.789zM17 15l.447.894A1 1 0 0 0 18 15h-1zm1-2.5a1 1 0 1 0-2 0h2zm-7.447-5.394l-2 1 .894 1.789 2-1-.894-1.789zm-1.106 1l-2-1-.894 1.789 2 1 .894-1.789zM8 9v2.5h2V9H8zm8.553-4.894l-2 1 .894 1.789 2-1-.894-1.789zm.894 0l-2-1-.894 1.789 2 1 .894-1.789zM16 5v2.5h2V5h-2zm-4.553-3.894l-2-1-.894 1.789 2 1 .894-1.789zm-2.894-1l-2 1 .894 1.789 2-1L8.553.106zM1.447 5.894l2-1-.894-1.789-2 1 .894 1.789zm-.894 0l2 1 .894-1.789-2-1-.894 1.789zM0 5v2.5h2V5H0zm9.447 13.106l-2-1-.894 1.789 2 1 .894-1.789zm0 1.789l2-1-.894-1.789-2 1 .894 1.789zM10 19v-2.5H8V19h2zm-6.553-3.894l-2-1-.894 1.789 2 1 .894-1.789zM2 15v-2.5H0V15h2zm13.447 1.894l2-1-.894-1.789-2 1 .894 1.789zM18 15v-2.5h-2V15h2z"
+    />
+  </svg>
+</template>
diff --git a/CustomAdaptor/customadaptor.client/src/components/icons/IconSupport.vue b/CustomAdaptor/customadaptor.client/src/components/icons/IconSupport.vue
new file mode 100644
index 0000000..7452834
--- /dev/null
+++ b/CustomAdaptor/customadaptor.client/src/components/icons/IconSupport.vue
@@ -0,0 +1,7 @@
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor">
+    <path
+      d="M10 3.22l-.61-.6a5.5 5.5 0 0 0-7.666.105 5.5 5.5 0 0 0-.114 7.665L10 18.78l8.39-8.4a5.5 5.5 0 0 0-.114-7.665 5.5 5.5 0 0 0-7.666-.105l-.61.61z"
+    />
+  </svg>
+</template>
diff --git a/CustomAdaptor/customadaptor.client/src/components/icons/IconTooling.vue b/CustomAdaptor/customadaptor.client/src/components/icons/IconTooling.vue
new file mode 100644
index 0000000..660598d
--- /dev/null
+++ b/CustomAdaptor/customadaptor.client/src/components/icons/IconTooling.vue
@@ -0,0 +1,19 @@
+<!-- This icon is from <https://github.com/Templarian/MaterialDesign>, distributed under Apache 2.0 (https://www.apache.org/licenses/LICENSE-2.0) license-->
+<template>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    xmlns:xlink="http://www.w3.org/1999/xlink"
+    aria-hidden="true"
+    role="img"
+    class="iconify iconify--mdi"
+    width="24"
+    height="24"
+    preserveAspectRatio="xMidYMid meet"
+    viewBox="0 0 24 24"
+  >
+    <path
+      d="M20 18v-4h-3v1h-2v-1H9v1H7v-1H4v4h16M6.33 8l-1.74 4H7v-1h2v1h6v-1h2v1h2.41l-1.74-4H6.33M9 5v1h6V5H9m12.84 7.61c.1.22.16.48.16.8V18c0 .53-.21 1-.6 1.41c-.4.4-.85.59-1.4.59H4c-.55 0-1-.19-1.4-.59C2.21 19 2 18.53 2 18v-4.59c0-.32.06-.58.16-.8L4.5 7.22C4.84 6.41 5.45 6 6.33 6H7V5c0-.55.18-1 .57-1.41C7.96 3.2 8.44 3 9 3h6c.56 0 1.04.2 1.43.59c.39.41.57.86.57 1.41v1h.67c.88 0 1.49.41 1.83 1.22l2.34 5.39z"
+      fill="currentColor"
+    ></path>
+  </svg>
+</template>
diff --git a/CustomAdaptor/customadaptor.client/src/customadaptor.js b/CustomAdaptor/customadaptor.client/src/customadaptor.js
new file mode 100644
index 0000000..62e3513
--- /dev/null
+++ b/CustomAdaptor/customadaptor.client/src/customadaptor.js
@@ -0,0 +1,21 @@
+import { ODataV4Adaptor } from '@syncfusion/ej2-data';
+import { setValue } from '@syncfusion/ej2-base';
+export default class CustomAdaptor extends ODataV4Adaptor {
+    processQuery(dm, query) {
+        query.addParams('Syncfusion in Vue Grid', 'true'); // Add the additional parameter
+        return super.processQuery.apply(this, arguments);
+    }
+     beforeSend(dm, request, settings) {
+       request.headers.set('Authorization', `true`);
+       super.beforeSend(dm, request, settings);
+     }
+    processResponse() {
+        let i = 0;
+        const original = super.processResponse.apply(this, arguments);
+        /* Adding serial number */
+        if (original.result) {
+            original.result.forEach((item) => setValue('SNo', ++i, item));
+        }
+        return original;
+    }
+}
diff --git a/CustomAdaptor/customadaptor.client/src/main.js b/CustomAdaptor/customadaptor.client/src/main.js
new file mode 100644
index 0000000..0ac3a5f
--- /dev/null
+++ b/CustomAdaptor/customadaptor.client/src/main.js
@@ -0,0 +1,6 @@
+import './assets/main.css'
+
+import { createApp } from 'vue'
+import App from './App.vue'
+
+createApp(App).mount('#app')
diff --git a/CustomAdaptor/customadaptor.client/vite.config.js b/CustomAdaptor/customadaptor.client/vite.config.js
new file mode 100644
index 0000000..1fa3f28
--- /dev/null
+++ b/CustomAdaptor/customadaptor.client/vite.config.js
@@ -0,0 +1,57 @@
+import { fileURLToPath, URL } from 'node:url';
+
+import { defineConfig } from 'vite';
+import plugin from '@vitejs/plugin-vue';
+import fs from 'fs';
+import path from 'path';
+import child_process from 'child_process';
+import { env } from 'process';
+
+const baseFolder =
+    env.APPDATA !== undefined && env.APPDATA !== ''
+        ? `${env.APPDATA}/ASP.NET/https`
+        : `${env.HOME}/.aspnet/https`;
+
+const certificateName = "odatav4adaptor.client";
+const certFilePath = path.join(baseFolder, `${certificateName}.pem`);
+const keyFilePath = path.join(baseFolder, `${certificateName}.key`);
+
+if (!fs.existsSync(certFilePath) || !fs.existsSync(keyFilePath)) {
+    if (0 !== child_process.spawnSync('dotnet', [
+        'dev-certs',
+        'https',
+        '--export-path',
+        certFilePath,
+        '--format',
+        'Pem',
+        '--no-password',
+    ], { stdio: 'inherit', }).status) {
+        throw new Error("Could not create certificate.");
+    }
+}
+
+const target = env.ASPNETCORE_HTTPS_PORT ? `https://localhost:${env.ASPNETCORE_HTTPS_PORT}` :
+    env.ASPNETCORE_URLS ? env.ASPNETCORE_URLS.split(';')[0] : 'https://localhost:7215';
+
+// https://vitejs.dev/config/
+export default defineConfig({
+    plugins: [plugin()],
+    resolve: {
+        alias: {
+            '@': fileURLToPath(new URL('./src', import.meta.url))
+        }
+    },
+    server: {
+        proxy: {
+            '^/weatherforecast': {
+                target,
+                secure: false
+            }
+        },
+        port: 5173,
+        https: {
+            key: fs.readFileSync(keyFilePath),
+            cert: fs.readFileSync(certFilePath),
+        }
+    }
+})
diff --git a/README.md b/README.md
index 19c089e..262decf 100644
--- a/README.md
+++ b/README.md
@@ -19,6 +19,7 @@ This repository demonstrates how to bind data from various remote services to a
 * ODataV4Adaptor
 * GraphQLAdaptor
 * RemoteSaveAdaptor
+* CustomAdaptor
 
 ## Prerequisites