How to customize edit alert dialog content in JavaScript Spreadsheet?

3 mins read

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