How to Apply column and row spanning in JavaScript Data Grid?
Using the JavaScript Data Grid's queryCellInfo and rowDataBound events, you can apply row and column spanning dynamically based on the data source value.
Row Spanning
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.
function queryCellInfo(args: QueryCellInfoEventArgs) {
if (args.column.field === '9:00') {
if (isNullOrUndefined(previousData)) {
previousData = args.data['9:00'];
stRowIndex = parseInt(args.cell.getAttribute('index'));
} else if (previousData === args.data['9:00']) {
args.cell.classList.add('e-hide');
if (grid.getCurrentViewRecords().length - 1 === parseInt(args.cell.getAttribute('index'), 10)) {
setRowSpan(args.column.field, args, stRowIndex, true);
}
} else if (!isNullOrUndefined(previousData) && previousData !== args.data['9:00']) {
setRowSpan(args.column.field, args, stRowIndex, false);
previousData = args.data['9:00'];
stRowIndex = parseInt(args.cell.getAttribute('index'), 10);
}
}
if (args.column.field === '9:30') {
if (isNullOrUndefined(previousCData)) {
previousCData = args.data['9:30'];
stRowIndexc = parseInt(args.cell.getAttribute('index'));
} else if (previousCData === args.data['9:30']) {
args.cell.classList.add('e-hide');
if (grid.getCurrentViewRecords().length - 1 === parseInt(args.cell.getAttribute('index'), 10)) {
setRowSpan(args.column.field, args, stRowIndexc, true);
}
} else if (!isNullOrUndefined(previousCData) && previousCData !== args.data['9:30']) {
setRowSpan(args.column.field, args, stRowIndexc, false);
previousCData = args.data['9:30'];
stRowIndexc = parseInt(args.cell.getAttribute('index'), 10);
}
}
if (args.column.field === '10:00') {
if (isNullOrUndefined(previousFData)) {
previousFData = args.data['10:00'];
stRowIndexf = parseInt(args.cell.getAttribute('index'));
} else if (previousFData === args.data['10:00']) {
args.cell.classList.add('e-hide');
if (grid.getCurrentViewRecords().length - 1 === parseInt(args.cell.getAttribute('index'), 10)) {
setRowSpan(args.column.field, args, stRowIndexf, true);
}
} else if (!isNullOrUndefined(previousFData) && previousFData !== args.data['10:00']) {
setRowSpan(args.column.field, args, stRowIndexf, false);
previousFData = args.data['10:00'];
stRowIndexf = parseInt(args.cell.getAttribute('index'), 10);
}
}
}
Output
You can find the sample here
Column Spanning
You can apply column spanning using the rowDataBound event. In this demo, the rowDataBound event of the Grid is used to collect the duplicate cells (based on the value) from the row. Based on this duplicate value, the columns are spanned by using the colSpan attribute.
function rowDataBound(args: RowDataBoundEventArgs) {
for (var i = 0; i < args.row['cells'].length - 1; i++) {
for (var j = i + 1; j < args.row['cells'].length; j++) {
if (
args.row['cells'][i].innerText === args.row['cells'][j].innerText &&
!args.row['cells'][j].classList.contains('e-hide')
) {
flag++;
args.row['cells'][j].classList.add('e-hide');
startIndex = parseInt(
args.row['cells'][i].getAttribute('aria-colindex'),10
);
endIndex = parseInt(
args.row['cells'][j].getAttribute('aria-colindex'),10
);
}
}
if (flag > 0) {
setColumnSpan(startIndex, endIndex, args.row['cells'][i], true);
flag = 0;
}
}
}
Output
You can find the sample here
Documentation
https://ej2.syncfusion.com/documentation/api/grid/#rowdatabound
https://ej2.syncfusion.com/documentation/api/grid/#querycellinfohttps://www.syncfusion.com/javascript-ui-controls/js-data-grid
