How to change the default file name in JavaScript Spreadsheet?

This article explains how to change the default file name in JavaScript Spreadsheet Save As dialog. To achieve this requirement, you can use the spreadsheet dialogBeforeOpen event and change the value of the input element in the dialog component open event.

[HTML]

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

[TS]

import { getComponent } from '@syncfusion/ej2-base';
import {
 DialogBeforeOpenEventArgs,
 Spreadsheet,
} from '@syncfusion/ej2-spreadsheet';
import { Dialog as DialogComponent } from '@syncfusion/ej2-popups';

function beforeOpen(): void {
 //Get the input element and customize the value.
 let element: HTMLInputElement = this.element.getElementsByClassName(
   'e-text-open'
 )[0] as HTMLInputElement;
 element.value = 'Your Own Text';
}

let spreadsheet: Spreadsheet = new Spreadsheet({
 openUrl: 'https://services.syncfusion.com/js/production/api/spreadsheet/open',
 saveUrl: 'https://services.syncfusion.com/js/production/api/spreadsheet/save',
 dialogBeforeOpen: (args: DialogBeforeOpenEventArgs): void => {
   //Get instance of the Save As dialog by checking the dialog name.
   if (args.dialogName === 'Save As') {
     let dlg: DialogComponent = getComponent(
       spreadsheet.element.querySelector('.e-dialog') as HTMLElement,
       'dialog'
     );
     dlg.open = beforeOpen;
   }
 },
});

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/dialog/getting-started

Conclusion

​We hope you enjoyed learning about how to change the default file name in JavaScript Spreadsheet.

You can refer to our JavaScript Spreadsheet feature tour page to learn about its other groundbreaking feature representations and documentation, and how to quickly get started for configuration specifications. You can also explore our JavaScript Spreadsheet example to understand how to create and manipulate data.

For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our other controls.

If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, BoldDesk Support, or feedback portal. We are always happy to assist you!