How to Add Custom Height and Width in Angular Spreadsheet?
This knowledge base article explains how to add custom height and width to multiple rows and columns using the context menu inAngular 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:
Conclusion
I hope you enjoyed learning about how to add custom height and width in Angular Spreadsheet.
You can refer to our Angular Spreadsheet feature tour page to know about its other groundbreaking feature representations and documentation, and how to quickly get started for configuration specifications. You can also explore our Angular Spreadsheet example to understand how to create and manipulate data.
For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our other controls.
If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!
