Custom column template (with buttons) and rowspan

Question

Greetings.Let's say that we have 100 rows to display in a Grid. Some of those rows have the same "IdGroup" value. When two(or more) rows have the same value for such "IdGroup" property, the columns containing the template column should be merged (with row span). How can we achieve that?Please see the attached image.Thank you.Attachment: sample_bf556633.zip

Santhosh Iruthayaraj · Answer

Hi Carlo,Greetings from Syncfusion support.Based on your request, we understand that you have a
requirement to dynamically apply row span for a template column based on the
value of another column. We have achieved your requirement using the queryCellInfo
event of the Grid.To achieve this, you can use the following code snippet:

[app.component.ts]
   
    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) === 1
        );
      var index = endIndex + (isLast ? 1 : 0) - startIndex;
      targetCell[0].setAttribute('rowSpan', index);
      if (index > 1) {
        for (let i = startIndex + 1; i < endIndex; i++) {
          this.grid.getRows()[i].querySelector('.e-templatecell').remove();
        }
      }
    }
   
    queryCellInfo(args) {
      if (args.column.field === 'EmployeeID') {
        if (isNullOrUndefined(this.previousData)) {
          this.previousData = args.data['EmployeeID'];
          this.stRowIndexf = parseInt(args.cell.getAttribute('index'));
        } else if (this.previousData === args.data['EmployeeID']) {
          if (
            this.grid.getCurrentViewRecords().length - 1 ===
            parseInt(args.cell.getAttribute('index'), 10)
          ) {
            this.setRowSpan('EmployeeID', args, this.stRowIndexf, true);
          }
        } else if (
          !isNullOrUndefined(this.previousData) &&
          this.previousData !== args.data['EmployeeID']
        ) {
          this.setRowSpan('EmployeeID', args, this.stRowIndexf, false);
          this.previousData = args.data['EmployeeID'];
          this.stRowIndexf = parseInt(args.cell.getAttribute('index'), 10);
        }
      }
    }

You can find a working sample with the implementation at the
following link:Sample: https://stackblitz.com/edit/dynamic-row-spanI hope this solution addresses your requirement. If you have
any further queries or concerns, please feel free to ask.Regards,Santhosh I

Carlo · Answer

Almost perfect solution.The only issue is that if the last two rows are joined together, there's an issue with the display.To replicate the problem just replace code in ngOnInit with:ngOnInit(): void {    const test = JSON.parse(order);    test[test.length-1].EmployeeID = 10;    test[test.length-2].EmployeeID = 10;    this.data = test;  }Please see the attached image to verify the issue.Thank you.Attachment: issue_syncfusion_579ca451.zip

Santhosh Iruthayaraj · Answer

Hi Carlo,We have addressed the issue you mentioned with the previous
response and made the necessary modifications to the sample code. Please find
the updated code snippet below:

[app.component.ts]
   
    setRowSpan(column: any, args: any, startIndex: any, isLast: any) {
     . 
  .  .  . 
  .    
      if (isLast) {
        let totalRecords = this.grid.contentModule.rowElements;
        setTimeout(() => {
          totalRecords[totalRecords.length - 1]
            .querySelector('.e-templatecell')
            .remove();
        });
      }
    }

Sample: https://stackblitz.com/edit/dynamic-row-spanRegards,Santhosh I