How to alert a user on importing a new file by replacing the existing modified worksheet in JavaScript Spreadsheet

This knowledge base explains you how to alert a user on importing a new file by replacing the existing modified worksheet in JavaScript Spreadsheet. You can achieve this by using the actionComplete and fileMenuItemSelect events. Declare a boolean value in actionComplete event and make it true, if only the cellSave action is triggered. On the fileMenuItemSelect event, check whether the item selected is open and restrict the default open by setting args.cancel = true, and throw an alert as shown below.

[HTML]

<div id="spreadsheet"></div> 

[TS]

import { enableRipple } from '@syncfusion/ej2-base';
enableRipple(true);
import {
 CellSaveEventArgs,
 MenuSelectEventArgs,
 Spreadsheet,
} from '@syncfusion/ej2-spreadsheet';
import * as dataSource from './default-data.json';

// Boolean value to check whether the workbook is modified or not.
let checkerValue: boolean = false;

//Initialize Spreadsheet component
let spreadsheet: Spreadsheet = new Spreadsheet({
 sheets: [
   {
     name: 'Car Sales Report',
     ranges: [{ dataSource: (dataSource as any).defaultData }],
   },
 ],
 openUrl: 'https://services.syncfusion.com/js/production/api/spreadsheet/open',
 actionComplete: function(args: { action: string; eventArgs: CellSaveEventArgs }) {
   // Condition to check whether the cell has been edited or not.
   if (args.eventArgs.oldValue || args.action === 'cellSave') {
     checkerValue = true;
   }
 },
 fileMenuItemSelect: function(args: MenuSelectEventArgs) {
   // Condition to check wheether the menu item selected is Open and the existing content is edited or not.
   if (args.item.text === 'Open' && checkerValue) {
     args.cancel = true;
     // Throws alert for prompting the user to confirm the importing action.
     const result = confirm('Open file would cover the changed excel');
     if (result) {
       // Perform default import action.
       args.cancel = false;
     }
   }
 },
});

spreadsheet.appendTo('#spreadsheet');

Sample Link:

https://stackblitz.com/edit/cpsfyv-tpmnbz?file=index.ts

Output:

Documentation link:

https://ej2.syncfusion.com/documentation/spreadsheet/open-save

https://ej2.syncfusion.com/documentation/spreadsheet/editing