Articles in this section

How to customize edit alert dialog content in JavaScript Spreadsheet?

This article explains how to customize the edit alert dialog content in the JavaScript Spreadsheet.

Use the dialogBeforeOpen client-side event to achieve this requirement. By checking the dialogName, assign the dialog content 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');

 

Refer to the working sample for additional details and implementation: Sample


 

Output:

 

customize alert dialog

 

Documentation:

https://ej2.syncfusion.com/documentation/spreadsheet/protect-sheet/

 

https://help.syncfusion.com/document-processing/excel/spreadsheet/javascript-es6/editing

 

Demo Link:

 

https://ej2.syncfusion.com/demos/#/bootstrap5/spreadsheet/protect-sheet.html

 

 

 

 

Did you find this information helpful?
Yes
No
Help us improve this page
Please provide feedback or comments
Comments (0)
Access denied
Access denied