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

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

JavaScript DataView - Data Loading

There are several ways of loading DataView items:

• on initialization of DataView
• after initialization of DataView

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

DHTMLX DataView 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 = [
      {
        "value": "Ben",
        "short": "Ben is a very cautious 5-year-old Siberian Husky.",
        "thumbnailName": "01.jpg"
    },
    {
        "value": "Izzy",
        "short": "This is our most beloved kingfisher bird Izzy.",
        "thumbnailName": "02.jpg"
    },
    {
        "value": "Momo",
        "short": "Momo is a 25-year-old elephant with a big heart.",
        "thumbnailName": "03.jpg"
    }
]

Each object in the data set contains a number of key:value pairs that represent attributes of DataView items.

note

You can specify your own template of rendering DataView items with the help of the template configuration option.

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

const dataview = new dhx.DataView("dataview_container", {
    itemsInRow: 2,
    gap: 10,
    css: "dhx_widget--bordered",
    template: template,
    data: dataset
});

Related sample: Dataview. Initialization with config.data

There are two ways to load data into Combobox 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 DataCollection. It takes the URL of the file with data as a parameter:

const dataview = new dhx.DataView("dataview_container");
dataview.data.load("../common/dataset.json");

Related sample: Dataview. 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:

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

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

const dataview = new dhx.DataView("dataview_container");
dataview.data.parse(dataset);

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

To save the current state of a dataview, use the serialize() method of DataCollection. It converts the data of a dataview into an array of JSON objects. Each JSON object contains a set of key:value pairs that represent attributes of DataView items.

const state = dataview1.data.serialize();

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

const dataview2 = new dhx.DataView(document.body);

dataview2.data.parse(state);

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