Category / Section
How to customize edit alert dialog content in JavaScript Spreadsheet?
1 min read
This Knowledge Base explains how to customize the edit alert dialog content in JavaScript Spreadsheet.
Use the dialogBeforeOpen client-side event to achieve this requirement. By checking the dialogName, assign the dialog content by using the content property from the argument.
[HTML]
<div id="spreadsheet"></div>
[TS]
//Initialize the spreadsheet component. let spreadsheet: Spreadsheet = new Spreadsheet({ sheets: [ { name: 'Car Sales Report', ranges: [{ dataSource: (dataSource as any).defaultData }], columns: [ { width: 180 }, { width: 130 }, { width: 130 }, { width: 180 }, { width: 130 }, { width: 120 }, ], }, ], created: (): void => { //Apply the cell and number formatting to the specified range of the active sheet. spreadsheet.cellFormat( { fontWeight: 'bold', textAlign: 'center', verticalAlign: 'middle' }, 'A1:F1' ); spreadsheet.numberFormat('$#,##0.00', 'F2:F31'); // To protect the particular sheet. let protectSetting = { selectCells: true, formatCells: false, formatRows: false, formatColumns: false, insertLink: false, }; spreadsheet.protectSheet('Car Sales Report', protectSetting); // To provide sheet name and protect the setting. }, dialogBeforeOpen: (args): void => { var actCell = spreadsheet.getActiveSheet().activeCell; if (args.dialogName === 'EditAlertDialog') { if (actCell.indexOf('B') > -1) { args.content = 'Enter Valid Model'; } else if (actCell.indexOf('A') > -1) { args.content = 'Enter Valid Name'; } else if (actCell.indexOf('C') > -1) { args.content = 'Enter valid color'; } } }, }); //Render the initialized spreadsheet component. spreadsheet.appendTo('#spreadsheet');
Sample Link: https://stackblitz.com/edit/zz5sjz-ufv2mt?file=index.ts
Output:
Documentation:
https://ej2.syncfusion.com/documentation/spreadsheet/protect-sheet/
https://ej2.syncfusion.com/documentation/spreadsheet/editing/
Demo Link:
https://ej2.syncfusion.com/demos/#/bootstrap5/spreadsheet/protect-sheet.html