DHTMLX Docs & Samples Explorer

Property Grid Extension

Property grid extension is easy-to-use tool which allows you to customize your dhtmlx grid as you want. Visually property grid extension consists of two columns, the first one contains a list of defined parameters, the second one - their values.

Property Grid Extension Initialization

To build in this component into your dhtmlx grid you should carry out several easy actions, as follow:

  • include necessary js|css files
    	<link rel="STYLESHEET" type="text/css" href="dhtmlxgrid.css">
	<link rel="STYLESHEET" type="text/css" href="dhtmlxtreegrid_property.css">
	<script  src="dhtmlxcommon.js"></script>
	<script  src="dhtmlxgrid.js"></script>
	<script  src="dhtmlxgridcell.js"></script>
	<script  src="dhtmlxtreegrid.js"></script>
	<script  src="dhtmlxtreegrid_property.js"></script>
  • init PropertyGrid object ( similar to normal grid )
	mygrid = new dhtmlXPropertyGrid('grid_here');

Data Format

XML format is similar to one of treegrid

      <row> \\ row's id is optional
      <cell>Name</cell> \\ visualizes the cell's name

Values Adjustment

The following types of values adjustment are available in property grid extension:

  • Text editor.
		<cell type='ed'>Test value</cell>
  • Text editor with validation

		<cell type='ed' validate="int"></cell>

In the code string above you should indicate valid integer value.

  • Values list selector.

		<cell type='list' values="dotted,dashed,solid"></cell>
  • Color picker.

		<cell type='cp'></cell>


Property grid extension shipped a new event in dhtmlx grid.

The onPropertyChanged event - occurs when the user performs any modifications in property grid extension.

  • parameter name;
  • new value;
  • old value.


The grid.getProperties() method returns the current value of each parameter.

The grid.setProperties() method visualizes in UI values specified within the code.

Setting Properties

			BorderColor:"red"		});