How to perform own sorting logic in ASP.NET MVC Grid

[Charles Southey]

If I specify both sorting and grouping - with initial sort settings on the grouped columns, the sort is ignored. How can I force the groups into a specific order on initial load? Sample is below.

@(Html.EJS().Grid("serviceChargesGrid")

              .DataSource(dataSource)

              .AllowResizing()

              .Columns(col =>

              {

                  col.Field("xaction_id").HeaderText("Row ID").IsPrimaryKey(true).Visible(false).AllowEditing(false).Add();

                  col.Field("wrapper_id").Visible(false).AllowEditing(false).Add();

                  col.Field("PlatformName").Visible(false).HeaderText("Product Provider").Width("300").AllowEditing(false).Add();

                  col.Field("OwnerForename").Visible(false).HeaderText("Product Provider").Width("300").AllowEditing(false).Add();

                  col.Field("WrapperName").Visible(false).HeaderText("Plan / Investment").Width("200").AllowEditing(false).Add();

                  col.Field("PolicyNumber").Visible(false).HeaderText("Policy Number").Width("120").TextAlign(TextAlign.Center).AllowEditing(false).Add();

                  col.Field("source").HeaderText("Source of Data").TextAlign(TextAlign.Center).Template("#DataSourceTemplate").Width("120").AllowEditing(false).Add();

                  col.Field("Type").HeaderText("Type").Width("200").AllowEditing(false).Add();

                  col.Field("Details").HeaderText("Details").Width("200").AllowEditing(false).Add();

                  col.Field("Date").HeaderText("Date").Type("date").EditType("datepickeredit").TextAlign(TextAlign.Center).Width("120").Add();

                  col.Field("Amount").HeaderText($"Amount {symbol}").EditType("numericedit").Type("number").Edit(new { @params = new NumericTextBox { Decimals = 2, Format = "n2", ValidateDecimalOnType = true, Step = 1.00 } }).Format("N2").TextAlign(TextAlign.Right).Width("180").Add();

                  col.HeaderText("").Commands(commands).Width("100").Add();

              })

              .ActionBegin("actionBegin")

              .ActionComplete("actionComplete")

              .ActionFailure("actionFailure")

              .Load("load")

              .EditSettings(edit => { edit.AllowEditing(true).Mode(EditMode.Normal); })

              .Height("100%")

              .AllowGrouping()

              .AllowSorting()

              .SortSettings(sort => sort.Columns(new List<object> { new {field="PlatformName", direction="Ascending"}, new { field = "OwnerForename", direction = "Ascending" }, new { field = "WrapperName", direction = "Ascending" } }))

              .AllowMultiSorting()

              .EnablePersistence(false)

              .GroupSettings(group =>

              {

                  group.ShowDropArea(false).Columns(new[] { "wrapper_id", "Type" }).CaptionTemplate("#serviceChargesGroupTemplate");

              })

              .Aggregates(agg =>

              {

                  agg.Columns(new List<GridAggregateColumn> {new GridAggregateColumn {Field = "Amount", Type = "Sum", Format="N2", GroupCaptionTemplate = "${Sum}", FooterTemplate = "<div class='grandTotal'>Total Service Charges&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;${Sum}</div>" } }).Add();

              })

              .Render())

    }

[Pavithra Subramaniyam]

Hi Charles, 

 

Thanks for contacting Syncfusion support. 

 

We have analyzed your requirement. We would like to inform you that by default when you group a column in Grid, the column’s data will be sorted and then Grid will show the Grouped columns. We could see that your requirement is that you would like to disable the sorting for the column you are grouping. We suggest you to use the “SortComparer” function for the column you are grouping. We have prepared a sample based on this requirement. We are attaching the sample for your convenience. Please download the sample from the link below, 

Sample : http://www.syncfusion.com/downloads/support/directtrac/general/ze/gridmvclocalization-378914679 

 

In the above sample, we have set the initial sorted columns in Grid and use the “SortComparer” function for “CusomerID” column, which is the column to be grouped. In the sortComparer function we will be returning -1(which restrics sort). Now if initial grouping is applied for the column in which the sort comparer is applied(say CustomerID column), it won’t show the Group based on sort order of the Grouped column. Please refer the code example below, 

 

@Html.EJS().Grid("Grid").DataSource((IEnumerable<object>)ViewBag.DataSource).Columns(col => 

{ 

    col.Field("OrderID").HeaderText("Order ID").IsPrimaryKey(true).Width("120").Add(); 

    col.Field("CustomerID").HeaderText("Customer Name").Width("150").SortComparer("sortComparer").Add();  //SortComparer applied for the column to be grouped initially 

    col.Field("ShipName").HeaderText("ShipName").Width("150").Add(); 

})... 

.SortSettings(sort => sort.Columns(new List<object> 

    {  new { field = "OrderID", direction = "Ascending" }, new { field = "ShipName", direction = "Ascending" } })).AllowMultiSorting() 

.GroupSettings(group => { group.Columns(new string[] { "CustomerID" }); }).Render() 

 

 

    <script> 

        function sortComparer(reference, comparer) { 

            //Here you can define your custom sort function 

            return -1;     //return -1 will restrict the sort 

        }; 

 

    </script> 

 

 

Documentation :  

https://ej2.syncfusion.com/javascript/documentation/grid/sorting/?no-cache=1#custom-sort-comparer 

https://ej2.syncfusion.com/aspnetmvc/documentation/grid/sorting/#initial-sort 

 

Please get back to us if you need further assistance. 

 

Regards, 

Pavithra S.