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

Subscribe to this post

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     ${Sum}</div>" } }).Add();

})

.Render())

}

Reply | Reply with quote

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,

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()

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.

Reply | Reply with quote

Sorting Groups in Grid

Thread ID:

Created:

Updated:

Platform:

Replies:

Please sign in to access our forum

CONTACT US