Skip to content

Added the topic of Sort foreign key column based on text for remote data #3892

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 5 commits into
base: hotfix/hotfix-v28.2.3
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
public IActionResult Index()
{
return View();
}


Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
@Html.EJS().Grid("grid").DataSource(dataManger => { dataManger.Url("/OData/Items").Adaptor("ODataV4Adaptor"); }).Height("348px").Columns(col =>
{
col.Field("OrderID").HeaderText("Order ID").IsPrimaryKey(true).Width("120").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
col.Field("EmployeeID").ForeignKeyField("EmployeeID").ForeignKeyValue("FirstName").DataSource(dataManger => { dataManger.Url("/OData/Brands").Adaptor("ODataV4Adaptor"); }).HeaderText("Employee Name").Width("140").Add();
col.Field("Freight").HeaderText("Freight").Width("120").Format("C2").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
col.Field("ShipCity").HeaderText("Ship City").Width("150").Add();
}).Render()
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
<ejs-grid id="Grid">
<e-data-manager url="/OData/Items" adaptor="ODataV4Adaptor"></e-data-manager>
<e-grid-columns>
<e-grid-column field="OrderID" headerText="Order ID" textAlign="Right" width="120"></e-grid-column>
<e-grid-column field="EmployeeID" headerText="Empolyee Name" foreignKeyField="EmployeeID" foreignKeyValue="FirstName" width="150">
<e-data-manager url="/OData/Brands" adaptor="ODataV4Adaptor"></e-data-manager>
</e-grid-column>
<e-grid-column field="Freight" headerText="Freight" textAlign="Right" format="C2" width="120"></e-grid-column>
<e-grid-column field="ShipCity" headerText="Ship City" width="150"></e-grid-column>
</e-grid-columns>
</ejs-grid>
61 changes: 60 additions & 1 deletion ej2-asp-core-mvc/grid/EJ2_ASP.MVC/sorting.md
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
---
layout: post
title: Sorting in ##Platform_Name## Grid Component
title: Sorting in Syncfusion ##Platform_Name## Grid Component
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
Expand Down Expand Up @@ -156,6 +156,65 @@ 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**

For remote data binding, the Grid performs sorting based on the `foreignKeyField` property defined in the column settings. This property should be mapped to the corresponding foreign key field in the data source. When sorting is applied, the Grid sends a request to the server with the `foreignKeyField` name, and the server is responsible for processing the sorting operation and returning the sorted data. Since the Grid relies on the server response, ensuring that the server correctly sorts the data before sending it back is essential for maintaining the expected order in the Grid.

{% tabs %}
{% highlight cshtml tabtitle="CSHTML" %}
{% include code-snippet/grid/sorting/foreign-sort-remote/razor %}
{% endhighlight %}
{% highlight c# tabtitle="foreign-sort.cs" %}
{% include code-snippet/grid/sorting/foreign-sort-remote/foreign-sort.cs %}
{% endhighlight %}
{% endtabs %}

The following code example describes the handling of sorting operation at the server side.

```
public class ItemsController : ODataController
{
[EnableQuery]
public IQueryable<Item> Get()
{
List<Item> GridData = JsonConvert.DeserializeObject<Item[]>(Properties.Resources.ItemsJson).AsQueryable().ToList();
List<Brand> empData = JsonConvert.DeserializeObject<Brand[]>(Properties.Resources.BrandsJson).AsQueryable().ToList();
var queryString = HttpContext.Current.Request.QueryString;
var allUrlKeyValues = ControllerContext.Request.GetQueryNameValuePairs();
string key = allUrlKeyValues.LastOrDefault(x => x.Key == "$orderby").Value;
if (key != null)
{
if (key == "EmployeeID") {
GridData = SortFor(key); //Only for foreignKey Column ascending.
}
else if(key == "EmployeeID desc") {
GridData = SortFor(key); //Only for foreignKey Column descending.
}
}
var count = GridData.Count();
var data = GridData.AsQueryable();
return data;
}

public List<Item> SortFor(String Sorted)
{
List<Item> GridData = JsonConvert.DeserializeObject<Item[]>(Properties.Resources.ItemsJson).AsQueryable().ToList();
List<Brand> empData = JsonConvert.DeserializeObject<Brand[]>(Properties.Resources.BrandsJson).AsQueryable().ToList();
if (Sorted == "EmployeeID") //Check whether ascending or descending.
empData = empData.OrderBy(e => e.FirstName).ToList();
else if(Sorted == "EmployeeID desc")
empData = empData.OrderByDescending(e => e.FirstName).ToList();
List<Item> or = new List<Item>();
for (int i = 0; i < empData.Count(); i++) {
//Select the Field matching records.
IEnumerable<Item> list = GridData.Where(pred => pred.EmployeeID == empData[i].EmployeeID).ToList();
or.AddRange(list);
}
return or;
}
}
```

## 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.
Expand Down
61 changes: 60 additions & 1 deletion ej2-asp-core-mvc/grid/EJ2_ASP.NETCORE/sorting.md
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
---
layout: post
title: Sorting in ##Platform_Name## Grid Component
title: Sorting in Syncfusion ##Platform_Name## Grid Component
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
Expand Down Expand Up @@ -156,6 +156,65 @@ 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**

For remote data binding, the Grid performs sorting based on the `foreignKeyField` property defined in the column settings. This property should be mapped to the corresponding foreign key field in the data source. When sorting is applied, the Grid sends a request to the server with the `foreignKeyField` name, and the server is responsible for processing the sorting operation and returning the sorted data. Since the Grid relies on the server response, ensuring that the server correctly sorts the data before sending it back is essential for maintaining the expected order in the Grid.

{% tabs %}
{% highlight cshtml tabtitle="CSHTML" %}
{% include code-snippet/grid/sorting/foreign-sort-remote/tagHelper %}
{% endhighlight %}
{% highlight c# tabtitle="foreign-sort.cs" %}
{% include code-snippet/grid/sorting/foreign-sort-remote/foreign-sort.cs %}
{% endhighlight %}
{% endtabs %}

The following code example describes the handling of sorting operation at the server side.

```
public class ItemsController : ODataController
{
[EnableQuery]
public IQueryable<Item> Get()
{
List<Item> GridData = JsonConvert.DeserializeObject<Item[]>(Properties.Resources.ItemsJson).AsQueryable().ToList();
List<Brand> empData = JsonConvert.DeserializeObject<Brand[]>(Properties.Resources.BrandsJson).AsQueryable().ToList();
var queryString = HttpContext.Current.Request.QueryString;
var allUrlKeyValues = ControllerContext.Request.GetQueryNameValuePairs();
string key = allUrlKeyValues.LastOrDefault(x => x.Key == "$orderby").Value;
if (key != null)
{
if (key == "EmployeeID") {
GridData = SortFor(key); //Only for foreignKey Column ascending.
}
else if(key == "EmployeeID desc") {
GridData = SortFor(key); //Only for foreignKey Column descending.
}
}
var count = GridData.Count();
var data = GridData.AsQueryable();
return data;
}

public List<Item> SortFor(String Sorted)
{
List<Item> GridData = JsonConvert.DeserializeObject<Item[]>(Properties.Resources.ItemsJson).AsQueryable().ToList();
List<Brand> empData = JsonConvert.DeserializeObject<Brand[]>(Properties.Resources.BrandsJson).AsQueryable().ToList();
if (Sorted == "EmployeeID") //Check whether ascending or descending.
empData = empData.OrderBy(e => e.FirstName).ToList();
else if(Sorted == "EmployeeID desc")
empData = empData.OrderByDescending(e => e.FirstName).ToList();
List<Item> or = new List<Item>();
for (int i = 0; i < empData.Count(); i++) {
//Select the Field matching records.
IEnumerable<Item> list = GridData.Where(pred => pred.EmployeeID == empData[i].EmployeeID).ToList();
or.AddRange(list);
}
return or;
}
}
```

## 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.
Expand Down