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>

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":

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

list.html

// creating dhtmlxList
var list = new dhx.List("list_container", {
    itemHeight:30
});

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

Configuration properties

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

  • dragMode - (string) enables drag-n-drop in List
  • template - (function) specifies a template for List items
  • virtual - (boolean) enables dynamic rendering of List items
  • itemHeight - (number) sets the height of a List item
  • css - (string) adds a CSS class(es) to the component
  • height - (number) sets the height of List
  • arrowNavigation - (function|boolean) enables/disables navigation in List 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 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);
  • 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");
Back to top