Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Showing content from https://docs.dhtmlx.com/suite/grid/data_loading/ below:

JavaScript Grid - Data Loading

There are several ways of loading data into DHTMLX Grid:

• on initialization of Grid
• after initialization of Grid

First, you need to prepare a data set that will be loaded into Grid.

DHTMLX Grid expects loaded data in the JSON format.

info

Please note that if you specify the id fields in the data collection, their values should be unique. You can also omit the id fields in the data collection. In this case they will be generated automatically.

Here is an example of an appropriate data set:

const dataset = [
    {
        "id": 0,
        "a": 1,
        "b": "Linwood Long long long",
        "c": "Petersen",
        "d": "Dahlgreen Place"
    },
    {
        "id": 1,
        "a": 2,
        "b": "Edenburg",
        "c": "Agnes",
        "d": "Gem Street"
    },
    
];

Related sample: Grid. Large dataset

Each object in the data set contains configuration of a grid row. The structure of a row is rather flexible. It may include:

You can load a predefined data set into Grid on the initialization stage. Use the data configuration property, as in:

const grid = new dhx.Grid("grid_container", {
    columns: [
        
    ],
    data: dataset
});

Related sample: Grid. Initialization with config.data

There are two ways to load data into Grid after its initialization:

• from an external file
• from a local data source

To load data from an external file, make use of the load() method of Data Collection. It takes the URL of the file with data as a parameter:

const grid = new dhx.Grid("grid_container");
grid.data.load("../common/dataset.json");

Related sample: Grid. Initialization with data.load()

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

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

grid.data.load("/some/data").then(function(){
   
});

To load data from a local data source, use the parse() method of Data Collection. Pass a predefined data set as a parameter of this method:

const grid = new dhx.Grid("grid_container");
grid.data.parse(dataset);

Related sample: Grid. Initialization with data.parse()

Note that for loading data from a CSV file into a grid, you need to:

• create a data driver with the nameByHeader: true setting. Thus the data from the first data line will be used as keys of items
• pass the created driver as a second parameter to the parse() method

Check the example below:

const grid = new dhx.Grid("grid", {
    columns: [
        { width: 150, id: "country", header: [{ text: "Country" }] },
        { width: 150, id: "population", header: [{ text: "Population" }] },
        { width: 150, id: "yearlyChange", header: [{ text: "Yearly Change" }] },
        { width: 150, id: "netChange", header: [{ text: "Net Change" }] },
        { width: 150, id: "density", header: [{ text: "Density (P/Km²)" }] },
        { width: 150, id: "area", header: [{ text: "Land Area (Km²)" }] },
        { width: 150, id: "migrants", header: [{ text: "Migrants (net)" }] },
        { width: 150, id: "fert", header: [{ text: "Fert. Rate" }] },
        { width: 150, id: "age", header: [{ text: "Med. Age" }] },
        { width: 150, id: "urban", header: [{ text: "Urban Pop" }] }
    ]
});

const csvData = "country,population,yearlyChange,netChange,density,area,migrants,fert,age,urban,id\nChina,1415045928,0.0039,5528531,151,9388211,-339690,1.6,37,0.5800,1\nIndia,1354051854,0.0111,14871727,455,2973190,-515643,2.4,27,0.3200,2,true\nU.S.,326766748,0.0071,2307285,36,9147420,900000,1.9,38,0.8300,3";
const csvDataDriver = new dhx.dataDrivers.csv({ nameByHeader: true });
grid.data.parse(csvData, csvDataDriver);

To save the current state of a grid, use the serialize() method of Data Collection. It converts the data of a grid into an array of JSON objects. Each JSON object contains the configuration of a separate row.

const state = grid1.data.serialize();

Then you can parse the data stored in the saved state array to a different grid. For example:

const grid2 = new dhx.Grid(document.body);

grid2.data.parse(state);

Pro version only

This functionality requires PRO version of the DHTMLX Grid (or DHTMLX Suite) package.

To enable dynamic data loading in Grid you need to:

• initialize lazyDataProxy as described in the Dynamic Loading article

new dhx.LazyDataProxy("https://docs.dhtmlx.com/suite/backend/lazyload", {
    limit: 30,
    prepare: 5,
    delay: 150,
    from: 0
});

• load data into Grid via the load() method of Data Collection and pass lazyDataProxy as a parameter of this method:

const grid = new dhx.Grid("grid_container");
grid.data.load(lazyDataProxy);

Related sample: External data lazy load

info

The sort() method of Data Collection will not work until all data are loaded into Grid. Note that for correct work of lazy loading, you should send all changes in Data Collection to the server at the proper time.

RetroSearch is an open source project built by @garambo | Open a GitHub Issue

Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo

HTML: 3.2 | Encoding: UTF-8 | Version: 0.7.4