Apply column and row spanning in Javascript Grid

2 mins read

Using the 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

Row span

Description automatically generated

You can find the sample here

Javascript Sample

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;
      }
    }
}