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. 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
<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 dhtmlxListvar list = new dhx.List("list_container", {    itemHeight:30});

Related sample: List. Basic Initialization

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. Parse Data

  • 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. Load Data