<link rel="STYLESHEET" type="text/css" href="../../../dhtmlxGrid/codebase/dhtmlxgrid.css">
<link rel="stylesheet" type="text/css" href="../../../dhtmlxGrid/codebase/skins/dhtmlxgrid_dhx_skyblue.css">
    <link rel="STYLESHEET" type="text/css" href="../../codebase/ext/dhtmlxtreegrid_property.css">
<script  src="../../../dhtmlxGrid/codebase/dhtmlxcommon.js"></script>
<script  src="../../../dhtmlxGrid/codebase/dhtmlxgrid.js"></script>
<script  src="../../../dhtmlxGrid/codebase/dhtmlxgridcell.js"></script>
<script  src="../../codebase/dhtmlxtreegrid.js"></script>
<script  src="../../codebase/ext/dhtmlxtreegrid_property.js"></script>
 
<script type="text/javascript" charset="utf-8">
function render_test(){
    var data=mygrid.getProperties();
    var html="<div style='cursor:"+data.Cursor+";border-width:"+data.BorderSize+"px; border-color:"+data.BorderColor+"; border-style:"+data.BorderStyle+";'><h2>"+data.Name+"</h2><textarea>"+data.Description+"</textarea><div>";
    document.getElementById('test_here').innerHTML=html;
}
function init(){
    mygrid = new dhtmlXPropertyGrid('grid_here');
    mygrid.setImagePath('../../../dhtmlxGrid/codebase/imgs/');
    mygrid.init();
    mygrid.loadXML("../common/property.xml",function(){
        mygrid.attachEvent("onPropertyChanged",function(){
            render_test();
        })
        render_test();
        mygrid.enableAutoHeight(true);
        mygrid.setSizes();
    });
}                
function set1(){
    mygrid.setProperties({
        Name:"border",
        BorderSize:4,
        BorderStyle:"dashed",
        BorderColor:"red"
    });
}
function set2(){    
    mygrid.setProperties({
        Name:"border-less",
        BorderSize:0,
        Description:"some text"
    });
}
</script>
 
<div id="grid_here" style="height:400px; width:250px; ">
</div>
<div id="test_here">
</div>
<div id="set_here">
    <input type="button" name="some_name" value="set 1" onclick="set1()">
    <input type="button" name="some_name" value="set 2" onclick="set2()">
</div>