cancelBubble blocks custom click event handlers

Is there a reason that dhtmlxgrid’s base code uses cancelBubble and blocks cascading click events? This essentially is blocking our company’s ability to replace our existing system because we have custom functionality that relies on this.

Right now the only alternative I see is to modify the dhtmlxgrid.js file directly which we want to avoid so that future updates are easy and less painful. Another concern I have is why the heck is there not an unminified version of the javascript source? Seems like a product that people pay to deploy to their own sites could be better about the accessibility of the source code.

Finally not to be too big of a nit picker but who names variables with just one letter? I hope that’s being done by some obfuscation script.

Looking deeper into the issue I can say exactly what is going on.

dhtmlxgrid blocks the click events from bubbling upwards. In other words any click events that are triggered on the grid and handled by the built in dhtmlxgrid triggers (for instance the edit cell handler) will block it from being triggered higher up like on the body.

So any click events that are triggered outside the grid itself are fine and bubble as expected. I can also created traditional onclick handlers with my own children DOM objects. The issue is that I can’t add any HTML or DOM elements within the the grid div and then handle events via jQuery since jQuery is built to capture them at the document level.

Very frustrating that there isn’t better compatibility with jQuery in this respect but I assume there is a reason that the bubbling is blocked by dhtmlxgrid. I’m just not sure what that reason is.

I think the main reason is to compatibility with IE8…

Hello,

dhtmlxGrid blocks events bubbling because of it should respond differently on internal and external events.

Cancelling events bubbling in the grid doesn’t lead to the problem with jquery. Also you can use dhtmlxGrid events to catch necessary user actions. Please check docs.dhtmlx.com/doku.php?id=dhtmlxgrid:events

I would also like to see this changed. When injecting custom content into cells, it would help to be able to delegate event listeners to the grid container for performance reasons rather than having to add event listeners to injected content in each individual row. The bubble canceling prevents us from delegating events though.

Unfortunately we’re not planning to change the designed behavior, but your opinion will be considered by the developers.

Hi all,

I have a dhtmlxCalendar and a dhtmlxGrid on the same page, the problem is that when a calendar is open and i click on the grid, the calendar doesn’t hides. (It does everywhere else)

After searching a bit, i think that it’s becuse of the grid cancelBubble:

this.objBox.onclick=function(e){ (e||event).cancelBubble=true; };

So, what would be the best way to solve this issue?

Thanks!! :slight_smile:

This is a valid solution and can be used in your case.

Sorry, I may not have explained well.
The problem is this cancelBubble.

I want the calendar hides when I click anywhere (on the Grid too) and it doesn’t hide because of that cancelBubble.

Of course I dont want to change the dhtmlxGrid code, so I was asking what would be the best solution.

Thanks.

No solution? :frowning:

I apologize for the delay.
Unfortunately there is no solution for all the browsers.
There is a fix but it is compatible only with the latest browsers (IE9 and older are not supported).

What is that fix?
It is not a critical point in my application, so it may be ok if it only works for IE9+ .

Please, try to include the following attached fix to your page.
patch.zip (388 Bytes)