Freezing Rows and Columns

Kendo UI allows you to freeze both columns and rows by using 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. To freeze rows, set the rowSplit option to the number of rows you want to freeze.

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

<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

To freeze columns, set the colSplit option to the number of columns you want to freeze.

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

<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

In this article
Not finding the help you need? Improve this article