Initialization

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

Download the DataView package and unpack it into a folder of your project
Include source files
Create a container
Initialize DataView with the object constructor
Load data into DataView

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

Include source files

Create an HTML file and place full paths to CSS and JS files of dhtmlxDataView into the header of the created HTML file. The files are:

dataview.js
dataview.css

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

Create a container

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

dataview.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 (see the full list below). If this argument is not passed to the constructor, the settings will be default.

dataview.html

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

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

Configuration properties

You can specify the following properties in the configuration object of DataView:

itemsInRow - (number) specifies the number of data items in a row
gap - (string) sets margins for DataView items
dragMode - (string) enables drag-n-drop in DataView
template - (function) specifies a template for DataView items
css - (string) adds a CSS class(es) to the component
arrowNavigation - (function|boolean) enables/disables navigation in DataView by arrow keys
data - (array)specifies an array of data objects to set into the dataview
dragCopy - (boolean) defines that an item is copied to a target during drag-n-drop
dropBehaviour - (string) defines the behaviour of a dragged item

Load data into DataView

Finally, you are 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");