Initializing DataView

To initialize DataView, you need to complete the following steps:

include the related js and css files
place a container for dataview on a page
run the dataview initialization

Step 1. Including Necessary Files

To start working with dhtmlxDataView, you need to include DataView js/css files on a page.

In order to use dhtmlxDataView as a separate component, you need to include its source files on the page. There are two of them:

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

If you use dhtmlxDataView as a part of "dhtmlxSuite" package, you need to have 2 files included:

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

dhtmlxDataview .js/.css files are part of dhtmlx.js/.css, so there is no need to include them separately.

Including source files from CDN

To include JS/CSS files of "dhtmlxSuite" package from CDN, you should set direct links to dhtmlx.js and dhtmlx.css files:

<link rel="stylesheet" href="http://cdn.dhtmlx.com/edge/dhtmlx.css" 
    type="text/css"> 
<script src="http://cdn.dhtmlx.com/edge/dhtmlx.js" 
    type="text/javascript"></script>

By setting links in this way you will get the latest version of dhtmlxSuite. To get some particular version, just specify the number of the required version in the link, like this:

<link rel="stylesheet" href="http://cdn.dhtmlx.com/5.0/dhtmlx.css" 
    type="text/css"> 
<script src="http://cdn.dhtmlx.com/5.0/dhtmlx.js" 
    type="text/javascript"></script>

Step 2. Creating Container

HTML container for the dataview must have some sizes specified:

<div id="data_container" style="width:596px;height:396px;"></div>

Step 3. Initializing DataView

As only the "container" is mandatory you need to define the template and the source of data to see any result on a page:

view = new dhtmlXDataView({
    container:"data_container",
    type:{
        template:"#Package# : #Version#<br/>#Maintainer#"
    }
});
view.add({
    Package:"test one",
    Version:"0.1",
    Maintainer:"dhtmlx" 
});

Other possible parameters are given in the article Object Constructor.

Since the add command is not a mandatory part of initialization, you will not have any visible objects on the page before some data isn't loaded into dataview by the load or add commands.

Related sample: Static loading