CODEWITHSUNDEEP
infragisticsdividerignite-ui-angularigx-grid
user12424500
user12424500

Reputation:

Row divider igx Grid

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?

Upvotes: 1

Views: 385

Answers (1)

Damyan Petev
Damyan Petev

Reputation: 1635

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: enter image description here

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.

Upvotes: 2

Related Questions