Initialization

info

Download the DHTMLX DataView package as part of the DHTMLX Suite library.

Follow these steps to initialize DHTMLX DataView on a page:

• Include source files
• Create a container
• Initialize DataView with the constructor
• Load data into DataView

index.html

<!DOCTYPE html>
<html>
    <head>
        <title>How to start with DHTMLX DataView</title>         
        <script type="text/javascript" src="../../codebase/suite.js"></script>
        <link rel="stylesheet" href="../../codebase/suite.css">
    </head>
    <body>
        <div id="dataview_container"></div>
        <script>
            // creating DHTMLX DataView
            const dataview = new dhx.DataView("dataview_container", {
                itemsInRow: 5
            });
        </script>
    </body>
</html>

Include source files

Unpack the downloaded package into your project folder.

Create an HTML file and add the full paths to the JS and CSS files of the DHTMLX Suite library in its header. The files are:

• suite.js
• suite.css

index.html

<script type="text/javascript" src="../../codebase/suite.js"></script>
<link rel="stylesheet" href="../../codebase/suite.css">

Create a container

Add a container for DataView and give it an id, for example dataview_container:

index.html

<div id="dataview_container"></div>

Initialize DataView

Initialize DataView with the dhx.DataView constructor. The constructor takes two parameters:

• The HTML container for DataView.
• An object with configuration properties (optional). If you omit this argument, DataView uses the default settings.

index.js

// creating DHTMLX DataView
const dataview = new dhx.DataView("dataview_container", {
    itemsInRow: 5
});

info

To display data in DataView, define a custom template with the template configuration property.

Another way to display data in DataView is to prepare a data set with the value attribute.

Configuration properties

The DataView API overview article describes the properties you can specify to adapt DataView to your needs.

Load data into DataView

The Data loading article explains how to load data into DHTMLX DataView.

Example