We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. (Last updated on: November 16, 2018).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Sorting Groups in Grid

Thread ID:

Created:

Updated:

Platform:

Replies:

143523 Mar 25,2019 10:54 AM UTC Mar 26,2019 06:42 AM UTC ASP.NET MVC - EJ 2 1
loading
Tags: Grid
Charles Southey
Asked On March 25, 2019 10:54 AM UTC

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 [Syncfusion]
Replied On March 26, 2019 06:42 AM UTC

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, 
 
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 :  
 
Please get back to us if you need further assistance. 
 
Regards, 
Pavithra S. 
 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

;