Dataview

Dataview is a component which allows to display a collection of objects according to some user-defined template. Ui-related dataview inherits from view.


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:"dataview", 
...})

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
  • template - (template) - an html template that defines which data will be presented in the list
  • scroll - (boolean) enables/disables scrolling within the component. The default value is false - scrolling is disabled
  • select - (boolean or multiselect) defines whether a data item can be selected (the default value is false). multiselect enables multi-selection
  • sort - defines sorting settings
    • by - (template) a template for the data property that the dataview 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 item presentation in the list
    • margin- (integer) defines the margin of the item
    • padding - (integer) defines the padding of the item
    • css - (string) the name of css class which will be used for item's styling (the default value - css class with the name 'default')

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

Work with Dataview

Related how-tos