Edit this page

Freeze Rows and Columns

Kendo UI allows you to freeze both columns and rows via the freezePane option.

Rows

Freezing the first row of an Excel sheet is a common requirement. It allows you to scroll the rest of the document without losing the header.

Kendo UI enables row freezing via the rowSplit option. Set that option to the number of rows you want to freeze.

The example below demonstrates how to freeze the top row in a worksheet.

Example
<script>
var workbook = new kendo.ooxml.Workbook({
  sheets: [
    {
      freezePane: {
        rowSplit: 1
      },
      columns: [
        { autoWidth: true },
        { autoWidth: true }
      ],
      rows: [
        {
          cells: [
            { value: "Company Name" }, { value: "Contact" }
          ]
        },
        {
          cells: [
            { value: "Around the Horn" }, { value: "Thomas Hardy" }
          ]
        },
        {
          cells: [
            { value: "B's Beverages" }, { value: "Victoria Ashworth" }
          ]
        }
      ]
    }
  ]
});
kendo.saveAs({
    dataURI: workbook.toDataURL(),
    fileName: "Test.xlsx"
});
</script>

Columns

Kendo UI enables column freezing via the colSplit option. Set that option to the number of columns you want to freeze.

The example below demonstrates how to freeze the first two columns and the top row in a worksheet.

Example
<script>
var workbook = new kendo.ooxml.Workbook({
  sheets: [
    {
      freezePane: {
        rowSplit: 1,
        colSplit: 2
      },
      columns: [
        { autoWidth: true }, { autoWidth: true }, { autoWidth: true }
      ],
      rows: [
        {
          cells: [
            { value: "Company Name" }, { value: "Contact" }, { value: "Contact Title" }
          ]
        },
        {
          cells: [
            { value: "Around the Horn" }, { value: "Thomas Hardy" }, { value: "Sales Representative" }
          ]
        },
        {
          cells: [
            { value: "B's Beverages" }, { value: "Victoria Ashworth" }, { value: "Sales Agent" }
          ]
        }
      ]
    }
  ]
});
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 this article

close
Dummy