New to Kendo UI for jQuery? Start a free 30-day trial
Freezing Rows and Columns
Updated on May 21, 2025
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" }
]
}
]
}
]
});
workbook.toDataURLAsync().then(function (dataURI) {
kendo.saveAs({
dataURI: dataURI,
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.
html
<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" }
]
}
]
}
]
});
workbook.toDataURLAsync().then(function (dataURI) {
kendo.saveAs({
dataURI: dataURI,
fileName: "Test.xlsx",
});
});
</script>