Row divider igx Grid - infragistics

Question

I have an igx Grid with sorted rows. The rows are sorted by date (this is a column from the grid). So I have multiple rows with the same date. How can I put a divider between the rows where the date is changed? Here is an example:
Row Date Some stuff
1 01.01.2021 some data
2 01.01.2021 some data
3 01.01.2021 some data
__________________________________________
4 03.01.2021 other data
5 03.01.2021 other data
__________________________________________
So from the 4. row the date is changed, how can I put a divider (something like in this tutorial: https://www.infragistics.com/products/ignite-ui-angular/angular/components/divider) before the 4. row programmatically? How can I do this in Typescript?

Answer 1

Since the Ignite UI for Angular Grid is virtualized and thus its record rendering is entirely data driven, there's no way to inset arbitrary elements in-between rows that I can think of. It'll mess with both rendering/scroll and navigation as you can imagine, so the templatable areas are controlled.
On first glance, your example can probably be achieved with a simple border style through some data manipulation and Conditional Row Styling. You can provide a callback for each row to trigger a class or custom styles.
However, seeing as you already sort by the date it really looks like the scenario you're describing is something that can be handled by Grouping. Group By is already an extension of sorting with the added groups with templatable headers and expand-collapse functionality. Actually, there's an example of this exact type of group under the custom group by example:
What you should be looking at is the expression, the DaySortingStrategy if the default isn't enough, but mostly the groupingComparer which determines if items belong in the same group. Here's a simplified version from the sample:
this.sortingStrategy = DaySortingStrategy.instance(); // or DefaultSortingStrategy.instance()
this.initialExpr = [{
dir: SortingDirection.Asc,
fieldName: 'OrderDate',
ignoreCase: true,
strategy: this.sortingStrategy,
groupingComparer: (a, b) => {
const dateA = this.sortingStrategy.getParsedDate(a);
const dateB = this.sortingStrategy.getParsedDate(b);
return dateA.day === dateB.day && dateA.month === dateB.month ? 0 : -1;
}
}];
which is bound to the Grid's groupingExpressions:
<igx-grid #grid1 [data]="data" [groupingExpressions]="initialExpr">
I suspect the groupingComparer can even be simplified further depending on your data.