Bubbling Events

[Neil Conway]

I have been using the HTMLUI control for some months now and wanted to share something that might shed some light on the use of the control to handle bubbling events.

I opened up the sample "Bubling events" (they misspelled it not me ;-) in order to discover the nature of picking up events on an HTML page. I began to add nested elements to their example such as this:

I am using brackets instead of the normal html in order to prevent the forum from parsing the html that I wrote.

[td colspan="5" id="Label3"][FONT face="Arial" color="darkred" size="5"]  [U]Click here to do something interesting[/U][/FONT][/td]

Then I added code to their example to respond to events:

switch(elem.ID)
{
case "Label3":
{
//Make some sort of messagebox here
break;
}
}

The code did not respond to the events.

After some trial and error, I moved the "id" to the lowest element as follows:

[td colspan="5"][FONT face="Arial" color="darkred" size="5"]  [U id="Label3"]Click here to do something interesting[/U][/FONT][/td]

This code worked. So, I discovered that you must put an "id" at the lowest level possible in an element in order to get it to respond.

By the way this htmlui control has been fantastic to use and has saved me all kinds of time in my program. Keep up the good work, Syncfusion!

Regards,
Neil Conway

[Nandakumar R]

Hi Neil, The td element have not responded to the events because, as according to the given html code, the U element have filled the td element. On clicking inside the table cell, the U element became the root element to send the event. I have modified the given html code and used it in the sample attached. A small gap have been placed before the U element display inside the table cell by adding a ''style'' attribute to the td element as shown below, [HTML] ....... Also I have applied a different format for the U element to make it appear different in the HTMLUI control display. Now on clicking the blank space, a message box will be shown with the OuterHTML of the td element that sends the event. So, without the small gap, the U element seems to have filled the td element. And on clicking the td element, it is the U element that became the root element sending the event. Please let me know if this helps. Regards, Nanda.

42585_BubblingEvents.zip

[Nandakumar R]

Hi Neil, Sorry for the errors in previous post. I have once again posted the reply. The td element have not responded to the events because, as according to the given html code, the U element has filled the td element. On clicking inside the table cell, the U element became the root element to send the event. I have modified the given html code and used it in the sample attached. A small gap have been placed before the U element display inside the table cell by adding a ''style'' attribute to the td element as shown below, [HTML] ....... Also I have applied a different format for the U element to make it appear different in the HTMLUI control display. Now on clicking the blank space, a message box will be shown with the OuterHTML of the td element that sends the event. So, without the small gap, the U element seems to have filled the td element. And on clicking the td element, it is the U element that became the root element sending the event. BubblingEvents.zip Please let me know if this helps. Regards, Nanda.

[Neil Conway]

Hi Nanda, Thank you for responding. I think we arrived at the same conclusion. Regards, Neil >Hi Neil, > >Sorry for the errors in previous post. I have once again posted the reply. > >The td element have not responded to the events because, as according to the given html code, the U element has filled the td element. On clicking inside the table cell, the U element became the root element to send the event. > >I have modified the given html code and used it in the sample attached. > >A small gap have been placed before the U element display inside the table cell by adding a ''style'' attribute to the td element as shown below, > >[HTML] >....... > >Also I have applied a different format for the U element to make it appear different in the HTMLUI control display. > >Now on clicking the blank space, a message box will be shown with the OuterHTML of the td element that sends the event. > >So, without the small gap, the U element seems to have filled the td element. And on clicking the td element, it is the U element that became the root element sending the event. > >BubblingEvents.zip > >Please let me know if this helps. > >Regards, >Nanda.