DHTMLX Touch documentation

Grid

Grid is a component that allows to create various DHTML tables. Ui-related grid inherites from view.


Full code of the example in the picture

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

Parameters

In constructor you can specify the following parameters:

  • fields - specifies grid columns (in the grid will be as many columns as there are fields specified by this parameter)
    • id - (string) the identification name of the column. The mandatory parameter
    • label - (string) the header of the column
    • width - (width) the width of the column
    • template - (template) defines the data that will be presented in the column
    • sorting - (boolean) defines whether or not data can be sorted in the grid. The default value is 'true'
    • header - (boolean) defines whether or not header will be presented in the grid. The default value is 'true'
    • select - (boolean) defines whether or not selected row will be highlighted in the grid. The default value is 'true'
    • 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
    • datatype - (json, xml, csv, jsarray) specifies the type of the data
    • data - the source data for representation in the grid

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

dhx.ui({
	container:"grid_container",
	rows:[{
		id:"grid",
		view:"grid",
		select:"multiselect",
		fields:[
			{
				id:"id",
				width:40,
				sort:{
					as:"int"
				}
			},
			{
				id:"Package",
				width:350,
				label:"Package Name",
				template:"#Package# <span style='color:#919191'>#Version#</span>",
				type:"custom"
			},
			{
				id:"Maintainer",
				width:200
			}
		],
		datatype:"json", url:"data.json"
	}]
});

Related how-tos