DHTMLX Docs & Samples Explorer

Index
dhtmlxdataview

## PropertySheet

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

### Initialization

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: