To initialize dhtmlxDataView on a page, you need to take the following simple steps:
<!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
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:
<script type="text/javascript" src="../../codebase/suite.js"></script>
<link rel="stylesheet" href="../../codebase/suite.css">
Add a container for DataView and give it an id, for example "dataview_container":
index.html
<div id="dataview_container"></div>
Initialize DataView with the dhx.DataView
object constructor. The constructor has two parameters:
index.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.
You can specify the following properties in the configuration object of DataView:
css | adds a CSS class(es) to the component |
data | specifies an array of data objects to set into the dataview |
dragCopy | defines that an item is copied to a target during drag-n-drop |
dragMode | enables drag-n-drop in DataView |
editable | enables editing in DataView |
eventHandlers | adds event handlers to HTML elements of a custom template of DataView items |
gap | sets margins for DataView items |
height | sets the height of Dataview |
itemHeight | sets the height of an item |
itemsInRow | specifies the number of data items in a row |
keyNavigation | enables/disables navigation in DataView by arrow keys |
multiselection | enables selection of multiple DataView items |
selection | enables selection of DataView items |
template | specifies a template for DataView items |
Finally, you are to load DataView with data. You can load inline or external data into DataView.
var dataview = new dhx.DataView("dataview_container",{
itemsInRow: 5
});
dataview.data.parse(data);
var dataview = new dhx.DataView("dataview_container",{
itemsInRow: 5
});
dataview.data.load("../common/dataset.json");
Related sample: Dataview. Basic Initialization
Back to top