SpreadJS 15
SpreadJS Designer Component / Customizations / Bind File Import Events
In This Topic
    Bind File Import Events
    In This Topic

    You can add functions in the SpreadJS Designer Component during file import operations.

    Binding Methods

    Designer Component provides event binding methods bindunbind, 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.


    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.

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


    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.

    Copy Code
    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
    // Using the unbindAll method to remove all the events