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.

Events

Designer Component provides file import-related events namely, FileLoading and FileLoaded in the Designer.Events class. These events are accepted as string in the bind methods to perform user-specified functions in SpreadJS Designer Component.

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, Csv.

Example

The following example 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(document.getElementById("designerHost"), '', spread);

// Using the FileLoading Event in bind method
designer.bind(GC.Spread.Sheets.Designer.Events.FileLoading, function(type, message){
    if (message.fileType = GC.Spread.Sheets.Designer.FileType.Excel){
        let spreadJsonData = message.data;
        if(spreadJsonData.sheetCount >= 3) {
            window.alert("Number of worksheets: " + spreadJsonData.sheetCount);
        }
    };
});            

// Using the FileLoaded Event in bind method
designer.bind(GC.Spread.Sheets.Designer.Events.FileLoaded, function(event,data){
    window.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();