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

This article explains how to alert a user when 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 the actionComplete event and set it to true only if the cellSave action is triggered. In the fileMenuItemSelect event, check whether the selected item is open, restrict the default open action by setting args.cancel = true, and display 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:

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

Output:

Documentation link:

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

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