From f9b304489456a9cbbe524b796e4b87a53aacac58 Mon Sep 17 00:00:00 2001 From: vikramsundarajan <129823420+vikramsundarajan@users.noreply.github.com> Date: Fri, 14 Feb 2025 10:51:40 +0530 Subject: [PATCH 1/5] Added the topic of 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 | 59 +++++++++++++++++++ .../grid/EJ2_ASP.NETCORE/sorting.md | 59 +++++++++++++++++++ 5 files changed, 162 insertions(+) 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 3c4519dd2e..56c44876ea 100644 --- a/ej2-asp-core-mvc/grid/EJ2_ASP.MVC/sorting.md +++ b/ej2-asp-core-mvc/grid/EJ2_ASP.MVC/sorting.md @@ -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** + +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 d72324797e..f95ca40553 100644 --- a/ej2-asp-core-mvc/grid/EJ2_ASP.NETCORE/sorting.md +++ b/ej2-asp-core-mvc/grid/EJ2_ASP.NETCORE/sorting.md @@ -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** + +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. From 77b32e277962589e2df8abf0b154407cc36c9f29 Mon Sep 17 00:00:00 2001 From: vikramsundarajan <129823420+vikramsundarajan@users.noreply.github.com> Date: Wed, 26 Feb 2025 12:00:33 +0530 Subject: [PATCH 2/5] Modified the changes in content and code example. --- ej2-asp-core-mvc/grid/EJ2_ASP.MVC/sorting.md | 10 +++++----- ej2-asp-core-mvc/grid/EJ2_ASP.NETCORE/sorting.md | 10 +++++----- 2 files changed, 10 insertions(+), 10 deletions(-) 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 56c44876ea..d9fa967065 100644 --- a/ej2-asp-core-mvc/grid/EJ2_ASP.MVC/sorting.md +++ b/ej2-asp-core-mvc/grid/EJ2_ASP.MVC/sorting.md @@ -158,7 +158,7 @@ The following example demonstrates how to perform sorting by enabling a foreign **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. +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" %} @@ -185,10 +185,10 @@ The following code example describes the handling of sorting operation at the se if (key != null) { if (key == "EmployeeID") { - GridData = SortFor(key); //Only for foreignKey Column ascending + GridData = SortFor(key); //Only for foreignKey Column ascending. } else if(key == "EmployeeID desc") { - GridData = SortFor(key); //Only for foreignKey Column descending + GridData = SortFor(key); //Only for foreignKey Column descending. } } var count = GridData.Count(); @@ -200,13 +200,13 @@ The following code example describes the handling of sorting operation at the se { 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 + 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 + //Select the Field matching records. IEnumerable list = GridData.Where(pred => pred.EmployeeID == empData[i].EmployeeID).ToList(); or.AddRange(list); } 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 f95ca40553..696bc9b842 100644 --- a/ej2-asp-core-mvc/grid/EJ2_ASP.NETCORE/sorting.md +++ b/ej2-asp-core-mvc/grid/EJ2_ASP.NETCORE/sorting.md @@ -158,7 +158,7 @@ The following example demonstrates how to perform sorting by enabling a foreign **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. +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" %} @@ -185,10 +185,10 @@ The following code example describes the handling of sorting operation at the se if (key != null) { if (key == "EmployeeID") { - GridData = SortFor(key); //Only for foreignKey Column ascending + GridData = SortFor(key); //Only for foreignKey Column ascending. } else if(key == "EmployeeID desc") { - GridData = SortFor(key); //Only for foreignKey Column descending + GridData = SortFor(key); //Only for foreignKey Column descending. } } var count = GridData.Count(); @@ -200,13 +200,13 @@ The following code example describes the handling of sorting operation at the se { 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 + 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 + //Select the Field matching records. IEnumerable list = GridData.Where(pred => pred.EmployeeID == empData[i].EmployeeID).ToList(); or.AddRange(list); } From 762d3d1d43fec5c9f0c80c64d7691a5bcd5f373d Mon Sep 17 00:00:00 2001 From: vikramsundarajan <129823420+vikramsundarajan@users.noreply.github.com> Date: Wed, 26 Feb 2025 12:08:22 +0530 Subject: [PATCH 3/5] Added the word 'Sycnfusion' in title of the page. --- ej2-asp-core-mvc/grid/EJ2_ASP.MVC/sorting.md | 2 +- ej2-asp-core-mvc/grid/EJ2_ASP.NETCORE/sorting.md | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) 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 d9fa967065..ccc7cf572a 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 Sycnfusion ##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 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 696bc9b842..49a9a6a199 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 From 3fc60aff88180a06fefe51721126b1aa67f7fd92 Mon Sep 17 00:00:00 2001 From: vikramsundarajan <129823420+vikramsundarajan@users.noreply.github.com> Date: Wed, 26 Feb 2025 12:16:08 +0530 Subject: [PATCH 4/5] Changed the spell mistake --- ej2-asp-core-mvc/grid/EJ2_ASP.MVC/sorting.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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 ccc7cf572a..e80950a28b 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 Sycnfusion ##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 From 76cb3a9ad51b6078abce1aa38c889a05c6de010a Mon Sep 17 00:00:00 2001 From: vikramsundarajan <129823420+vikramsundarajan@users.noreply.github.com> Date: Fri, 28 Feb 2025 18:05:31 +0530 Subject: [PATCH 5/5] Changed the code example --- .../grid/sorting/foreign-sort-remote/razor | 24 +++++-------------- .../sorting/foreign-sort-remote/tagHelper | 22 ++++++----------- 2 files changed, 13 insertions(+), 33 deletions(-) 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 index f65ce4b484..1e671fbad6 100644 --- 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 @@ -1,19 +1,7 @@ -@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 => +@Html.EJS().Grid("grid").DataSource(dataManger => { dataManger.Url("/OData/Items").Adaptor("ODataV4Adaptor"); }).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 + 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() \ 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 index 18ed406a6c..3e741016ce 100644 --- 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 @@ -1,19 +1,11 @@ - - + + - + + + + - - - \ No newline at end of file + \ No newline at end of file