dhtmlXPropertySheet is a component which displays or provides ability to edit values of object properties.

To initialize propertysheet, you need to

1. include related js and css files
2. place container for the propertysheet on a page
3. run propertysheet initialiation

There are two files that need to be included

<script src="../../codebase/dhtmlx.js" type="text/javascript"></script>
<link rel="STYLESHEET" type="text/css" href="../../codebase/dhtmlx.css">

PropertySheet is initialized in HTML container:

    <<div id="property_container" style="width:600px;height:400px"></div>

To initialize PropertySheet you need to set only two “container” and “name_width” property:

    var psheet =  new dhtmlXPropertySheet({
	container:"property_container",
	name_width:150
    });

Elements of the dhtmlXPropertySheet constructor:

• container - the id of HTML container for the component;
• name_width - width of the first column, the column with names

DataMap supports the same methods for data loading as DataView:

   map.load("properties.json","json");

Each property consits of 4 elements:

• id - property id;
• type - property type: label,text,select or checkbox;
• name - property name (properties with “label” type don't need it);
• value - property value

The example of JSON data:

[{"id":"1", "type":"label", "value":"Audi A6"},
{"id":"2", "name":"Color", "type":"text", "value":"Grey metallic"},
{"id":"3", "name":"Fuel type", "type":"select", "value":"3", "options":{"1":"Diesel","2":"Gas","3":"Pertol"}},
{"id":"4", "name":"Automatic gearbox", "type":"checkbox", "value":"1"}},
{"id":"5", "name":"Price", "type":"text", "value":"29000 EUR"}]

Here is the result: