Check documentation for the latest version of dhtmlxSuite Operating Items DHTMLX Docs

Operating Items

Adding Items

To add data items into List use the add method:

    id:"some id",
    property:"some value"

If "id" isn't defined, it will be autogenerated.

Related sample:  Add/delete data on runtime

Deleting Items

The remove method will help you to delete a data item from List:

myList.remove("some id");

Related sample:  Add/delete data on runtime

Editing Items

To enable the item's editing ability, the following steps need to be completed:

  1. the edit mode enabled
  2. the edit template defined
myList = new dhtmlXList({
        template:"#Package# : #Version#<br/>#Maintainer#",
        template_edit:"<input class='dhx_item_editor' bind='obj.Package'>"

The edit template works the same as the normal one plus the tags inside of it can have the bind attribute.

It means that during the switching to the edit state, a component will put the related properties into the inputs and on the edit-end command the properties will be filled from the inputs, respectively.

The editing process is triggered by dbl-click by default.

You can switch a cell to manual editing using the code below:


Related sample:  Edit item


A component is initialized in the multiselect mode by default. It can be controlled either by using the parameter of constructor or by JS API.

In the first case, use the code below:

var myList = new dhtmlXList({

Possible values of the "select" parameter:

  • false - disable selection;
  • true - enable selection ( single selection );
  • "multiselect" - enable multi-selection.

Single item can be selected by clicking on it.

Multiple items can be selected by using Ctrl and Shift keys while clicking on items.

To select an item by API the following commands can be used:;
var boolean= myList.isSelected(id);
var id = myList.getSelected();

Calling the select or unselect methods without parameter is equal to calling selectAll or unselectAll, respectively.

The getSelected method returns the ID of the selected item in the single selection mode. In multiselection mode if more than one element selected the method will return an array of IDs.

During the selection of items (by user or by API) the following events are generated:

In case of single selection all 3 events are generated. If multiselection is enabled and Ctrl-click or Shift-click occurs, only the onSelectChange event will be generated.

In multiselect mode the select command can use additional parameters:

// select in addition to existing ones,true); // the same as Ctrl-click
// select all the items from the previously selected till the current one,false,true); // same as Shift-click

Beware that the select method changes the selection only and doesn't affect the items' visibility. So you will need to use the show method to ensure that an item is visible (scrolled into the visible part of list).;

Related sample:  Select items


Items can be sorted by any properties. The values in List are sorted as case-insensitive strings by default.

// sort all data by the Maintainer property in the ascending order
// the same but in the descending order

If you need a custom sorting rule, you can define your own sorter-function:

myList.sort(function(objA, objB){
    // objA and objB - are the objects which need to be compared
    return objA.some_value > objB.some_value?1:-1;

A custom sorting method accepts two objects and must return 1 if the first object is greater than second one, or -1 otherwise.

The values of the direction parameter:

  • "asc" - ascending order, case-insensitive;
  • any other value - descending order.

Related sample:  Sort items


A dataset can be filtered by one of the multiple parameters. To apply a simple one-parameter filtering, you can use the code similar to the following one:

// will show the object where the string "Alex" exists in the Maintainer's name
// filtering is case-insensitive by default

If you need to apply a more complex filtering, it can be implemented by means of providing the filtering method filter as the first parameter:

    if (obj.valueA > 10 && obj.valueB < 100) return true;
    return false;

The filtering method receives the object and the filtering value (if it was provided as a part of the filter() command). The result of the method must be true if the object needs to be shown and false otherwise.

Related sample:  Filter items

Back to top