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

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
});

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 - (string) adds a CSS class(es) to the component
  • 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
  • dragMode - (string) enables drag-n-drop in List
  • editable - (boolean) enables editing in List
  • height - (number|string) sets the height of List
  • itemHeight - (number|string) sets the height of a List item
  • keyNavigation - (function|boolean) enables/disables navigation in List by arrow keys
  • multiselection - (boolean) enables selection of multiple List items
  • selection - (boolean) enables selection of a List item
  • template - (function) specifies a template for List items
  • virtual - (boolean) 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);
  • 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