Merge rows dynamically

[Iana Stapelberg]

I would like to merge like this dynamically:

I can see you can do something like this, but it's not going to work, because my data is dynamic and I cannot hardcore merging.

Any help is appreciated!

Thank you!

[Rajapandi Ravi]

Hi Iana,

Greetings from Syncfusion support

Using the Grid's queryCellInfo event, you can apply row spanning dynamically based on the dataSource value. You can apply row spanning using the queryCellInfo event. In this demo, the queryCellInfo event of the Grid is used to collect the duplicate cells (based on the value) from the column. Based on this duplicate value, the rows are spanned by using the rowSpan attribute. Please refer the below code example and sample for more information.

export class AppComponent {

    @ViewChild('grid')

    public grid: any;

    public previousData: any = null;

    public stRowIndex: any = null;

    public previousCData: any = null;

    public stRowIndexc: any = null;

    public previousFData: any = null;

    public stRowIndexf: any = null;

 

setRowSpan(column: any, args: any, startIndex: any, isLast: any) {

        let endIndex = parseInt(args.cell.getAttribute('index'), 10);

        let targetCell = [].slice.call((this as any).grid.getRows()[startIndex].querySelectorAll('.e-rowcell'))

          .filter(

            (cell: any) =>

              parseInt(cell.getAttribute('aria-colindex'), 10) ===

              parseInt(args.cell.getAttribute('aria-colindex'))

          );

        targetCell[0].setAttribute('rowSpan', endIndex + (isLast ? 1 : 0) - startIndex);

      }

 

 

    public queryCellInfoEvent: EmitType<QueryCellInfoEventArgs> = (args: QueryCellInfoEventArgs) => {

        if (args.column.field === '9:00') {

            if (isNullOrUndefined(this.previousData)) {

              this.previousData = args.data['9:00'];

              this.stRowIndex = parseInt(args.cell.getAttribute('index'));

            } else if (this.previousData === args.data['9:00']) {

              args.cell.classList.add('e-hide');

              if (

                (this as any).grid.getCurrentViewRecords().length - 1 ===

                parseInt(args.cell.getAttribute('index'), 10)

              ) {

                this.setRowSpan(args.column.field, args, this.stRowIndex, true);

              }

            } else if (

              !isNullOrUndefined(this.previousData) &&

              this.previousData !== args.data['9:00']

            ) {

                this.setRowSpan(args.column.field, args, this.stRowIndex, false);

                this.previousData = args.data['9:00'];

                this.stRowIndex = parseInt(args.cell.getAttribute('index'), 10);

            }

          }

       

          if (args.column.field === '9:30') {

            if (isNullOrUndefined(this.previousCData)) {

                this.previousCData = args.data['9:30'];

                this.stRowIndexc = parseInt(args.cell.getAttribute('index'));

            } else if (this.previousCData === args.data['9:30']) {

              args.cell.classList.add('e-hide');

              if (

                (this as any).grid.getCurrentViewRecords().length - 1 ===

                parseInt(args.cell.getAttribute('index'), 10)

              ) {

                this.setRowSpan(args.column.field, args, this.stRowIndexc, true);

              }

            } else if (

              !isNullOrUndefined(this.previousCData) &&

              this.previousCData !== args.data['9:30']

            ) {

                this.setRowSpan(args.column.field, args, this.stRowIndexc, false);

                this.previousCData = args.data['9:30'];

                this.stRowIndexc = parseInt(args.cell.getAttribute('index'), 10);

            }

          }

       

          if (args.column.field === '10:00') {

            if (isNullOrUndefined(this.previousFData)) {

                this.previousFData = args.data['10:00'];

                this.stRowIndexf = parseInt(args.cell.getAttribute('index'));

            } else if (this.previousFData === args.data['10:00']) {

              args.cell.classList.add('e-hide');

              if (

                (this as any).grid.getCurrentViewRecords().length - 1 ===

                parseInt(args.cell.getAttribute('index'), 10)

              ) {

                this.setRowSpan(args.column.field, args, this.stRowIndexf, true);

              }

            } else if (

              !isNullOrUndefined(this.previousFData) &&

              this.previousFData !== args.data['10:00']

            ) {

                this.setRowSpan(args.column.field, args, this.stRowIndexf, false);

                this.previousFData = args.data['10:00'];

                this.stRowIndexf = parseInt(args.cell.getAttribute('index'), 10);

            }

          }

    };

 

Sample: https://stackblitz.com/edit/angular-7hcx64?file=app.component.ts,app.component.html,index.html,data.ts

Screenshot:

Regards,

Rajapandi R

[khanh]

Hi,

Thank you for your demo,

But it does not work with the sorting feature and cannot merge with the click to sorting button.

Please help to check on this,
Thank you

[Aishwarya Rameshbabu]

Hi khanh,

In the Syncfusion Grid, the row spanning feature merges cells containing data that extend across multiple rows and display them in the user interface The provided example showcases dynamic row spanning, where rows are merged dynamically by processing the data. You wanted to perform sorting with this structure. Sorting reorders rows based on the values of the selected column. Consequently, performing sorting in the Grid with these spanned cells results in row misalignment. Since row spanning is initially applied based on duplicated or repeated values under static conditions, it cannot be preserved during data operations like sorting.

Regards

Aishwarya R