To add data items into List use the add method:
myList.add({
id:"some id",
property:"some value"
});
If "id" isn't defined, it will be autogenerated.
Related sample: Add/delete data on runtime
The remove method will help you to delete a data item from List:
myList.remove("some id");
//or
myList.remove(["idA","idB","idC","idD"]);
Related sample: Add/delete data on runtime
To enable the item's editing ability, the following steps need to be completed:
myList = new dhtmlXList({
container:"data_container",
edit:true,
type:{
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:
myList.edit(id);
myList.stopEdit();
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({
container:"some_html",
select:"multiselect"
});
...
myList.define("select",true);
Possible values of the "select" parameter:
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:
myList.select(id);
myList.unselect(id);
myList.selectAll();
myList.unselectAll();
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
myList.select(id,true); // the same as Ctrl-click
// select all the items from the previously selected till the current one
myList.select(id,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).
myList.show(id);
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
myList.sort("#Maintainer#","asc");
// the same but in the descending order
myList.sort("#Maintainer#","desc");
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;
},"asc");
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:
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
myList.filter("#Maintainer#","Alex");
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:
myList.filter(function(obj){
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.
Back to top