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

index.html

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

Related sample:  List. Basic Initialization

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:

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 List
editable enables editing in List
height sets the height of List
itemHeight sets the height of a List item
keyNavigation enables/disables navigation in List by arrow keys
multiselection enables selection of multiple List items
selection enables selection of a List item
template specifies a template for List items
virtual enables dynamic rendering of List items

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

Back to top