diff --git a/ej2-vue/grid/columns/foreign-key-column.md b/ej2-vue/grid/columns/foreign-key-column.md
index 382b7723c..e1c88a694 100644
--- a/ej2-vue/grid/columns/foreign-key-column.md
+++ b/ej2-vue/grid/columns/foreign-key-column.md
@@ -300,4 +300,456 @@ In the following example, **Customer Name** and **Ship City** are foreign key co
{% endhighlight %}
{% endtabs %}
-{% previewsample "page.domainurl/code-snippet/grid/column/foreigncolumn-cs2" %}
\ No newline at end of file
+{% previewsample "page.domainurl/code-snippet/grid/column/foreigncolumn-cs2" %}
+
+## Edit template in foreign key column using remote data
+
+The Syncfusion Vue Grid allows you to customize the edit template for foreign key columns when using remote data. By default, a [DropDownList](https://ej2.syncfusion.com/vue/documentation/drop-down-list/getting-started) component is used for editing foreign key column. However, you can render a different component by configuring the [column.edit](https://ej2.syncfusion.com/vue/documentation/api/grid/column/#edit) property.
+
+This example demonstrates how to use an edit template in a foreign key column with remote data. In this case, an [AutoComplete](https://ej2.syncfusion.com/vue/documentation/auto-complete/getting-started) component is rendered as the edit template for the **EmployeeID** foreign key column. The [dataSource](https://ej2.syncfusion.com/vue/documentation/api/auto-complete/#datasource) property of the **AutoComplete** component is set to the employees data, and the [field](https://helpej2.syncfusion.com/vue/documentation/api/grid/column/#field) property is configured to display the **FirstName** field as the value. Follow the steps below to achieve this:
+
+**Step 1:** Open Visual Studio and create an **Vue and ASP.NET Core** project named **EditTemplate**. To create an Vue and ASP.NET Core application, follow the documentation [link](https://learn.microsoft.com/en-us/visualstudio/javascript/tutorial-asp-net-core-with-vue?view=vs-2022) for detailed steps.
+
+**Step 2 :** Create a simple Grid by following the [Getting Started](https://ej2.syncfusion.com/vue/documentation/grid/getting-started) documentation link.
+
+**Step 3:** In your Vue component file (**App.vue**), include the following styles to import necessary Syncfusion styles:
+
+```css
+@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';
+```
+
+**Step 4:** In your Vue component file (e.g., **App.vue**), define the Grid with the necessary configurations, including a foreign key column for **EmployeeID**, and implement the required logic to manage its behavior.
+
+{% tabs %}
+{% highlight html tabtitle="Composition API (~/src/App.vue)" %}
+{% raw %}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+{% endraw %}
+{% endhighlight %}
+
+{% highlight html tabtitle="Options API (~/src/App.vue)" %}
+{% raw %}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+{% endraw %}
+{% endhighlight %}
+{% endtabs %}
+
+**Step 5:** On the server side, create a controller named **GridController.cs** under the **Controllers** folder to handle API requests:
+
+```cs
+
+using Microsoft.AspNetCore.Http;
+using Microsoft.AspNetCore.Mvc;
+using Syncfusion.EJ2.Base;
+using EditTemplate.Server.Models;
+
+namespace EditTemplate.Server.Controllers
+{
+ [ApiController]
+ public class GridController : Controller
+ {
+ [HttpGet]
+ [Route("employees")]
+ public ActionResult> GetEmployees()
+ {
+ return Employee.GetAllEmployees();
+ }
+ [HttpPost]
+ [Route("api/[controller]")]
+ public object Post()
+ {
+ // Retrieve data from the data source (e.g., database).
+ IQueryable DataSource = GetOrderData().AsQueryable();
+ // Get the total records count.
+ int totalRecordsCount = DataSource.Count();
+ // Return data based on the request.
+ return new { result = DataSource, count = totalRecordsCount };
+ }
+ [HttpPost]
+ [Route("api/[controller]/employees")]
+ public ActionResult> employees()
+ {
+ return Employee.GetAllEmployees();
+ }
+ [HttpGet]
+ [Route("api/[controller]")]
+ public List GetOrderData()
+ {
+ var data = OrdersDetails.GetAllRecords().ToList();
+ return data;
+ }
+ ///
+ /// Inserts a new data item into the data collection.
+ ///
+ /// The order to be inserted.
+ /// It returns the newly inserted record detail.
+ [HttpPost]
+ [Route("api/[controller]/Insert")]
+ public ActionResult Insert([FromBody] CRUDModel newRecord)
+ {
+ if (newRecord.value != null)
+ {
+ OrdersDetails.GetAllRecords().Insert(0, newRecord.value);
+ }
+ return Json(newRecord.value);
+ }
+
+ ///
+ /// Updates an existing order.
+ ///
+ /// The updated order details.
+ /// It returns the updated order details.
+ [HttpPost]
+ [Route("api/[controller]/Update")]
+ public object Update([FromBody] CRUDModel updatedRecord)
+ {
+ var updatedOrder = updatedRecord.value;
+ if (updatedOrder != null)
+ {
+ var data = OrdersDetails.GetAllRecords().FirstOrDefault(or => or.OrderID == updatedOrder.OrderID);
+ if (data != null)
+ {
+ // Update the existing record.
+ data.OrderID = updatedOrder.OrderID;
+ data.EmployeeID = updatedOrder.EmployeeID;
+ data.Freight = updatedOrder.Freight;
+ data.ShipCity = updatedOrder.ShipCity;
+ // Update other properties similarly.
+ }
+ }
+ return updatedRecord;
+ }
+ ///
+ /// Deletes an order.
+ ///
+ /// It contains the specific record detail which is need to be removed.
+ /// It returns the deleted record detail.
+ [HttpPost]
+ [Route("api/[controller]/Remove")]
+ public object Remove([FromBody] CRUDModel deletedRecord)
+ {
+ int orderId = int.Parse(deletedRecord.key.ToString()); // Get key value from the deletedRecord.
+ var data = OrdersDetails.GetAllRecords().FirstOrDefault(orderData => orderData.OrderID == orderId);
+ if (data != null)
+ {
+ // Remove the record from the data collection.
+ OrdersDetails.GetAllRecords().Remove(data);
+ }
+ return deletedRecord;
+ }
+ public class CRUDModel where T : class
+ {
+ public string? action { get; set; }
+
+ public string? keyColumn { get; set; }
+
+ public object? key { get; set; }
+
+ public T? value { get; set; }
+
+ public List? added { get; set; }
+
+ public List? changed { get; set; }
+
+ public List? deleted { get; set; }
+
+ public IDictionary? @params { get; set; }
+ }
+ }
+}
+
+```
+
+**Step 6:** Create a model class named **OrdersDetails.cs** under the **Models** folder in the server-side project to represent the order data and employee data:
+
+```cs
+
+namespace EditTemplate.Server.Models
+{
+ public class OrdersDetails
+ {
+ private static List order = new List();
+
+ public OrdersDetails() { }
+
+ public OrdersDetails(int OrderID, string CustomerId, int EmployeeId, double Freight, bool Verified,
+ DateTime OrderDate, string ShipCity, string ShipName, string ShipCountry,
+ DateTime ShippedDate, string ShipAddress)
+ {
+ this.OrderID = OrderID;
+ this.CustomerID = CustomerId;
+ this.EmployeeID = EmployeeId;
+ this.Freight = Freight;
+ this.ShipCity = ShipCity;
+ this.Verified = Verified;
+ this.OrderDate = OrderDate;
+ this.ShipName = ShipName;
+ this.ShipCountry = ShipCountry;
+ this.ShippedDate = ShippedDate;
+ this.ShipAddress = ShipAddress;
+ }
+
+ public static List GetAllRecords()
+ {
+ if (order.Count == 0)
+ {
+ int code = 10000;
+ List employees = Employee.GetAllEmployees();
+ int employeeCount = employees.Count;
+
+ for (int i = 1; i < 10; i++)
+ {
+ order.Add(new OrdersDetails(code++, "ALFKI", employees[(code + 0) % employeeCount].EmployeeID, 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++, "ANATR", employees[(code + 1) % employeeCount].EmployeeID, 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++, "ANTON", employees[(code + 2) % employeeCount].EmployeeID, 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++, "BLONP", employees[(code + 3) % employeeCount].EmployeeID, 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++, "BOLID", employees[(code + 4) % employeeCount].EmployeeID, 6.3 * i, true, new DateTime(1953, 02, 18), "Tsawassen", "Hanari Carnes", "Switzerland", new DateTime(1997, 12, 3), "1029 - 12th Ave. S."));
+ }
+ }
+ return order;
+ }
+
+ public int? OrderID { get; set; }
+ public string? CustomerID { get; set; }
+ public int? EmployeeID { get; set; }
+ public double? Freight { get; set; }
+ public string? ShipCity { get; set; }
+ public bool? Verified { get; set; }
+ public DateTime OrderDate { get; set; }
+ public string? ShipName { get; set; }
+ public string? ShipCountry { get; set; }
+ public DateTime ShippedDate { get; set; }
+ public string? ShipAddress { get; set; }
+ }
+ public class Employee
+ {
+ public int EmployeeID { get; set; }
+ public string? FirstName { get; set; }
+ public string? LastName { get; set; }
+ public string? Department { get; set; }
+ public string? Email { get; set; }
+ public string? PhoneNumber { get; set; }
+
+ public static List GetAllEmployees()
+ {
+ return new List
+ {
+ new Employee { EmployeeID = 1, FirstName = "John", LastName = "Doe", Department = "Sales", Email = "john.doe@example.com", PhoneNumber = "123-456-7890" },
+ new Employee { EmployeeID = 2, FirstName = "David", LastName = "Smith", Department = "Marketing", Email = "david.smith@example.com", PhoneNumber = "987-654-3210" },
+ new Employee { EmployeeID = 3, FirstName = "Maria", LastName = "Gonzalez", Department = "HR", Email = "maria.gonzalez@example.com", PhoneNumber = "456-789-0123" },
+ new Employee { EmployeeID = 4, FirstName = "Sophia", LastName = "Brown", Department = "Finance", Email = "sophia.brown@example.com", PhoneNumber = "321-654-0987" },
+ new Employee { EmployeeID = 5, FirstName = "James", LastName = "Wilson", Department = "IT", Email = "james.wilson@example.com", PhoneNumber = "654-321-7654" },
+ new Employee { EmployeeID = 6, FirstName = "Emma", LastName = "Taylor", Department = "Operations", Email = "emma.taylor@example.com", PhoneNumber = "213-546-8790" },
+ new Employee { EmployeeID = 7, FirstName = "Daniel", LastName = "Anderson", Department = "Logistics", Email = "daniel.anderson@example.com", PhoneNumber = "789-654-3210" },
+ new Employee { EmployeeID = 8, FirstName = "Olivia", LastName = "Thomas", Department = "Procurement", Email = "olivia.thomas@example.com", PhoneNumber = "567-890-1234" },
+ new Employee { EmployeeID = 9, FirstName = "Michael", LastName = "Harris", Department = "R&D", Email = "michael.harris@example.com", PhoneNumber = "890-123-4567" },
+ new Employee { EmployeeID = 10, FirstName = "Lucas", LastName = "Martin", Department = "Customer Service", Email = "lucas.martin@example.com", PhoneNumber = "345-678-9012" },
+ new Employee { EmployeeID = 11, FirstName = "Elijah", LastName = "Clark", Department = "Support", Email = "elijah.clark@example.com", PhoneNumber = "741-852-9630" },
+ new Employee { EmployeeID = 12, FirstName = "Isabella", LastName = "Hall", Department = "Legal", Email = "isabella.hall@example.com", PhoneNumber = "963-852-7410" },
+ new Employee { EmployeeID = 13, FirstName = "Ethan", LastName = "Young", Department = "Administration", Email = "ethan.young@example.com", PhoneNumber = "258-963-1470" },
+ new Employee { EmployeeID = 14, FirstName = "Charlotte", LastName = "Scott", Department = "Design", Email = "charlotte.scott@example.com", PhoneNumber = "147-258-3690" },
+ new Employee { EmployeeID = 15, FirstName = "Alexander", LastName = "Allen", Department = "Engineering", Email = "alexander.allen@example.com", PhoneNumber = "369-147-2580" }
+ };
+ }
+ }
+}
+
+```
+
+**Step 7:** In the **Program.cs** file, add the following code:
+
+```cs
+
+var builder = WebApplication.CreateBuilder(args);
+// Add services to the container.
+builder.Services.AddControllers();
+// 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/ej2-vue/grid/images/edit-template.gif b/ej2-vue/grid/images/edit-template.gif
new file mode 100644
index 000000000..afcc29055
Binary files /dev/null and b/ej2-vue/grid/images/edit-template.gif differ
diff --git a/ej2-vue/grid/images/row-selected-record.png b/ej2-vue/grid/images/row-selected-record.png
new file mode 100644
index 000000000..f1fb5f1cc
Binary files /dev/null and b/ej2-vue/grid/images/row-selected-record.png differ
diff --git a/ej2-vue/grid/selection/row-selection.md b/ej2-vue/grid/selection/row-selection.md
index 336a145f4..ce9ce10e7 100644
--- a/ej2-vue/grid/selection/row-selection.md
+++ b/ej2-vue/grid/selection/row-selection.md
@@ -685,4 +685,634 @@ components: {
{% endhighlight %}
{% endtabs %}
-{% previewsample "page.domainurl/code-snippet/grid/select/selection-row-events" %}
\ No newline at end of file
+{% previewsample "page.domainurl/code-snippet/grid/select/selection-row-events" %}
+
+## Pass selected records to server using AJAX
+
+The Syncfusion Vue Grid allows you to select multiple or single records and send them to the server using AJAX requests. This feature is useful for scenarios where you need to process or manipulate selected data on the server side.
+
+To achieve passing selected records to the server using AJAX requests in the Grid, follow these steps:
+
+**Step 1:** Open Visual Studio and create an **Vue and ASP.NET Core** project named **SelectedRecord**. To create an Vue and ASP.NET Core application, follow the documentation [link](https://learn.microsoft.com/en-us/visualstudio/javascript/tutorial-asp-net-core-with-vue?view=vs-2022) for detailed steps.
+
+**Step 2:** Create a simple Vue Grid by following the [Getting Started](https://ej2.syncfusion.com/vue/documentation/grid/getting-started) documentation link.
+
+**Step 3:** In your Vue component file (e.g., **App.vue**), add a button to trigger the AJAX call and include the Grid with necessary configurations. Handle the button [click](https://ej2.syncfusion.com/vue/documentation/api/button#click) event to retrieve the selected records using the [getSelectedRecords](https://ej2.syncfusion.com/vue/documentation/api/grid/#getselectedrecords) method from the Grid and send them to the server using AJAX.
+
+{% tabs %}
+{% highlight html tabtitle="Composition API (~/src/App.vue)" %}
+{% raw %}
+
+
+
+ Pass the selected records to controller
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+{% endraw %}
+{% endhighlight %}
+
+{% highlight html tabtitle="Options API (~/src/App.vue)" %}
+{% raw %}
+
+
+
+ Pass the selected records to controller
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+{% endraw %}
+{% endhighlight %}
+{% endtabs %}
+
+**Step 4:** On the server side, create a controller named **GridController.cs** under the **Controllers** folder to handle incoming requests and process selected records. Add the following code:
+
+```cs
+
+using Microsoft.AspNetCore.Http;
+using Microsoft.AspNetCore.Mvc;
+using Syncfusion.EJ2.Base;
+using SelectedReacord.Server.Models;
+namespace SelectedReacord.Server.Controllers
+{
+ [ApiController]
+ public class GridController : Controller
+ {
+ [HttpPost]
+ [Route("api/[controller]")]
+ public object Post()
+ {
+ // Retrieve data from the data source (e.g., database).
+ IQueryable DataSource = GetOrderData().AsQueryable();
+
+ // Get the total records count.
+ int totalRecordsCount = DataSource.Count();
+
+ // Return data based on the request.
+ return new { result = DataSource, count = totalRecordsCount };
+ }
+ [HttpGet]
+ [Route("api/[controller]")]
+ public List GetOrderData()
+ {
+ var data = OrdersDetails.GetAllRecords().ToList();
+ return data;
+ }
+ [HttpPost]
+ [Route("api/[controller]/SelectRecord")]
+ public ActionResult SelectRecord([FromBody] List row)
+ {
+ return Json(row);
+ }
+ public class SelectedModel
+ {
+ public List rowData { get; set; }
+ }
+ public class Gridcolumns
+ {
+ public int OrderID { get; set; }
+ public string CustomerID { get; set; }
+ public int EmployeeID { get; set; }
+ public DateTime OrderDate { get; set; }
+ }
+ }
+}
+
+```
+
+**Step 5:** Create a model class named **OrdersDetails.cs** under the **Models** folder in the server-side project to represent the order data. Add the following code:
+
+```cs
+namespace SelectedReacord.Server.Models
+{
+ public class OrdersDetails
+ {
+ public static List order = new List();
+ public OrdersDetails() { }
+ public OrdersDetails(
+ int OrderID, string CustomerId, int EmployeeId, double Freight, bool Verified,
+ DateTime OrderDate, string ShipCity, string ShipName, string ShipCountry,
+ DateTime ShippedDate, string ShipAddress)
+ {
+ this.OrderID = OrderID;
+ this.CustomerID = CustomerId;
+ this.EmployeeID = EmployeeId;
+ this.Freight = Freight;
+ this.ShipCity = ShipCity;
+ this.Verified = Verified;
+ this.OrderDate = OrderDate;
+ this.ShipName = ShipName;
+ this.ShipCountry = ShipCountry;
+ this.ShippedDate = ShippedDate;
+ this.ShipAddress = ShipAddress;
+ }
+
+ public static List GetAllRecords()
+ {
+ if (order.Count() == 0)
+ {
+ int code = 10000;
+ for (int i = 1; i < 10; i++)
+ {
+ order.Add(new OrdersDetails(code + 1, "ALFKI", i + 0, 2.3 * i, false, new DateTime(1991, 05, 15), "Berlin", "Simons bistro", "Denmark", new DateTime(1996, 7, 16), "Kirchgasse 6"));
+ order.Add(new OrdersDetails(code + 2, "ANATR", i + 2, 3.3 * i, true, new DateTime(1990, 04, 04), "Madrid", "Queen Cozinha", "Brazil", new DateTime(1996, 9, 11), "Avda. Azteca 123"));
+ order.Add(new OrdersDetails(code + 3, "ANTON", i + 1, 4.3 * i, true, new DateTime(1957, 11, 30), "Cholchester", "Frankenversand", "Germany", new DateTime(1996, 10, 7), "Carrera 52 con Ave. Bolívar #65-98 Llano Largo"));
+ order.Add(new OrdersDetails(code + 4, "BLONP", i + 3, 5.3 * i, false, new DateTime(1930, 10, 22), "Marseille", "Ernst Handel", "Austria", new DateTime(1996, 12, 30), "Magazinweg 7"));
+ order.Add(new OrdersDetails(code + 5, "BOLID", i + 4, 6.3 * i, true, new DateTime(1953, 02, 18), "Tsawassen", "Hanari Carnes", "Switzerland", new DateTime(1997, 12, 3), "1029 - 12th Ave. S."));
+ code += 5;
+ }
+ }
+ return order;
+ }
+
+ public int? OrderID { get; set; }
+ public string? CustomerID { get; set; }
+ public int? EmployeeID { get; set; }
+ public double? Freight { get; set; }
+ public string? ShipCity { get; set; }
+ public bool? Verified { get; set; }
+ public DateTime OrderDate { get; set; }
+ public string? ShipName { get; set; }
+ public string? ShipCountry { get; set; }
+ public DateTime ShippedDate { get; set; }
+ public string? ShipAddress { get; set; }
+ }
+}
+
+```
+
+**Step 6:** In the **Program.cs** file, add the following code:
+
+```cs
+
+var builder = WebApplication.CreateBuilder(args);
+// Add services to the container.
+builder.Services.AddControllers();
+// 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();
+
+```
+
+The following screenshot shows how to pass selected records to the server:
+
+
+
+## Pass selected records to server using FETCH
+
+The Syncfusion Vue Grid allows you to select multiple or single records and send them to the server using Fetch requests. This feature is useful for scenarios where you need to process or manipulate selected data on the server side.
+
+To achieve passing selected records to the server using Fetch requests in the Grid, follow these steps:
+
+**Step 1:** Open Visual Studio and create an **Vue and ASP.NET Core** project named **SelectedRecord**. To create an Vue and ASP.NET Core application, follow the documentation [link](https://learn.microsoft.com/en-us/visualstudio/javascript/tutorial-asp-net-core-with-vue?view=vs-2022) for detailed steps.
+
+**Step 2:** Create a simple Vue Grid by following the [Getting Started](https://ej2.syncfusion.com/vue/documentation/grid/getting-started) documentation link.
+
+**Step 3:** In your Vue component file (e.g., **App.vue**), add a button to trigger the AJAX call and include the Grid with necessary configurations. Handle the button [click](https://ej2.syncfusion.com/vue/documentation/api/button#click) event to retrieve the selected records using the [getSelectedRecords](https://ej2.syncfusion.com/vue/documentation/api/grid/#getselectedrecords) method from the Grid and send them to the server using AJAX.
+
+{% tabs %}
+{% highlight html tabtitle="Composition API (~/src/App.vue)" %}
+{% raw %}
+
+
+
+ Pass the selected records to controller
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+{% endraw %}
+{% endhighlight %}
+
+{% highlight html tabtitle="Options API (~/src/App.vue)" %}
+{% raw %}
+
+
+
+ Pass the selected records to controller
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+{% endraw %}
+{% endhighlight %}
+{% endtabs %}
+
+**Step 4:** On the server side, create a controller named **GridController.cs** under the **Controllers** folder to handle incoming requests and process selected records. Add the following code:
+
+```cs
+
+using Microsoft.AspNetCore.Http;
+using Microsoft.AspNetCore.Mvc;
+using Syncfusion.EJ2.Base;
+using SelectedReacord.Server.Models;
+namespace SelectedReacord.Server.Controllers
+{
+ [ApiController]
+ public class GridController : Controller
+ {
+ [HttpPost]
+ [Route("api/[controller]")]
+ public object Post()
+ {
+ // Retrieve data from the data source (e.g., database).
+ IQueryable DataSource = GetOrderData().AsQueryable();
+
+ // Get the total records count.
+ int totalRecordsCount = DataSource.Count();
+
+ // Return data based on the request.
+ return new { result = DataSource, count = totalRecordsCount };
+ }
+ [HttpGet]
+ [Route("api/[controller]")]
+ public List GetOrderData()
+ {
+ var data = OrdersDetails.GetAllRecords().ToList();
+ return data;
+ }
+ [HttpPost]
+ [Route("api/[controller]/SelectRecord")]
+ public ActionResult SelectRecord([FromBody] List row)
+ {
+ return Json(row);
+ }
+ public class SelectedModel
+ {
+ public List rowData { get; set; }
+ }
+ public class Gridcolumns
+ {
+ public int OrderID { get; set; }
+ public string CustomerID { get; set; }
+ public int EmployeeID { get; set; }
+ public DateTime OrderDate { get; set; }
+ }
+ }
+}
+
+```
+
+**Step 5:** Create a model class named **OrdersDetails.cs** under the **Models** folder in the server-side project to represent the order data. Add the following code:
+
+```cs
+namespace SelectedReacord.Server.Models
+{
+ public class OrdersDetails
+ {
+ public static List order = new List();
+ public OrdersDetails() { }
+ public OrdersDetails(
+ int OrderID, string CustomerId, int EmployeeId, double Freight, bool Verified,
+ DateTime OrderDate, string ShipCity, string ShipName, string ShipCountry,
+ DateTime ShippedDate, string ShipAddress)
+ {
+ this.OrderID = OrderID;
+ this.CustomerID = CustomerId;
+ this.EmployeeID = EmployeeId;
+ this.Freight = Freight;
+ this.ShipCity = ShipCity;
+ this.Verified = Verified;
+ this.OrderDate = OrderDate;
+ this.ShipName = ShipName;
+ this.ShipCountry = ShipCountry;
+ this.ShippedDate = ShippedDate;
+ this.ShipAddress = ShipAddress;
+ }
+
+ public static List GetAllRecords()
+ {
+ if (order.Count() == 0)
+ {
+ int code = 10000;
+ for (int i = 1; i < 10; i++)
+ {
+ order.Add(new OrdersDetails(code + 1, "ALFKI", i + 0, 2.3 * i, false, new DateTime(1991, 05, 15), "Berlin", "Simons bistro", "Denmark", new DateTime(1996, 7, 16), "Kirchgasse 6"));
+ order.Add(new OrdersDetails(code + 2, "ANATR", i + 2, 3.3 * i, true, new DateTime(1990, 04, 04), "Madrid", "Queen Cozinha", "Brazil", new DateTime(1996, 9, 11), "Avda. Azteca 123"));
+ order.Add(new OrdersDetails(code + 3, "ANTON", i + 1, 4.3 * i, true, new DateTime(1957, 11, 30), "Cholchester", "Frankenversand", "Germany", new DateTime(1996, 10, 7), "Carrera 52 con Ave. Bolívar #65-98 Llano Largo"));
+ order.Add(new OrdersDetails(code + 4, "BLONP", i + 3, 5.3 * i, false, new DateTime(1930, 10, 22), "Marseille", "Ernst Handel", "Austria", new DateTime(1996, 12, 30), "Magazinweg 7"));
+ order.Add(new OrdersDetails(code + 5, "BOLID", i + 4, 6.3 * i, true, new DateTime(1953, 02, 18), "Tsawassen", "Hanari Carnes", "Switzerland", new DateTime(1997, 12, 3), "1029 - 12th Ave. S."));
+ code += 5;
+ }
+ }
+ return order;
+ }
+
+ public int? OrderID { get; set; }
+ public string? CustomerID { get; set; }
+ public int? EmployeeID { get; set; }
+ public double? Freight { get; set; }
+ public string? ShipCity { get; set; }
+ public bool? Verified { get; set; }
+ public DateTime OrderDate { get; set; }
+ public string? ShipName { get; set; }
+ public string? ShipCountry { get; set; }
+ public DateTime ShippedDate { get; set; }
+ public string? ShipAddress { get; set; }
+ }
+}
+
+```
+
+**Step 6:** In the **Program.cs** file, add the following code:
+
+```cs
+
+var builder = WebApplication.CreateBuilder(args);
+// Add services to the container.
+builder.Services.AddControllers();
+// 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();
+
+```
+
+The following screenshot shows how to pass selected records to the server:
+
+
\ No newline at end of file