- SpreadJS Overview
- Getting Started
- JavaScript Frameworks
- Best Practices
- Features
- SpreadJS Designer
-
SpreadJS Designer Component
- Getting Started
- Quick Start
- Theme
- Designer Interface
- JavaScript Frameworks
-
Customizations
- Add a Tab
- Add Elements to a Tab
- Set Active Ribbon Tab
- Enable/Disable Ribbon Elements
- Create/Customize Page Themes
- Add Context Menu Item
- Add New Dialog
- Bind File Import Events
- Customize Status Bar
- Add a Custom Component
- Customize Designer Localization
- Customize File Menu
- Customize Format Culture Dialog
- Customize Save File Dialog
- Work in Designer Component
- Toolbar Ribbon
- API Documentation
- SpreadJS Collaboration Server
- Touch Support
- Formula Reference
- Import and Export Reference
- Frequently Used Events
- API Documentation
- Release Notes
Bind File Import Events
You can add functions in the SpreadJS Designer Component during file import operations.
Binding Methods
Designer Component provides event binding methods bind, unbind, and unbindAll in the Designer class. These methods help to add or remove events in the Designer Component.
Method | Description |
|---|---|
bind | Binds an event to the designer. Accepts the type of event and the function to run when the event occurs. |
unbind | Removes the binding of an event to the designer. Accepts the type of event and the function for which to remove the binding |
unbindAll | Removes the binding of all events to the designer. |
Events
Designer Component provides file import-related events namely, FileLoading and FileLoaded in the Designer.Events class. These events are accepted as strings in the bind methods to perform user-specified functions in the SpreadJS Designer Component.
Event | Description |
|---|---|
FileLoading | Occurs when the file is loading due to a Spread.Sheets.Designer file action. |
FileLoaded | Occurs when the file has loaded due to a Spread.Sheets.Designer file action. |
These events occur when importing JSON, Excel, or CSV files to SpreadJS, but you can also specify format-specific events with the FileType enumeration options such as Json, Excel, and CSV.
Example
The following code sample sets the FileLoading event to display the number of worksheets if the imported file format is Excel and the number of worksheets is more than or equal to three. It also displays a message when file import is completed.
var designer = new GC.Spread.Sheets.Designer.Designer("designerHost");
// Using the FileLoading Event in bind method
designer.bind(GC.Spread.Sheets.Designer.Events.FileLoading, async function (type, message) {
if (message.fileType === GC.Spread.Sheets.Designer.FileType.Excel) {
let file = message.data;
if (file.name) {
alert("Name of the File: " + file.name);
}
};
});
// Using the FileLoaded Event in bind method
designer.bind(GC.Spread.Sheets.Designer.Events.FileLoaded, async function (event, data) {
alert("File has loaded");
});
// Using the unbind method to remove FileLoaded event
designer.unbind(GC.Spread.Sheets.Designer.Events.FileLoaded);
// Using the unbindAll method to remove all the events
designer.unbindAll();theme6