Skip to main content

Initialization

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

<!DOCTYPE html>
<html>
<head>
<title>How to Start with dhtmlxList</title>
<script type="text/javascript" src="../../codebase/suite.js"></script>
<link rel="stylesheet" href="../../codebase/suite.css">
</head>
<body>
<div id="list_container"></div>
<script>
// creating dhtmlxList
var list = new dhx.List("list_container", {
itemHeight: 30
});
</script>
</body>
</html>

Related sample: List. Initialization with data.parse()

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
<script type="text/javascript" src="../../codebase/suite.js"></script>
<link rel="stylesheet" href="../../codebase/suite.css">

Create a container

Add a container for List and give it an id, for example "list_container":

index.html
<div id="list_container"></div>

Initialize List

Initialize List with the dhx.List object constructor. The constructor has two parameters:

  • the HTML container for List,
  • optional, an object with configuration properties. If this argument is not passed to the constructor, the settings will be default.
script.js
// creating dhtmlxList
var list = new dhx.List("list_container", {
itemHeight:30
});

Related sample: List. Initialization with data.parse()

Configuration properties

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

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

Load data into List

Finally, you are to load the list with data. You can load inline or external data into the list.

  • to load data from a local source, use the parse() method of the Data Collection object:
var list = new dhx.List("list_container", {
itemHeight:30
});

list.data.parse(data);

Related sample: List. Initialization with data.parse()

  • to load data from an external file, use the load() method of the Data Collection object:
var list = new dhx.List("list_container", {
itemHeight:30
});

list.data.load("../common/dataset.json");

Related sample: List. Initialization with data.load()

info

To display data in List you should define a template via the template configuration property.

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