How to add option in the context menu for changing row and column in the JavaScript Spreadsheet?
This article explains how to change the row or column size for a JavaScript Spreadsheet through the context menu option.
Use the setRowHeight and setColWidth methods to change the row or column size in the spreadsheet. Initially, you must add the custom options (Row Height or Column Width) to the header context menu using the addContextMenuItems method in the contextMenuBeforeOpen event. Handle the custom option, click action in the contextMenuItemSelect event, and call the respective public methods based on the text argument received in this event.
HTML]
<div id="spreadsheet"></div>
[TS]
// Initialize the Spreadsheet component.
let spreadsheet: Spreadsheet = new Spreadsheet({
sheets: [
{
name: 'EMI Schedule',
ranges: [{ dataSource: (dataSource as any).defaultData }],
},
],
contextMenuBeforeOpen: (args: BeforeOpenCloseMenuEventArgs): void => {
// Add the context menu items in the column header context menu.
if (closest(args.event.target as Element, '.e-colhdr-table')) {
spreadsheet.addContextMenuItems(
[{ text: 'Column Width' }],
'Insert Column',
false
);
}
// Add the context menu items in the row header context menu.
else if (closest(args.event.target as Element, '.e-rowhdr-table')) {
spreadsheet.addContextMenuItems(
[{ text: 'Row Height' }],
'Insert Row',
false
);
}
},
contextMenuItemSelect: (args: MenuSelectEventArgs): void => {
// Trigger the open dialog method with the selected item text.
if (args.item.text === 'Row Height') {
showDialog('Row Height');
} else if (args.item.text === 'Column Width') {
showDialog('Column Width');
}
},
});
spreadsheet.appendTo('#spreadsheet');
function showDialog(dialogName: string):void {
let sheet: SheetModel = spreadsheet.getActiveSheet();
let rangeIndex: number[] = getRangeIndexes(sheet.selectedRange);
let dialogContent: string;
if (dialogName == 'Row Height') {
dialogContent = 'Row height : <input id="element">';
} else {
dialogContent = 'Column width : <input id="element">';
}
const dialogInstance: any = spreadsheet.serviceLocator.getService('dialog');
// Show the dialog with the specified content.
dialogInstance.show({
header: dialogName,
target: spreadsheet.element,
height: 150,
width: 300,
isModal: true,
allowDragging: true,
showCloseIcon: true,
content: dialogContent,
buttons: [
{
buttonModel: { content: 'Ok', isPrimary: true },
// Trigger after clicking Ok in the dialog.
click: (args: ChangeEventArgs) => {
let size: number =
args.target.parentElement.parentElement.querySelector(
'#element'
).value;
if (dialogName == 'Row Height') {
// Set the height for the selected row.
spreadsheet.setRowHeight(size, rangeIndex[0], sheet.id - 1);
}
// Set the width for the selected column.
else {
spreadsheet.setColWidth(size, rangeIndex[1], sheet.id - 1);
}
// Hide the dialog instance.
dialogInstance.hide();
},
},
],
});
}
Sample Link: https://stackblitz.com/edit/vb8xgu?file=index.ts
Sample Output:
Conclusion
I hope you enjoyed learning about how to add custom option in the context menu for changing the size of row and column.
You can refer to our JavaScript Spreadsheet’s feature tour page to know about its other groundbreaking feature representations. You can also explore our JavaScript Spreadsheet examples to understand how to present and manipulate data.
For current customers, you can check out our JavaScript 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 JavaScript Spreadsheet and other JavaScript components.
If you have any queries or require clarifications, please let us know in comments below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!
