Merging Multiple Cells in the Spreadsheet

Updated on Jan 20, 2026

Environment

Product

Progress® Kendo UI® Spreadsheet for Angular

Description

I want to merge cells in the Kendo UI for Angular Spreadsheet. I need to merge specific cells programmatically. I also want to know if I can implement dynamic cell merging based on user selection.

This knowledge base article also answers the following questions:

• How do I merge selected cells dynamically in Kendo UI for Angular Spreadsheet?
• Can I merge cells programmatically in Kendo UI for Angular Spreadsheet?
• What is the method to merge cells using SpreadsheetWidget in Angular?

Solution

To merge cells in the Kendo UI for Angular Spreadsheet dynamically, use the SpreadsheetWidget API. The activeSheet() method gives you access to the current sheet. The range() combined with merge() lets you merge the selected cells.

Some of the underlying SpreadsheetWidget API methods (such as selection() and merge()) are not currently documented in the public API documentation. These methods are part of the internal widget API and may require type assertions (as any) when you use them in TypeScript.

Here is how you can implement dynamic cell merging in your Angular component:

1. Set up a ViewChild reference to access the SpreadsheetComponent:

html

<kendo-spreadsheet #spreadsheet></kendo-spreadsheet>

typescript

@ViewChild('spreadsheet', { static: false })
public spreadsheet!: SpreadsheetComponent;

1. Get the SpreadsheetWidget reference from the SpreadsheetComponent:

   typescript

   const spreadsheetWidget = this.spreadsheet.spreadsheetWidget;
   if (!spreadsheetWidget) {
     return;
   }

2. Access the active sheet using the activeSheet() method:

   typescript

   const activeSheet = spreadsheetWidget.activeSheet() as any;
   if (!activeSheet) {
     return;
   }

3. Get the current selection with selection():

   typescript

   const selection = activeSheet.selection();

4. Merge the selected range using the range(selection).merge() method:

   typescript

   activeSheet.range(selection).merge();

The following example shows how to merge selected cells or specific ranges programmatically in the Kendo UI for Angular Spreadsheet. You can select multiple cells using left mouse click and Shift key, then click the Merge Cells button to merge them.

Change Theme

Theme

Loading ...

See Also

• API Reference for Kendo UI for Angular Spreadsheet
• Displaying Tooltips for Spreadsheet Cells
• Spreadsheet Data Binding