Skip to main content

Initialization

To initialize dhtmlxDataView on a page, you need to take the following simple steps:

index.html
<!DOCTYPE html><html>    <head>        <title>How to Start with dhtmlxDataView</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 dhtmlxDataView            var dataview = new dhx.DataView("dataview_container",{                itemsInRow: 5            });        </script>    </body></html>

Related sample: Dataview. Basic Initialization

Include source files#

Create an HTML file and place full paths to JS and CSS files of the dhtmlxSuite library into the header of the file. 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 object constructor. The constructor has two parameters:

  • the HTML container for DataView,
  • optional, an object with configuration properties. If this argument is not passed to the constructor, the settings will be default.
script.js
// creating dhtmlxDataViewvar dataview = new dhx.DataView("dataview_container", {    itemsInRow: 5});

Configuration properties#

There is a set of properties you can specify for DataView to optimize its configuration for your needs.

The detailed information on DataView configuration options can be found in the Dataview API overview article.

Load data into DataView#

Finally, you are able to load DataView with data. You can load inline or external data into DataView.

  • to load data from a local source, use the parse() method of the Data Collection object:
var dataview = new dhx.DataView("dataview_container",{     itemsInRow: 5});
dataview.data.parse(data);
  • to load data from an external file, use the load() method of the Data Collection object:
var dataview = new dhx.DataView("dataview_container",{    itemsInRow: 5});
dataview.data.load("../common/dataset.json");

Related sample: Dataview. Basic Initialization