New to Kendo UI for Angular? Start a free 30-day trial

Cell and Sheet Operations

Updated on Apr 27, 2026

The Kendo UI for Angular Spreadsheet exposes a programmatic API that goes beyond the built-in toolbar and context menu. Use it to format cells, read and write values and formulas, resize the grid, and manage sheets at runtime.

Access all operations through the SpreadsheetWidget, exposed by the spreadsheetWidget property of SpreadsheetComponent. From the widget, you can access the active Sheet and Range objects.

typescript
import { Component, ViewChild } from '@angular/core';
import { SpreadsheetComponent } from '@progress/kendo-angular-spreadsheet';

@Component({ ... })
export class AppComponent {
    @ViewChild('spreadsheet') private spreadsheetRef: SpreadsheetComponent;

    public executeCommand(): void {
        const widget = this.spreadsheetRef.spreadsheetWidget;
        const sheet = widget.activeSheet() as any; // Sheet
        const range = sheet.range('B2:D5'); // Range
    }
}
html
<kendo-spreadsheet #spreadsheet [sheets]="sheets"></kendo-spreadsheet>

Working with Ranges

The Range object is the primary interface for programmatic cell manipulation. You can apply all formatting options available in the built-in toolbar, as well as read and write cell values and formulas.

Select a range of cells in the demo below. Use the control panel to apply styling, alignment, font, color, border, and number format options using the Range API.

Change Theme

Theme

Loading ...

The following tables list all available Range methods. Methods marked with an asterisk (*) are not included in the TypeScript type definitions. Call them on a variable typed as any, or cast inline with (range as any).method().

Get the range by calling sheet.range() with a cell address or address range:

typescript

const widget = this.spreadsheetRef.spreadsheetWidget;
const sheet  = widget.activeSheet() as any;
const range  = sheet.range('B2:D5'); // Range

Styling

Method	Description	Example
`background(value?)`	Gets or sets the fill color of the cells.	`range.background('#ffff00')`
`bold(value?)`	Gets or sets the bold state of the cells.	`range.bold(true)`
`color(value?)`	Gets or sets the text color.	`range.color('#ff0000')`
`fontFamily(value?)`	Gets or sets the font family.	`range.fontFamily('Arial')`
`fontSize(value?)`	Gets or sets the font size in pixels.	`range.fontSize(14)`
`italic(value?)`	Gets or sets the italic state.	`range.italic(true)`
`underline(value?)` *	Gets or sets the underline state.	`(range as any).underline(true)`
`indent(value?)` *	Gets or sets the horizontal indent level.	`(range as any).indent(2)`
`textAlign(value?)`	Gets or sets the horizontal alignment.	`range.textAlign('center')`
`verticalAlign(value?)`	Gets or sets the vertical alignment.	`range.verticalAlign('top')`
`wrap(value?)`	Gets or sets text wrapping.	`range.wrap(true)`
`format(value?)`	Gets or sets the number or date format string.	`range.format('#,##0.00')`

Borders

Method	Description	Example
`borderTop(value?)`	Gets or sets the top border.	`range.borderTop({ size: 1, color: '#000000' })`
`borderRight(value?)`	Gets or sets the right border.	`range.borderRight({ size: 1, color: '#000000' })`
`borderBottom(value?)`	Gets or sets the bottom border.	`range.borderBottom({ size: 1, color: '#000000' })`
`borderLeft(value?)`	Gets or sets the left border.	`range.borderLeft({ size: 1, color: '#000000' })`

Values and Formulas

Method	Description	Example
`value(value?)`	Gets or sets the cell value. Setting a value removes any existing formula.	`range.value(42)`
`formula(value?)`	Gets or sets the cell formula.	`range.formula('=SUM(A1:A10)')`
`input(value?)`	Parses and sets the value exactly as the formula bar does.	`range.input('=SUM(B1:B5)')`
`link(value?)`	Gets or sets a hyperlink URL. Pass `null` to remove.	`range.link('https://example.com')`
`enable(value?)`	Gets or sets the editable state of the cells.	`range.enable(false)`
`forEachCell(fn)`	Iterates all cells in the range.	`range.forEachCell((r, c, cell) => console.log(cell.value))`

Range Operations

Method	Description	Example
`select()`	Scrolls to and selects the range in the active sheet.	`range.select()`
`clear(options?)`	Clears cell contents and/or formatting. Omit options to clear both.	`range.clear({ contentsOnly: true })`
`clearFormat()` *	Clears only the visual formatting of the range.	`(range as any).clearFormat()`
`clearContent()` *	Clears only the values and formulas of the range.	`(range as any).clearContent()`
`clone()` *	Returns a new `Range` covering the same cells.	`const copy = (range as any).clone()`
`merge()` *	Merges all cells in the range into one.	`(range as any).merge()`
`unmerge()` *	Unmerges previously merged cells.	`(range as any).unmerge()`
`fillFrom(srcRange, direction)` *	Fills the range from a source range in the given direction: `0`=down, `1`=right, `2`=up, `3`=left. Omit direction to auto-detect from range positions.	`(range as any).fillFrom(src, 0)`

Working with Sheets

The Sheet API lets you resize the grid, adjust row and column dimensions, freeze panes, and manage sheets at runtime.

Use the configurator panel in the demo below to resize the grid, adjust row heights and column widths, and freeze leading rows and columns.

Change Theme

Theme

Loading ...

The following tables list all available Sheet methods. Methods marked with an asterisk (*) are not included in the TypeScript type definitions. The sheet variable is already typed as any, so no additional cast is needed.

The sheet variable is obtained from the active sheet:

typescript

const widget = this.spreadsheetRef.spreadsheetWidget;
const sheet  = widget.activeSheet() as any;

Rows, Columns, and Freeze Panes

Method	Description	Example
`resize(rows, cols)`	Sets the number of visible rows and columns. Data beyond the new bounds is removed. Useful when loading a dataset of known size to trim the empty region.	`sheet.resize(20, 6)`
`columnWidth(index, value?)` *	Gets or sets the width in pixels of the column at the given zero-based index.	`sheet.columnWidth(1, 200)`
`rowHeight(index, value?)` *	Gets or sets the height in pixels of the row at the given zero-based index.	`sheet.rowHeight(0, 40)`
`hideColumn(index)` *	Hides the column at the given zero-based index.	`sheet.hideColumn(2)`
`unhideColumn(index)` *	Shows a previously hidden column.	`sheet.unhideColumn(2)`
`hideRow(index)` *	Hides the row at the given zero-based index.	`sheet.hideRow(4)`
`unhideRow(index)` *	Shows a previously hidden row.	`sheet.unhideRow(4)`
`frozenRows(value?)` *	Gets or sets the number of frozen leading rows. Pass `0` to unfreeze rows.	`sheet.frozenRows(1)`
`frozenColumns(value?)` *	Gets or sets the number of frozen leading columns. Pass `0` to unfreeze columns. Can be chained after `frozenRows()`.	`sheet.frozenRows(1).frozenColumns(2)`

Selection

Method	Description	Example
`range(address)`	Returns a `Range` object for the given cell address or address range.	`sheet.range('B2:D5')`
`selection()` *	Returns the current selection address string.	`sheet.selection() // "B2:D5"`
`activeCell()`	Returns the address of the current active cell.	`sheet.activeCell() // "B2"`

Sheet Operations

Use sheet operations when you create or reconfigure sheets in code. For example, create one sheet for each data category when the component initializes.

For methods marked with an asterisk (*), cast the widget to any first.

Method	Description	Example
`sheets()`	Returns an array of all sheet objects in the workbook.	`widget.sheets()`
`activeSheet(sheet?)`	Gets or sets the active sheet. Pass a sheet object to switch to it.	`widget.activeSheet(sheet)`
`sheetByName(name)` *	Returns the sheet with the given name. Use this to look up a sheet before passing it to `activeSheet()` or `renameSheet()`.	`(widget as any).sheetByName('Q1')`
`insertSheet(options)` *	Adds a new sheet to the workbook.	`(widget as any).insertSheet({ name: 'Q4' })`
`renameSheet(sheet, name)` *	Renames the given sheet.	`(widget as any).renameSheet(sheet, 'Summary')`
`removeSheet(sheet)` *	Removes the given sheet. Requires at least two sheets in the workbook.	`(widget as any).removeSheet(sheet)`