Skip to main content

load()

Description​

Loads data from an external file

Usage​

load(url: string, type?: string): promise;

Parameters​

  • url - (required) the URL of an external file
  • type - (optional) optional, the type of data to load: "json" (default), "csv", "xlsx"

Returns​

The method returns a promise of data loading

Example​

const spreadsheet = new dhx.Spreadsheet("spreadsheet", {});
spreadsheet.parse(data);

// load data in the JSON format (default)
spreadsheet.load("../common/data.json");

// load data in the CSV format
spreadsheet.load("../common/data.csv", "csv");

// load data in the Excel format, (.xlsx only)
spreadsheet.load("../common/data.xlsx", "xlsx");

Related samples:

info

The component will make an AJAX call and expect the remote URL to provide valid data.

Data loading is asynchronous, so you need to wrap any after-loading code into a promise:

spreadsheet.load("../some/data.json").then(function(){
    spreadsheet.selection.add(123);
});

Loading Excel data​

note

Please note that the component supports import from Excel files with the .xlsx extension only.

DHTMLX Spreadsheet uses the WebAssembly-based library Excel2Json for import of data from Excel. Check the details.

Loading JSON files​

It is possible to allow end users to load a JSON file into the spreadsheet via the File Explorer. To do that:

  • Specify a button to open the File Explorer where ".json" files can be selected:
<section class="dhx_sample-controls">
    <button class="dhx_sample-btn dhx_sample-btn--flat" onclick="json()">Import json</button>
</section>
  • Call the load() method with two parameters: an empty string as an URL and the type of data to load ("json"):
const spreadsheet = new dhx.Spreadsheet("spreadsheet", {
    menu: true,
});

spreadsheet.parse(dataset);

function json() {
    spreadsheet.load("", "json"); // loads data from a .json file
}

Check the example.

Changelog: The ability to load a JSON file via the File Explorer was added in v4.3

Related articles: Data loading and export