SpreadJS 14
Best Practices / Incremental Loading
In This Topic
    Incremental Loading
    In This Topic

    Depending on the data, loading extremely large files could take some time and/or reach the limits of the browser's capability. So, whenever you try to load a large file with lots of data or formulas embedded in it, it is recommended to use the incremental loading feature to shorten the data processing time and optimize the load process.

    The incremental loading feature loads the active sheet with some data initially and loads the remaining data piece by piece in the background such as formulas, cell values, and custom names. When you use the fromJSON function to load the data, you can set the incrementalLoading to true in the options.

    You can also use the callback function in incrementalLoading to get the loading status and use the IIncrementalLoadingStatus parameter to access worksheet-related information such as sheet names, current themes. Similarly, you can also set the next action to be performed when the loading gets finished.

    You can also specify whether to recalculate the cell values after loading data by setting doNotRecalculateAfterLoad to false.

    Note: Whenever any UI event is performed during the data loading process, SpreadJS first handles the event and then loads the rest of the data in the worksheet.

    The following example incrementally loads a JSON file in the worksheet and displays the sheet names in the console log as they are loading.

    Incremental Loading Example

    Using Code

    This code shows how to load JSON files using incremental loading.

    JavaScript
    Copy Code
    var incrementalEle = document.getElementById("incremental");
    var loadingStatus = document.getElementById("loadingStatus");
    function fromJSON(json)
    {
        if (incrementalEle.checked)
        {
            spread.fromJSON(json,
            {
                incrementalLoading:
                {
                    loading: function (progress, args)
                    {
                        progress = progress * 100;
                        document.getElementById("statusBarDiv").innerText = "Loading: " + progress.toFixed(2) + "%";
                        loadingStatus.value = progress;
                        console.log(progress, args.sheet.name());
                    },
                    loaded: function ()
                    {
                        document.getElementById("statusBarDiv").innerText = "Finish";
                    }
                }
            });
        }
        else
        {
            spread.fromJSON(json);
        }
    }