How to add custom height and width to multiple rows and columns using the context menu in Angular Spreadsheet?

This knowledge base article explains how to add custom height and width to multiple rows and columns using the context menu in Angular Spreadsheet. To achieve this, you can customize the header context menu by adding “Row Height” and “Column Width” options via the addContextMenuItems method in the contextMenuBeforeOpen event of the spreadsheet.

By selecting the “Row Height” or “Column Width” option from the context menu while an entire row or column is selected, a dialog is displayed to specify the desired row height or column width. This action is handled in the contextMenuItemSelect event of the spreadsheet. Once the desired values are entered in the dialog, the custom height and width can be applied to the selected rows and columns using the setRowsHeight and setColumnsWidth methods of the spreadsheet, which are executed in the click handler of the “OK” button in the dialog.

[app.component.html]:

<div class="control-section">
   <ejs-spreadsheet #default [openUrl]="openUrl" [saveUrl]="saveUrl" (created)="created()" (contextMenuBeforeOpen)="contextMenuBeforeOpen($event)" (contextMenuItemSelect)="contextMenuItemSelect($event)" >
       <e-sheets>
           <e-sheet name="Car Sales Report">
               <e-ranges>
                   <e-range [dataSource]="data"></e-range>
               </e-ranges>
               <e-columns>
                   <e-column [width]=180></e-column>
                   <e-column [width]=130></e-column>
                   <e-column [width]=130></e-column>
                   <e-column [width]=180></e-column>
                   <e-column [width]=130></e-column>
                   <e-column [width]=120></e-column>
               </e-columns>
           </e-sheet>
       </e-sheets>
   </ejs-spreadsheet>
</div> 

[app.component.ts]:

export class AppComponent {
 constructor() {

 }
 @ViewChild('default')
 public spreadsheetObj: SpreadsheetComponent;
 public data: Object[] = getDefaultData();
 public isSingleColumn: boolean;
 public isSingleRow: boolean;
 public openUrl = 'https://services.syncfusion.com/angular/production/api/spreadsheet/open';
 public saveUrl = 'https://services.syncfusion.com/angular/production/api/spreadsheet/save';
 created() {
   this.spreadsheetObj.cellFormat({ fontWeight: 'bold', textAlign: 'center', verticalAlign: 'middle' }, 'A1:F1');
   this.spreadsheetObj.cellFormat({ fontWeight: 'bold' }, 'E31:F31');
   this.spreadsheetObj.cellFormat({ textAlign: 'right' }, 'E31');
   this.spreadsheetObj.numberFormat('$#,##0.00', 'F2:F31');
 }

 contextMenuBeforeOpen(args) {
   if (closest(args.event.target as Element, '.e-colhdr-table') || closest(args.event.target as Element, '.e-rowhdr-table')) {
     let selectedRangeIndexes: number[] = getRangeIndexes(this.spreadsheetObj.getActiveSheet().selectedRange);
     // Confirm if a single column header or multiple column headers are selected.
     this.isSingleColumn = selectedRangeIndexes[1] === selectedRangeIndexes[3];
     // Confirm if a single row header or multiple row headers are selected.
     this.isSingleRow = selectedRangeIndexes[0] === selectedRangeIndexes[2];
     // To add context menu items in column header context menu.
     if (closest(args.event.target as Element, '.e-colhdr-table')) {
       this.spreadsheetObj.addContextMenuItems(
         [{ text: 'Column Width' }],
         this.isSingleColumn ? 'Insert Column' : 'Insert Columns',
         false
       );
     }
     // To add context menu items in row header context menu.
     else if (closest(args.event.target as Element, '.e-rowhdr-table')) {
       this.spreadsheetObj.addContextMenuItems(
         [{ text: 'Row Height' }],
         this.isSingleRow ? 'Insert Row' : 'Insert Rows',
         false
       );
     }
   }
 }

 contextMenuItemSelect(args) {
   // Trigger the dialog open method with selected item text.
   if (args.item.text === 'Row Height') {
     this.showDialog('Row Height');
   } else if (args.item.text === 'Column Width') {
     this.showDialog('Column Width');
   }
 }


 showDialog(dialogName: string): void {
   const sheet: SheetModel = this.spreadsheetObj.getActiveSheet();
   const rangeIndex: number[] = getRangeIndexes(sheet.selectedRange);
   let dialogContent: string;
   let allWidthsSame: boolean = true;
   let allHeightsSame: boolean = true;
   if (dialogName == 'Row Height') {
     // To confirm that all selected rows have the same height to display the row height value in the dialog
     if (!this.isSingleRow) {
       const rows: RowModel[] = sheet.rows;
       const firstRowHeight: number = (rows[rangeIndex[0]] && rows[rangeIndex[0]].height) || 20;
       for (let i: number = rangeIndex[0] + 1; i <= rangeIndex[2]; i++) {
         const rowHeight: number = (rows[i] && rows[i].height) || 20;
         if (rowHeight !== firstRowHeight) {
           allHeightsSame = false;
           break;
         }
       }
     }
     // To display row height dialog and display the current height of the row
     dialogContent = `Row height(px) : <input type="number" id="element" value="${this.isSingleRow ? getRowHeight(sheet, rangeIndex[0]) : (allHeightsSame ? getRowHeight(sheet, rangeIndex[0]) : "")}">`; // To display row height in a dialog, similar to the functionality in MS Excel.
   } else {
     // To confirm that all selected columns have the same width to display the column width value in the dialog
     if (!this.isSingleColumn) {
       const columns: ColumnModel[] = sheet.columns;
       const firstColumnWidth: number = (columns[rangeIndex[1]] && columns[rangeIndex[1]].width) || 64;
       for (let i: number = rangeIndex[1] + 1; i <= rangeIndex[3]; i++) {
         const columnWidth: number = (columns[i] && columns[i].width) || 64;
         if (columnWidth !== firstColumnWidth) {
           allWidthsSame = false;
           break;
         }
       }
     }
     // To display column width dialog and display the current width of the column
     dialogContent = `Column width(px) : <input type="number" id="element" value="${this.isSingleColumn ? getColumnWidth(sheet, rangeIndex[1]) : (allWidthsSame ? getColumnWidth(sheet, rangeIndex[1]) : "")}">`; // To display column width in a dialog, similar to the functionality in MS Excel.
   }
   const dialogInstance: any = this.spreadsheetObj.serviceLocator.getService('dialog');

   // To show the dialog with the specified content.
   dialogInstance.show({
     header: dialogName,
     target: this.spreadsheetObj.element,
     height: 150,
     width: 350,
     isModal: true,
     allowDragging: true,
     showCloseIcon: true,
     content: dialogContent,
     buttons: [
       {
         buttonModel: { content: 'Ok', isPrimary: true },
         // triggers after clicking the Ok button in dialog.
         click: (args) => {
           let size: number = args.target.closest('.e-dialog').querySelector('#element').value;
           if (dialogName == 'Row Height') {
             // Set the height for the selected row/rows using setRowsHeight()
             this.spreadsheetObj.setRowsHeight(size, [(rangeIndex[0] + 1) + ":" + (rangeIndex[2] + 1)]);
           }
           // Set the height for the selected column/columns using setColumnsWidth()
           else {
             this.spreadsheetObj.setColumnsWidth(size, [getColumnHeaderText(rangeIndex[1] + 1) + ":" + getColumnHeaderText(rangeIndex[3] + 1)]);
           }
           // To hide the dialog instance.
           dialogInstance.hide();
         },
       },
     ],
   });
 }
} 

Sample Link: https://stackblitz.com/edit/angular-soksar-ioxcgj

Output: