In order to attach event to an html element rendered in org chart i finally
did the following and it works. Might be of help if someone is looking for
a similar approach.
BTW, all these happens when the ready event fires for the OrgChart.
I wrote a JSNI call to get hold of the specific html element by its id. The
below call will give a JavaScriptObject
private native JavaScriptObject getJSElement() /*-{
return $doc.getElementById("123");
}-*/;
Now make a GWT element out of this JavaScript Object and then attach event
listener to this GWT element. This actually does attach a listener to the
underlying html element.
JavaScriptObject jsObject = getPlusJSElement();
if (Element.is(jsObject))
{
com.google.gwt.dom.client.Element jsElement = Element.as(jsObject);
Event.setEventListener(jsElement, new EventListener() {
@Override
public void onBrowserEvent(Event event)
{
System.out.println("Mouse Click event on html Element 123 !!!");
}
});
Event.sinkEvents(jsElement, Event.ONCLICK);
}
On Tue, Oct 8, 2013 at 6:58 PM, SangR <[email protected]>wrote:
> I did exactly that: however i had to make the html element into a GWT
> widget before i can attach any event handler to it. This however does not
> seem to get invoked. Is this because the GWT element made out of the html
> element is not part of the DOM? If that is correct, is there a way to
> access the table behind the OrgChart to do just that, meaning set the
> widget in the appropriate row, column(<td> element in the table)? Any
> ideas?
> @Override
> public void onReady(ReadyEvent event)
> {
> Element imgElement = (Element)DOM.getElementById(<ImgElementID>);
> createImgEventhandler (imgElement);
> }
>
> private void createImgEventhandler (Element imageElement)
> {
> String imageHTML = imageElement.getInnerHTML();
> Button plusButton = new Button (imageHTML, new ClickHandler()
> {
> @Override
> public void onClick(ClickEvent event)
> {
> //Take some action
> }
> });
> }
>
> On Tuesday, October 8, 2013 6:00:12 PM UTC-4, asgallant wrote:
>>
>> I'm not sure how this would work in GWT, but using pseudo-code, you would
>> do something like this:
>>
>> attach "ready" event listener to OrgChart ->
>> when "ready" fires, search for <img> elements in OrgChart ->
>> attach "click" event handler to each <img> element
>>
>> On Tuesday, October 8, 2013 5:46:25 PM UTC-4, SangR wrote:
>>>
>>> Just wanted to highlight that i am using the GWT wrapper for
>>> Visualization API and that is where i am facing the problem of attaching
>>> handlers to the html elements.
>>>
>>> On Tuesday, October 8, 2013 3:58:45 PM UTC-4, SangR wrote:
>>>>
>>>> Hi,
>>>>
>>>> The GWT Visualization OrgChart has evolved with the described
>>>> "allowHtml" feature. I am using OrgChart using the GWT Visualization API
>>>> with the allowhtml set. Using this allowHtml option i am embedding a div
>>>> element with an image in a OrgChart node. Now, using GWT Visualization API,
>>>> is it possible to attach a click event handler for this image in the
>>>> OrgChart node? Basically, i am adding a bunch of images to each node in the
>>>> OrgChart and want the individual click handlers to be attached to them
>>>> which gets called to do some work. The only event now that gets fired is
>>>> the SelectEvent which only refers to the underlying table.
>>>> Please let me know if you need more details. Any information regarding
>>>> how to accomplish this is appreciated!
>>>>
>>>> Thanks!
>>>>
>>>> On Wednesday, June 4, 2008 3:49:53 AM UTC-4, VizGuy (Google) wrote:
>>>>>
>>>>> Mark, this is beautiful !
>>>>> The obfuscation is done to make the JS more compact and faster to
>>>>> load. I'll try and get an open-source version out as well. I will also
>>>>> check the option for providing a custom node renderer, which should
>>>>> make your solution less hackey.
>>>>>
>>>>> On Jun 4, 12:34 am, mark mclaren <[email protected]> wrote:
>>>>> > I have resorted to a very nasty hack in order to get the
>>>>> > Organizational Chart visualization component displaying HTML
>>>>> (although
>>>>> > not all HTML seems to work).
>>>>> >
>>>>> > http://mark.mclaren.**googlepages.com/**orgChartGoogle.html<http://mark.mclaren.googlepages.com/orgChartGoogle.html>
>>>>> >
>>>>> > Would it be possible to make the JavaScript source code for the
>>>>> > Visualization API components available without obfuscation? I think
>>>>> > developers of new visualizations would love to see how the masters
>>>>> do
>>>>> > it in plain code. Obfuscating the code means that people with
>>>>> > existing experience of say the Google Maps API are discouraged from
>>>>> > contributing.
>>>>> >
>>>>> > Mark
>>>>> >
>>>>> > On Jun 4, 8:24 am, "VizGuy (Google)" <[email protected]> wrote:
>>>>> >
>>>>> > > Currently there isn't. Thinking outloud how to address this: what
>>>>> if
>>>>> > > the control would allow you to set a renderer that is called with
>>>>> a
>>>>> > > row number, and draws (returns an HTML string)the inner part of
>>>>> the
>>>>> > > element? Will that work for what you need ?
>>>>> >
>>>>> > > On Jun 3, 8:02 am, Pete <[email protected]> wrote:
>>>>> >
>>>>> > > > Thanks for the quick reply.
>>>>> >
>>>>> > > > I'm assuming there is no way to extend that control or add to
>>>>> it?
>>>>> >
>>>>> > > > VizGuy (Google) wrote:
>>>>> > > > > Currently this is not possible. It could be a nice improvement
>>>>> to
>>>>> > > > > support HTML inside an orgchart box.
>>>>> >
>>>>> > > > > On Jun 2, 9:42 pm, Pete <[email protected]> wrote:
>>>>> > > > > > Hello,
>>>>> >
>>>>> > > > > > I was wondering if anyone has any tips for formatting text
>>>>> within an
>>>>> > > > > > org chart. For example, in a box I would like to have
>>>>> something like:
>>>>> > > > > > Position
>>>>> > > > > > Name
>>>>> > > > > > Phone
>>>>> > > > > > Email
>>>>> >
>>>>> > > > > > So I guess a good place to start would be how to simply add
>>>>> a line
>>>>> > > > > > break. Any help is appreciated.
>>>>> >
>>>>> > > > > > Thank you.
>>>>
>>>> --
> You received this message because you are subscribed to a topic in the
> Google Groups "Google Visualization API" group.
> To unsubscribe from this topic, visit
> https://groups.google.com/d/topic/google-visualization-api/ueJnUiPQZS0/unsubscribe
> .
> To unsubscribe from this group and all its topics, send an email to
> [email protected].
> To post to this group, send email to
> [email protected].
> Visit this group at
> http://groups.google.com/group/google-visualization-api.
> For more options, visit https://groups.google.com/groups/opt_out.
>
--
You received this message because you are subscribed to the Google Groups
"Google Visualization API" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to [email protected].
To post to this group, send email to [email protected].
Visit this group at http://groups.google.com/group/google-visualization-api.
For more options, visit https://groups.google.com/groups/opt_out.
