Configuration

Height of an item

By default the height of a List item is 34. You can specify the necessary height of an item and set it before initialization of List via the itemHeight property either as a number:

// sets the height of an item as a number
var list = new dhx.List("list_container", { 
    itemHeight:30 });

or as a string value

// sets the height of an item as a string value
var list = new dhx.List("list_container", { 
    itemHeight:"30px" });

The usage of the CSS calc() function within the itemHeight property is not possible.

Height of the List

You can define the desired height of a list via the height configuration option as easy as that:

var list = new dhx.List("list", {height: 700});

You can also use a string value for setting the height of List:

var list = new dhx.List("list", {height: "700px"});

The usage of the CSS calc() function within the height property is not possible.

Dynamic rendering of items

All data is loaded into List and rendered at once. In case you use large amounts of data in the list, it may slow down the work of your app.

There is a possibility to increase the speed of your application containing a List by enabling dynamic data rendering. It presupposes that data is rendered by parts and on demand. To make use of dynamic data rendering, switch the virtual property on.

var list = new dhx.List("list_container", { 
    virtual:true
});

Drag-n-drop of items

dhtmlxList supports drag-n-drop of items between lists in several modes. To begin with, you should specify the dragMode property in the configuration object of List. Then define which mode you need:

"target" - a list takes items from other lists, while its items can't be dragged out of it
"source" - a list allows dragging its items out and can't take items from other lists
"both" - a list both takes items from other lists and allows dragging its items out as well

var list = new dhx.List("list_container", { 
    dragMode:"source"
});

In order to provide the possiblity of dragging several items between lists, you should enable the Configuration in addition to the dragMode:

var list = new dhx.List("list_container", { 
    dragMode:"source",
    multiselection:true
});

Read more about multiselection in List below.

Template for List items

You can define a template for rendering items in a List with the help of the template configuration property. Set as its value a function that takes one parameter:

item - (object) an object of a data item

var list = new dhx.List("list", {
    template: function(item) {
        return "<strong>!!!</strong>" + item.value;
    }
});

Arrow keys navigation

The List component provides the possibility to navigate its items with arrow keys. You can enable this functionality using the keyNavigation property:

var list = new dhx.List("list", {keyNavigation:true});

As a value of this option you can use either true/false to switch it on/off, or specify a function that will define some custom navigation logic.

Editing items

You can enable the possibility to edit List items with the help of the editing configuration option:

var list = new dhx.List("list_container", {editing:true});

Multiple selection of items

By default, you can select only one item in a list, since selection of another item resets selection of the previous one. To enable the possbility to select several List items, make use of the Configuration configuration option:

var list = new dhx.List("list", {multiselection:true});

Multiselection modes

The default functionality presupposes multiple selection of items in a list using the "Ctrl+click" combination. It is also possible to use simple clicks to select several items. For this, you need to enable the corresponding mode via the multiselectionMode configuration option:

var list = new dhx.List("list", {
    multiselection:true,
    multiselectionMode:"click"   
});