DHTMLX Touch documentation

List

List is a component that presents a normal list of the data items. Ui-related list inherits from view.

It's similar to grouplist component. The difference between them is data presentation. grouplist presents data in groups while list presents a full list of items.


Full code of the example in the picture (including xml structure)

Initialization

To init the component you need to perform a simple procedure - call initialization code.

Initialization code or an object constructor, lets you create object by using common declaration.

dhx.ui ({view:"list", 
...})

Parameters

In constructor you can specify the following parameters:

  • url - (URL) the path to the desired data file
  • datatype - (xml, json, jsarray, csv) the type of the data file
  • template - (template) - an html template that will define which data will be presented in the list
  • select - (boolean)defines whether a data item can be selected (the default value is false)
  • sort - defines sorting settings
    • by - (template) a template for the data that the column is sorted
    • as - (int, string or string_strict) a sorting method (case-sensitive “string”) or custom
    • dir - (asc or dsc)a sorting direction
  • type - specifies items list presentation
    • width (integer) the width of the items list
    • height (integer) the height of the item' row in the list
    • template (template) an html template that will define an item presentation in the list

Please note, list is a derived class, i.e. it inherits all the features of the base classes (list → View).

dhx.ui({
            container:"list_container",
            view:"list", 
	    id:"mylist", 
            url:"books.xml", 
            datatype:"xml",
            template:"#title# (#author#)",
            select:true, 
            type: { width: 500 }
});

Related how-tos