We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy.
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!
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); } } };
|
Screenshot:
Regards,
Rajapandi R
