Articles in this section
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:

 

customize alert dialog

 

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

 

 

 

 

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