From e7ce0c35d3fcbf3827d231915d4818d4fc7bbf51 Mon Sep 17 00:00:00 2001 From: vikramsundarajan <129823420+vikramsundarajan@users.noreply.github.com> Date: Wed, 22 Jan 2025 10:25:52 +0530 Subject: [PATCH] Ej2-935108- Added the topic for Sort foreign key column based on text for remote data --- .../foreign-sort-remote/foreign-sort.cs | 6 ++ .../grid/sorting/foreign-sort-remote/razor | 19 ++++++ .../sorting/foreign-sort-remote/tagHelper | 19 ++++++ ej2-asp-core-mvc/grid/EJ2_ASP.MVC/sorting.md | 60 ++++++++++++++++++- .../grid/EJ2_ASP.NETCORE/sorting.md | 60 ++++++++++++++++++- 5 files changed, 162 insertions(+), 2 deletions(-) create mode 100644 ej2-asp-core-mvc/code-snippet/grid/sorting/foreign-sort-remote/foreign-sort.cs create mode 100644 ej2-asp-core-mvc/code-snippet/grid/sorting/foreign-sort-remote/razor create mode 100644 ej2-asp-core-mvc/code-snippet/grid/sorting/foreign-sort-remote/tagHelper diff --git a/ej2-asp-core-mvc/code-snippet/grid/sorting/foreign-sort-remote/foreign-sort.cs b/ej2-asp-core-mvc/code-snippet/grid/sorting/foreign-sort-remote/foreign-sort.cs new file mode 100644 index 0000000000..3c14d6b642 --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/grid/sorting/foreign-sort-remote/foreign-sort.cs @@ -0,0 +1,6 @@ +public IActionResult Index() +{ + return View(); +} + + \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/grid/sorting/foreign-sort-remote/razor b/ej2-asp-core-mvc/code-snippet/grid/sorting/foreign-sort-remote/razor new file mode 100644 index 0000000000..f65ce4b484 --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/grid/sorting/foreign-sort-remote/razor @@ -0,0 +1,19 @@ +@Html.EJS().Grid("grid").DataSource(dataManger => +{dataManger.Url("https://ej2services.syncfusion.com/production/web-services/api/Orders").CrossDomain(true).Adaptor("ODataV4Adaptor"); +}).AllowSorting().Height("348px").Columns(col => +{ + col.Field("OrderID").HeaderText("Order ID").Width("120").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add(); + col.Field("CustomerID").HeaderText("Customer Name").Width("170").ForeignKeyValue("ContactName").ForeignKeyField("CustomerID").Add(); + col.Field("ShipCity").HeaderText("Ship City").Width("170").Add(); + col.Field("ShipName").HeaderText("Ship Name").Width("170").Add(); +}).Load("load").Render(); + \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/grid/sorting/foreign-sort-remote/tagHelper b/ej2-asp-core-mvc/code-snippet/grid/sorting/foreign-sort-remote/tagHelper new file mode 100644 index 0000000000..18ed406a6c --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/grid/sorting/foreign-sort-remote/tagHelper @@ -0,0 +1,19 @@ + + + + + + + + + + \ No newline at end of file diff --git a/ej2-asp-core-mvc/grid/EJ2_ASP.MVC/sorting.md b/ej2-asp-core-mvc/grid/EJ2_ASP.MVC/sorting.md index 725505ac85..5075140743 100644 --- a/ej2-asp-core-mvc/grid/EJ2_ASP.MVC/sorting.md +++ b/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 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,64 @@ 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 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. + +{% 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 Get() + { + List GridData = JsonConvert.DeserializeObject(Properties.Resources.ItemsJson).AsQueryable().ToList(); + List empData = JsonConvert.DeserializeObject(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 SortFor(String Sorted) + { + List GridData = JsonConvert.DeserializeObject(Properties.Resources.ItemsJson).AsQueryable().ToList(); + List empData = JsonConvert.DeserializeObject(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 or = new List(); + for (int i = 0; i < empData.Count(); i++) { + //Select the Field matching records + IEnumerable 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. diff --git a/ej2-asp-core-mvc/grid/EJ2_ASP.NETCORE/sorting.md b/ej2-asp-core-mvc/grid/EJ2_ASP.NETCORE/sorting.md index 55d44bd1a4..1b069244b9 100644 --- a/ej2-asp-core-mvc/grid/EJ2_ASP.NETCORE/sorting.md +++ b/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 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,64 @@ 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 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. + +{% 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 Get() + { + List GridData = JsonConvert.DeserializeObject(Properties.Resources.ItemsJson).AsQueryable().ToList(); + List empData = JsonConvert.DeserializeObject(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 SortFor(String Sorted) + { + List GridData = JsonConvert.DeserializeObject(Properties.Resources.ItemsJson).AsQueryable().ToList(); + List empData = JsonConvert.DeserializeObject(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 or = new List(); + for (int i = 0; i < empData.Count(); i++) { + //Select the Field matching records + IEnumerable 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.