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 general 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 an 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
  • data - (string or object) defines loaded data
  • datatype - (xml, json, jsarray, csv) the type of the data file (configuration details)
  • template - (template) - an html template that defines which data will be presented in the list
  • select - (boolean or multiselect) defines whether a data item can be selected (the default value is false). multiselect enables multi-selection
  • scroll - (boolean) enables/disables scrolling within the component. The default value is false - scrolling is disabled
  • sort - defines sorting settings
    • by - (template) a template for the data property that the list is sorted by
    • as - (int, string or string_strict (case-sensitive “string”)) a build-in or custom sorting method
    • dir - (asc or dsc) the 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 class (list → View).

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

Supported Data Types

Follow one of the links to know details of the desired data type (configuration and usage example).

Related how-tos