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.

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');
	mygrid.setImagePath('../../../dhtmlxGrid/codebase/imgs/');
	mygrid.init();
	mygrid.load("property.xml");

XML format is similar to one of treegrid

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

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

• Text editor.

	<row>
		<cell>Name</cell>
		<cell type='ed'>Test value</cell>
	</row>

• Text editor with validation

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

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

• Values list selector.

	<row>
		<cell>BorderStyle</cell>
		<cell type='list' values="dotted,dashed,solid"></cell>
	</row>

• Color picker.

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

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.

        mygrid.setProperties({
			Name:"border",
			BorderSize:4,
			BorderStyle:"dashed",
			BorderColor:"red"		});