We have a grid column that is display date in M/DD/YYYY format. The Data set for this date column includes a time value. When the user groups by this column the grouping is including the time so there are many groups for the same date. Is there a way to tell the grid to ignore the time for the grouping? I would have assumed it would grouped based on the format displayed to the user but its not working that way.
Hello Tammy,
Let me explain why this is the case.
The GroupBy is a data operation (data operations like GroupBy, Sorting, Filtering and Paging) that's executed at igDataSource level so it's not affected by the formatting (formatting is done before displaying the data) which is done on igGrid level. Currently we don't have formatting capabilities in igDataSource, that's why what you expect is not currently available out of the box.
To cover your scenario we expose an option igGridGroupBy.columnSettings.compareFunc that you need to set with custom logic.
Here's a sample implementation that compares only the dates:
features: [
{
name: "GroupBy",
columnSettings: [
columnKey: "SellStartDate",
compareFunc: function(val1, val2, recordsData) {
var d1 = new Date(val1), d2 = new Date(val2);
return d1.getYear() === d2.getYear()
&& d1.getMonth() === d2.getMonth()
&& d1.getDay() === d2.getDay();
}
]
Best regards, Martin Pavlov
Infragistics, Inc.
I am sure i'm missing something obvious but I can't get it to work with our MVC wrapper. Here's how I set it up. Thoughts?
groupByWrapper.Type(isLocal ? OpType.Local : OpType.Remote).ColumnSettings(groupedColumn => { foreach (ScreenControlGridColumns groupByColumn in gridGroupByColumns) groupedColumn.ColumnSetting().ColumnKey(groupByColumn.FieldName).IsGroupBy(true);
groupedColumn.ColumnSetting().ColumnKey("SCHEDULED_SHIP_DATE") .CompareFunc("_webUi.Grid.gridCompareDateFunc(val1,val2,recordData)"); });
In JavaScript is the function you gave me....
gridCompareDateFunc: function (val1, val2, recordsData) { debugger; var d1 = new Date(val1), d2 = new Date(val2); return d1.getYear() === d2.getYear() && d1.getMonth() === d2.getMonth() && d1.getDay() === d2.getDay(); },