Start Building Professional
Web Apps Today


 
Categories Question details Back To List
Question  posted by Peter on Feb 11, 2009 07:57
open dhtmlx forum
dhtmlxLayout - Interact with dhtmlxTree

I would like to post some simple data onto a layout cell from an attached xTree in another layout cell. I'm using "3L" cells layout and would like to display the data in 1 of the layout cell whenever I clcik on a tree item. I have already coded the getting of <userdata> from xml thru my xTree. How would I go about doing the display part?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CTL AutoIT Test Report</title>
<link rel="stylesheet" type="text/css" href="codebase/dhtmlx.css">
<script src="codebase/dhtmlx.js"></script>
</head>
<body style="width:100%; height:100%; margin:0px; overflow:hidden;">

<div id="parentId" style="position:absolute; width:800px; height:400px;"></div>

<script>
    //Define DHX object
    var dhxLayout = new dhtmlXLayoutObject("parentId", "3L");
    var dhxTree = dhxLayout.cells("a").attachTree();
    
    //Layout Configurations
    dhxLayout.cells("a").setText("Test Message");
    dhxLayout.cells("b").setText("Test Remarks");
    dhxLayout.cells("c").setText("Test Pictures");
    dhxLayout.cells("c").collapse();
    
    //Tree Configurations
    dhxTree.setImagePath("codebase/imgs/");
    dhxTree.enableCheckBoxes(false);
    dhxTree.enableDragAndDrop(false);
    dhxTree.loadXML("example.xml");
    dhxTree.openAllItems(0);
    dhxTree.attachEvent("onClick",onNodeSelect);

    function onNodeSelect(nodeId){
        alert(dhxTree.getUserData(nodeId, "datetime"))
        alert(dhxTree.getUserData(nodeId, "type"))
        alert(dhxTree.getUserData(nodeId, "remarks"))
    }
</script>
</body>
</html>
Answer posted by Alex (support) on Feb 11, 2009 08:49

Layout provides the attachObject method. It allows to attach html object to layout cell.

The sample is dhtmlxLayout/samples/conf/attach_object.html ( http://dhtmlx.com/docs/products/dhtmlxLayout/samples/conf/attach_object.html )

You can attach the common container to the necessary cell, and then add new elements into this container.

Answer posted by Peter on Feb 11, 2009 17:08
I have read about the cells(b).attachObj(Obj), but how may I dynamically update the target cell with the correct <userdata> whenever I clcik on a xTree item?
Answer posted by Alex (support) on Feb 12, 2009 00:55

There can be different ways. For example, one of them is:

dhxLayout.cells("b").attachObject("objId");

dhxTree.attachEvent("onClick",onNodeSelect); 

function onNodeSelect(nodeId){ 
 document.getElementById("objId").innerHTML = "datetime="+dhxTree.getUserData(nodeId, "datetime")) ;
}