import { Component, OnInit, ViewChild } from '@angular/core';
import { QueryCellInfoEventArgs } from '@syncfusion/ej2-angular-grids';
import { columnSpanData, ColumnSpanDataType } from './data';
import { EmitType } from '@syncfusion/ej2-base';
import { isNullOrUndefined } from '@syncfusion/ej2-base';
@Component({
selector: 'app-root',
templateUrl: 'app.component.html',
})
export class AppComponent {
@ViewChild('grid')
public grid: any;
public data: Object[];
public height: string | number;
public width: string | number;
public gridLines: string;
public textWrap: boolean;
public previousData: any = null;
public stRowIndex: any = null;
public previousCData: any = null;
public stRowIndexc: any = null;
public previousFData: any = null;
public stRowIndexf: any = null;
public testData = [
{ _id: 1, group: 'AAA', name: 'doan', span_idx: 5 },
{ _id: 2, group: 'AAA', name: 'le', span_idx: 0 },
{ _id: 3, group: 'AAA', name: 'le', span_idx: 0 },
{ _id: 4, group: 'AAA', name: 'trang', span_idx: 0 },
{ _id: 5, group: 'AAA', name: 'binh', span_idx: 0 },
{ _id: 6, group: 'BBB', name: 'doan', span_idx: 5 },
{ _id: 7, group: 'BBB', name: 'le', span_idx: 0 },
{ _id: 8, group: 'BBB', name: 'le', span_idx: 0 },
{ _id: 9, group: 'BBB', name: 'trang', span_idx: 0 },
{ _id: 10, group: 'BBB', name: 'binh', span_idx: 0 },
{ _id: 11, group: 'CCC', name: 'doan', span_idx: 5 },
{ _id: 12, group: 'CCC', name: 'le', span_idx: 0 },
{ _id: 13, group: 'CCC', name: 'le', span_idx: 0 },
{ _id: 14, group: 'CCC', name: 'trang', span_idx: 0 },
{ _id: 15, group: 'CCC', name: 'binh', span_idx: 0 },
{ _id: 16, group: 'DDD', name: 'doan', span_idx: 5 },
{ _id: 17, group: 'DDD', name: 'le', span_idx: 0 },
{ _id: 18, group: 'DDD', name: 'le', span_idx: 0 },
{ _id: 19, group: 'DDD', name: 'trang', span_idx: 0 },
{ _id: 20, group: 'DDD', name: 'binh', span_idx: 0 },
{ _id: 21, group: 'EEE', name: 'doan', span_idx: 5 },
{ _id: 22, group: 'EEE', name: 'le', span_idx: 0 },
{ _id: 23, group: 'EEE', name: 'le', span_idx: 0 },
{ _id: 24, group: 'EEE', name: 'trang', span_idx: 0 },
{ _id: 25, group: 'EEE', name: 'binh', span_idx: 0 },
{ _id: 1, group: 'AAA', name: 'doan', span_idx: 5 },
{ _id: 2, group: 'AAA', name: 'le', span_idx: 0 },
{ _id: 3, group: 'AAA', name: 'le', span_idx: 0 },
{ _id: 4, group: 'AAA', name: 'trang', span_idx: 0 },
{ _id: 5, group: 'AAA', name: 'binh', span_idx: 0 },
{ _id: 6, group: 'BBB', name: 'doan', span_idx: 5 },
{ _id: 7, group: 'BBB', name: 'le', span_idx: 0 },
{ _id: 8, group: 'BBB', name: 'le', span_idx: 0 },
{ _id: 9, group: 'BBB', name: 'trang', span_idx: 0 },
{ _id: 10, group: 'BBB', name: 'binh', span_idx: 0 },
{ _id: 11, group: 'CCC', name: 'doan', span_idx: 5 },
{ _id: 12, group: 'CCC', name: 'le', span_idx: 0 },
{ _id: 13, group: 'CCC', name: 'le', span_idx: 0 },
{ _id: 14, group: 'CCC', name: 'trang', span_idx: 0 },
{ _id: 15, group: 'CCC', name: 'binh', span_idx: 0 },
{ _id: 16, group: 'DDD', name: 'doan', span_idx: 5 },
{ _id: 17, group: 'DDD', name: 'le', span_idx: 0 },
{ _id: 18, group: 'DDD', name: 'le', span_idx: 0 },
{ _id: 19, group: 'DDD', name: 'trang', span_idx: 0 },
{ _id: 20, group: 'DDD', name: 'binh', span_idx: 0 },
{ _id: 21, group: 'EEE', name: 'doan', span_idx: 5 },
{ _id: 22, group: 'EEE', name: 'le', span_idx: 0 },
{ _id: 23, group: 'EEE', name: 'le', span_idx: 0 },
{ _id: 24, group: 'EEE', name: 'trang', span_idx: 0 },
{ _id: 25, group: 'EEE', name: 'binh', span_idx: 0 },
];
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.data['span_idx'] > 0) {
if (args.column.field === '_id') {
args.rowSpan = args.data['span_idx'];
}
if (args.column.field === 'group') {
args.rowSpan = args.data['span_idx'];
}
}
};
ngOnInit(): void {
this.data = columnSpanData;
this.gridLines = 'Both';
this.height = '300px';
this.width = 'auto';
this.textWrap = true;
}
}