Re: Links / Buttons in orgChart node

[asgallant]

Hmmm....this is an odd one.  It seems to work sometimes, depending on what is actually done inside the event handler.  I'm not quite sure how the API implements event listeners, but they seem to violate everything I know about event bubbling/capturing (admittedly, I'm not an expert on the js event model, though).  The 'select' event seems to fire before all other events, even when I set a capturing event on the container div (which, according to typical event logic, should always fire before any events on elements inside the container).  It also fires before bubbling events placed on elements inside the chart element.  Neither of these cases makes sense.

On Thursday, August 16, 2012 8:34:12 AM UTC-4, Michael Friderichsen wrote:

Hi, i'm having some trouble adding hyper-links or buttons to orgChart nodes: here is what i do:

google.load('visualization', '1', {packages:['orgchart']});

google.setOnLoadCallback(drawChart);

function drawChart() {

    chart = new google.visualization.OrgChart(document.getElementById('chart_div'));

    data = new google.visualization.DataTable();

    data.addColumn('string', 'Name');

    data.addColumn('string', 'Manager');

    data.addColumn('string', 'tip');

    data.addColumn('boolean', 'expanded');

    data.addRow([{v:'cn=Faaborg-Midtfyn Kommune,ou=depts,ou=structures,o=dk', f:'Faaborg-Midtfyn Kommune'},'','', true]);

    

 

    data.addRows([[{v:Mark, f:'<div>Mark</div><div><a href="info.html">Info</a></div>'}, '', '', false], [{v:'John', f:'<div>John</div><div><a href="info.htm">Info</a></div>'}, 'Mark', '', false]]);    

    chart.draw(data, {allowHtml:true,allowCollapse:false,size:'medium'});

    google.visualization.events.addListener(chart, 'select', selectHandler);            

}

With the above code, i can click the nodes which calls the selectHandler() function, but i can't click the hyper-link on the nodes, it triggers the underlaying selectHandler().

Is it possible til have links or buttons in the content of the nodes and be able to cllick on them?

/ Michael.

[Michael Friderichsen]

Den torsdag den 16. august 2012 14.34.12 UTC+2 skrev Michael Friderichsen:
> Hi, i'm having some trouble adding hyper-links or buttons to orgChart nodes: here is what i do:
>
>
>
> google.load('visualization', '1', {packages:['orgchart']});
> google.setOnLoadCallback(drawChart);
>
>
>
> function drawChart() {
>
>
>     chart = new google.visualization.OrgChart(document.getElementById('chart_div'));
>     data = new google.visualization.DataTable();
>
>
>     data.addColumn('string', 'Name');
>     data.addColumn('string', 'Manager');
>     data.addColumn('string', 'tip');
>     data.addColumn('boolean', 'expanded');
>     data.addRow([{v:'cn=Faaborg-Midtfyn Kommune,ou=depts,ou=structures,o=dk', f:'Faaborg-Midtfyn Kommune'},'','', true]);
>     
>  
>     data.addRows([[{v:Mark, f:'<div>Mark</div><div><a href="info.html">Info</a></div>'}, '', '', false], [{v:'John', f:'<div>John</div><div><a href="info.htm">Info</a></div>'}, 'Mark', '', false]]);    
>     chart.draw(data, {allowHtml:true,allowCollapse:false,size:'medium'});
>
>
>     google.visualization.events.addListener(chart, 'select', selectHandler);            
> }
>
>
> With the above code, i can click the nodes which calls the selectHandler() function, but i can't click the hyper-link on the nodes, it triggers the underlaying selectHandler().
> Is it possible til have links or buttons in the content of the nodes and be able to cllick on them?
>
>
> / Michael.

I found a solution. I just added mouseover and mouseout attributes to the hyper-link, and removed the select event on mouse over, and added it again on mouse out.