Edit this page

Colspan and Rowspan

By default, a cell is displayed in a single row and column. However, you are able to make a cell occupy more than one row or column, as explained in this article.

Extend Cells to More Than One Column or Row

Set the colSpan

Set the colSpan option to make a cell occupy more than one column. When done, all cells that follow shift to the right with the same number of columns as defined by the colSpan.

The example below demonstrates how to make a cell occupy three columns.

Example
<script>
var workbook = new kendo.ooxml.Workbook({
  sheets: [
    {
      rows: [
        {
          cells: [
            { value: "A1, B1 and C1", colSpan: 3 }, { value: "D1" }
          ]
        }
      ]
    }
  ]
});
kendo.saveAs({
    dataURI: workbook.toDataURL(),
    fileName: "Test.xlsx"
});
</script>

Set the rowSpan

Set the rowSpan option to make a cell occupy more than one row.

The example below demonstrates how to make a cell occupy two rows.

Example
<script>
var workbook = new kendo.ooxml.Workbook({
  sheets: [
    {
      rows: [
        {
          cells: [
            { value: "A1 and A2", rowSpan: 2 }, { value: "B1" }
          ]
        },
        {
          cells: [
            { value: "B2" }
          ]
        }
      ]
    }
  ]
});
kendo.saveAs({
    dataURI: workbook.toDataURL(),
    fileName: "Test.xlsx"
});
</script>

Extend Cells to More Than One Column and Row

Set Both Colspan and Rowspan

Setting both colSpan and rowSpan is also supported, as demonstrated in the example below.

Example
<script>
var workbook = new kendo.ooxml.Workbook({
  sheets: [
    {
      rows: [
        {
          cells: [
            { value: "A1, B1, A2 and B2", rowSpan: 2, colSpan: 2 }
          ]
        }
      ]
    }
  ]
});
kendo.saveAs({
    dataURI: workbook.toDataURL(),
    fileName: "Test.xlsx"
});
</script>

See Also

Articles on the Excel export functionality in Kendo UI:

Is this article helpful? Yes / No
Thank you for your feedback!

Give article feedback

Tell us how we can improve the information

close
Dummy