Grouplist

Grouplist is a component that presents a list of the data grouped by some category. Ui-related grouplist inherits from view.

It's similar to list 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:"grouplist", 
...})

Supported data types

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
  • select - (boolean) defines whether a data item can be selected (the default value is false).
  • 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 grouplist 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 data presentation in the list.
    • templateItem (template) an html template that defines data that will be presented in the list.
    • templateGroup (template) an html template that defines data that will be presented in the group header in the collapsed state.
    • templateBack (template) an html template that defines data that will be presented in the group header in the expanded state.
    • width (integer) the width of the items list.
    • height (integer) the height of the item' row in the list.

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

dhx.ui({ 
        view:"grouplist", 
	id:"mylist", url:"books_tree.xml", datatype:"xml",
	type:{
		templateItem:"#title# (#author#)",
	        templateGroup:"#title#",
		templateBack:"#title#",
	},
	width: 500
});

Related how-tos