documentation(945801):Sort foreign key column based on text

ej2-asp-core-mvc/code-snippet/grid/sorting/foreign-sort-remote/foreign-sort.cs

@@ -0,0 +1,55 @@
+public ActionResult Index()
+{
+  return View();
+}
+
+public ActionResult GetEmployeeRecords()
+{
+  IEnumerable employeeData = EmployeeView.GetAllRecords();
+  return Json(employeeData);
+}
+
+public ActionResult GetOrderRecords(DataManagerRequest request)
+{
+  IEnumerable orderData = OrdersDetails.GetAllRecords();
+  DataOperations dataOperations = new DataOperations();
+  if (request.Sorted != null && request.Sorted.Count > 0)
+  {
+    string sortColumn = request.Sorted[0].Name;
+    string sortDirection = request.Sorted[0].Direction;
+    if (sortColumn == "EmployeeID")
+    {
+      orderData = GetSortedOrdersByEmployee(sortDirection);
+    }
+    else
+    {
+      orderData = dataOperations.PerformSorting(orderData, request.Sorted);
+    }
+  }
+  int totalRecords = orderData.Cast<OrdersDetails>().Count();
+  if (request.Skip != 0)
+  {
+    orderData = dataOperations.PerformSkip(orderData, request.Skip);
+  }
+  if (request.Take != 0)
+  {
+    orderData = dataOperations.PerformTake(orderData, request.Take);
+  }
+  return request.RequiresCounts ? Json(new { result = orderData, count = totalRecords }) : Json(orderData);
+}
+
+private List<OrdersDetails> GetSortedOrdersByEmployee(string sortDirection)
+{
+  var employees = EmployeeView.GetAllRecords();
+  List<EmployeeView> sortedEmployees = (sortDirection == "ascending")
+    ? employees.OrderBy(e => e.FirstName).ToList()
+    : employees.OrderByDescending(e => e.FirstName).ToList();
+
+  List<OrdersDetails> sortedOrders = new List<OrdersDetails>();
+  foreach (var employee in sortedEmployees)
+  {
+    var employeeOrders = OrdersDetails.GetAllRecords().Where(o => o.EmployeeID == employee.EmployeeID).ToList();
+    sortedOrders.AddRange(employeeOrders);
+  }
+  return sortedOrders;
+}

ej2-asp-core-mvc/code-snippet/grid/sorting/foreign-sort-remote/foreign-sortcore.cs

@@ -0,0 +1,55 @@
+public IActionResult Index()
+{
+  return View();
+}
+
+public IActionResult GetEmployeeRecords()
+{
+  IEnumerable employeeData = EmployeeView.GetAllRecords();
+  return Json(employeeData);
+}
+
+public IActionResult GetOrderRecords([FromBody] DataManagerRequest request)
+{
+  IEnumerable orderData = OrdersDetails.GetAllRecords();
+  DataOperations dataOperations = new DataOperations();
+  if (request.Sorted != null && request.Sorted.Count > 0)
+  {
+    string sortColumn = request.Sorted[0].Name;
+    string sortDirection = request.Sorted[0].Direction;
+    if (sortColumn == "EmployeeID")
+    {
+      orderData = GetSortedOrdersByEmployee(sortDirection);
+    }
+    else
+    {
+      orderData = dataOperations.PerformSorting(orderData, request.Sorted);
+    }
+  }
+  int totalRecords = orderData.Cast<OrdersDetails>().Count();
+  if (request.Skip != 0)
+  {
+    orderData = dataOperations.PerformSkip(orderData, request.Skip);
+  }
+  if (request.Take != 0)
+  {
+    orderData = dataOperations.PerformTake(orderData, request.Take);
+  }
+  return request.RequiresCounts ? Json(new { result = orderData, count = totalRecords }) : Json(orderData);
+}
+
+private List<OrdersDetails> GetSortedOrdersByEmployee(string sortDirection)
+{
+  var employees = EmployeeView.GetAllRecords();
+  List<EmployeeView> sortedEmployees = (sortDirection == "ascending")
+    ? employees.OrderBy(e => e.FirstName).ToList()
+    : employees.OrderByDescending(e => e.FirstName).ToList();
+
+  List<OrdersDetails> sortedOrders = new List<OrdersDetails>();
+  foreach (var employee in sortedEmployees)
+  {
+    var employeeOrders = OrdersDetails.GetAllRecords().Where(o => o.EmployeeID == employee.EmployeeID).ToList();
+    sortedOrders.AddRange(employeeOrders);
+  }
+  return sortedOrders;
+}

ej2-asp-core-mvc/code-snippet/grid/sorting/foreign-sort-remote/razor

@@ -0,0 +1,8 @@
+@Html.EJS().Grid("grid").DataSource(ds => ds.Url(@Url.Action("GetOrderRecords", "Home")).Adaptor("UrlAdaptor")).Height("348px").Columns(col =>
+{
+    col.Field("OrderID").HeaderText("Order ID").IsPrimaryKey(true).Width("120").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
+    col.Field("EmployeeID").HeaderText("Employee Name").ForeignKeyField("EmployeeID").ForeignKeyValue("FirstName").DataSource(ds => ds.Url(@Url.Action("GetEmployeeRecords", "Home")).Adaptor("UrlAdaptor")).Width("140").Add();
+    col.Field("CustomerID").HeaderText("Customer ID").Width("150").Add();
+    col.Field("Freight").HeaderText("Freight").Width("120").Format("C2").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
+    col.Field("ShipName").HeaderText("Ship Name").Width("160").Add();
+}).AllowSorting(true).AllowPaging(true).Render()

ej2-asp-core-mvc/code-snippet/grid/sorting/foreign-sort-remote/tagHelper

@@ -0,0 +1,14 @@
+@{
+    var GetEmployeeRecords = new Syncfusion.EJ2.DataManager { Url = Url.Action("GetOrderRecords", "Home"), Adaptor = "UrlAdaptor"};
+}
+
+<ejs-grid id="grid" allowSorting="true" allowPaging="true" >
+    <e-data-manager url="/Home/GetEmployeeRecords" adaptor="UrlAdaptor"></e-data-manager>
+    <e-grid-columns>
+        <e-grid-column field="OrderID" headerText="Order ID" isPrimaryKey="true" textAlign="Right" width="125"></e-grid-column>
+        <e-grid-column field="EmployeeID" headerText="Employee ID" foreignKeyField="EmployeeID" foreignKeyValue="FirstName" dataSource=GetEmployeeRecords ></e-grid-column>
+        <e-grid-column field="CustomerID" headerText="CustomerID" width="125"></e-grid-column>
+        <e-grid-column field="Freight" headerText="Freight" textAlign="Right" width="125"></e-grid-column>
+        <e-grid-column field="ShipName" headerText="ShipName" width="125"></e-grid-column>
+    </e-grid-columns>
+</ejs-grid>

ej2-asp-core-mvc/grid/EJ2_ASP.MVC/sorting.md

@@ -1,6 +1,6 @@
 ---
 layout: post
-title: Sorting in ##Platform_Name## Grid Component
+title: Sorting in Syncfusion ##Platform_Name## Grid Component | Learn Sorting Features
 description: Learn here all about Sorting in Syncfusion ##Platform_Name## Grid component of Syncfusion Essential JS 2 and more.
 platform: ej2-asp-core-mvc
 control: Sorting
@@ -156,6 +156,23 @@ The following example demonstrates how to perform sorting by enabling a foreign
 
 ![Sorting](images/sorting/sorting-local-forign.png)
 
+**Sort foreign key column based on text for remote data**
+
+In the case of remote data in the Syncfusion ASP.NET MVC Grid, the sorting operation will be performed based on the `ForeignKeyField` property of the column. The `ForeignKeyField` property should be defined in the column definition with the corresponding foreign key field name for each row. The Grid will send a request to the server-side with the `ForeignKeyField` name, and the server-side should handle the sorting operation and return the sorted data to the Grid.
+
+The following example demonstrates sorting a foreign key column where the **EmployeeID** column is a foreign key, and the corresponding **FirstName** column is displayed from the employee data source:
+
+{% tabs %}
+{% highlight razor tabtitle="CSHTML" %}
+{% include code-snippet/grid/sorting/foreign-sort-remote/razor %}
+{% endhighlight %}
+{% highlight c# tabtitle="foreign-sort" %}
+{% include code-snippet/grid/sorting/foreign-sort-remote/foreign-sort.cs %}
+{% endhighlight %}
+{% endtabs %}
+
+![Sorting](images/sorting/sort-remote.gif)
+
 ## Perform sorting based on its culture
 
 Perform sorting based on culture in the Grid can be achieved by utilizing the [Locale](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Grids.Grid.html#Syncfusion_EJ2_Grids_Grid_Locale) property. By setting the `Locale` property to the desired culture code, you enable sorting based on that specific culture. This allows you to apply locale-specific sorting rules and ensure accurate ordering for different languages and regions.

ej2-asp-core-mvc/grid/EJ2_ASP.NETCORE/sorting.md

@@ -1,6 +1,6 @@
 ---
 layout: post
-title: Sorting in ##Platform_Name## Grid Component
+title: Sorting in Syncfusion ##Platform_Name## Grid Component | Learn Sorting Features
 description: Learn here all about Sorting in Syncfusion ##Platform_Name## Grid component of Syncfusion Essential JS 2 and more.
 platform: ej2-asp-core-mvc
 control: Sorting
@@ -156,6 +156,23 @@ The following example demonstrates how to perform sorting by enabling a foreign
 
 ![Sorting](images/sorting/sorting-local-forign.png)
 
+**Sort foreign key column based on text for remote data**
+
+In the case of remote data in the Syncfusion ASP.NET Core Grid, the sorting operation will be performed based on the `foreignKeyField` property of the column. The `foreignKeyField` property should be defined in the column definition with the corresponding foreign key field name for each row. The Grid will send a request to the server-side with the `foreignKeyField` name, and the server-side should handle the sorting operation and return the sorted data to the Grid.
+
+The following example demonstrates sorting a foreign key column where the **EmployeeID** column is a foreign key, and the corresponding **FirstName** column is displayed from the employee data source:
+
+{% tabs %}
+{% highlight cshtml tabtitle="CSHTML" %}
+{% include code-snippet/grid/sorting/foreign-sort-remote/tagHelper %}
+{% endhighlight %}
+{% highlight c# tabtitle="foreign-sort" %}
+{% include code-snippet/grid/sorting/foreign-sort-remote/foreign-sortcore.cs %}
+{% endhighlight %}
+{% endtabs %}
+
+![Sorting](images/sorting/sort-remote.gif)
+
 ## Perform sorting based on its culture
 
 Perform sorting based on culture in the Grid can be achieved by utilizing the [locale](https://help.syncfusion.com/cr/aspnetcore-js2/syncfusion.ej2.grids.grid.html#Syncfusion_EJ2_Grids_Grid_Locale) property. By setting the `locale` property to the desired culture code, you enable sorting based on that specific culture. This allows you to apply locale-specific sorting rules and ensure accurate ordering for different languages and regions.