Node with clickable URL

Suite and Optimus Suite 5
#1

My questions:

  1. I would like to have nodes (with URL attach to it) and whenever user click on the node, open the URL in the cell “c”, How do I do that?

  2. Do I need frame in cell “c”?

  3. If frame needed, how do I create frame in cell “c”?

Below is my screenshot, codes and xml

800×532 8.97 KB

My code

<script src="dhtmlx/dhtmlxLayout/codebase/dhtmlxcommon.js"></script>
<script src="dhtmlx/dhtmlxLayout/codebase/dhtmlxlayout.js"></script>
<script src="dhtmlx/dhtmlxLayout/codebase/dhtmlxcontainer.js"></script>
<link rel="stylesheet" type="text/css" href="dhtmlx/dhtmlxLayout/codebase/skins/dhtmlxlayout.css">
<link rel="stylesheet" type="text/css" href="dhtmlx/dhtmlxLayout/codebase/skins/dhtmlxlayout_dhx_skyblue.css">

<script src="dhtmlx/dhtmlxAccordion/codebase/dhtmlxaccordion.js"></script>
<link rel="stylesheet" type="text/css" href="dhtmlx/dhtmlxAccordion/codebase/skins/dhtmlxaccordion_dhx_skyblue.css">

<script src="dhtmlx/dhtmlxTree/codebase/dhtmlxtree.js"></script>
<link rel="stylesheet" type="text/css" href="dhtmlx/dhtmlxTree/codebase/dhtmlxtree.css">

  <style>
        html, body {
                  width: 100%;
                  height: 100%;
                  margin: 0px;
                  overflow: hidden;
          }
  </style>
------------------------------------------

My XML

<?xml version='1.0' encoding='iso-8859-1'?> <![CDATA[History]]> 
	<item id="geography">
	<itemtext><![CDATA[<a href='http://www.yahoo.com'>Geography</a>]]></itemtext>
	</item>
</item>
------------------------------------------
#2

In my opinion it would be better to use userdata for links. You may define userdata in the xml and set onClick event handler that will load the defined pages into a layout cell:

<?xml version='1.0' encoding='iso-8859-1'?>
<tree id="0">
    <item text="Syllabus" id="books" open="1" call="1" select="1">
         <item id="history" text="History">
             <userdata name="url"><![CDATA[google.com]]></userdata >
         </item>
         <item id="geography" text="Geography">
             <userdata name="url"><![CDATA[yahoo.com]]></userdata >
         </item>
     </item>
</tree>
tree.attachEvent("onClick",function(id){
    var url = this.getUserData(id,"url");
    if(url)
        dhxAccord.cells("b1").attachURL(url);
});
#3

Hi Alexandra.
In your example, you assign the URL to cell b1. This is not what I’m looking for, so I have modify your code as per below. My objective here is to display the URL output in cell “c”

tree.attachEvent(“onClick”,function(id){
var url = this.getUserData(id,“url”);
if(url)
dhxLayout.cells(“c”).attachURL(url);
});

However when i click the node, an error message appears. Here the screenshot.

800×532 8.97 KB

#4

I got it right already, mistakenly code this line twice

tree.attachEvent(“onClick”,function(id){

Thanks Alexandra