Grid Click Event/Page Events

[chuckmParticipant]

Hi guys!

The jqxGrid click event doesn’t seem to be a click event at all but more a mousedown event. This is interfering with other events on the HTML page in that events do not take place in the proper order.

For instance, if you have an edit (INPUT) field on your HTML page with a “blur” event, and your cursor is in that edit (INPUT) field, and you click a row in the grid, the edit’s blur event should fire first, prior to the jqxGrid onRowclick event. However, this doesn’t happen. The grid’s onRowclick event fires prior to the blur event.

Looking at the standards for the mouse “click” event (from the W3C): https://www.w3.org/TR/uievents/#click

You’ll see this info:

• In addition to being associated with pointer devices, the click event type MUST be dispatched as part of an element activation, as described in § 3.5 Activation triggers and behavior.
• For maximum accessibility, content authors are encouraged to use the click event type when defining activation behavior for custom controls, rather than other pointing-device event types such as mousedown or mouseup, which are more device-specific.

And this as well:

The default action of the click event type varies based on the event target of the event and the value of the button or buttons attributes. Typical default actions of the click event type are as follows:

• If the event target has associated activation behavior, the default action MUST be to execute that activation behavior (see § 3.5 Activation triggers and behavior).
• If the event target is focusable, the default action MUST be to give that element document focus.

If one item is receiving focus, that means another has lost it. Logically, you’d expect the events to play out in that order.

Basic standards from the w3.org show the generic standards for expected events when using the mouse.
See “Event Type Notes” section here (scroll down a little): https://www.w3.org/TR/uievents/#events-mouseevent-event-order

Event Type Notes
1 mousedown
2 mousemove OPTIONAL, multiple events, some limits
3 mouseup
4 click
5 mousemove OPTIONAL, multiple events, some limits
6 mousedown
7 mousemove OPTIONAL, multiple events, some limits
8 mouseup
9 click
10 dblclick

A “click” event (or in this case, a rowClick event) should occur after a mousedown & mouseup.

Note that the buttons in the toolbar work just fine regarding order and click events (I suspect because they’re true buttons which follow the standards ).

I realize that it may not be possible for you to completely restructure your events in your grid, but would it be possible to add a rowClick event at the right place (after the mouseup)? The current rowClick is actually a mousedown.

Thank you!

[svetoslav_borislavovParticipant]

Hi,

Thank you for the report!
If you need something else, please let us know!

Best regards,
Svetoslav Borislavov

jQWidgets Team
https://www.jqwidgets.com/

[chuckmParticipant]

Well, I did ask a question above. Could you please answer the question? I’m not sure how many people understand this is an issue but it does cause problems for people using the grid and page events:

“I realize that it may not be possible for you to completely restructure your events in your grid, but would it be possible to add a rowClick event at the right place (after the mouseup)? The current rowClick is actually a mousedown.”

Either updating the events properly or at least giving an option to configure them would be incredibly helpful.
Thank you!

[svetoslav_borislavovParticipant]

Hi,

To make the blur event fire first, you can wrap the handler in a set timeout.
Here is an example: http://jsfiddle.net/qu9og8zx/

Best regards,
Svetoslav Borislavov

jQWidgets Team
https://www.jqwidgets.com/

[chuckmParticipant]

Hello!

Sorry to reply so late but my company was working on many things which kept me very busy!

The example above actually proves my point that things are in the wrong order and doesn’t really address the issue discussed. The events still happen in the wrong order, you’ve simply delayed the notification of the so-called “click” event to the user but the cell is already selected in the grid prior to the blur and so-called “click” event notification. Again, this IS the issue I’m referring to.

If the “blur” were actually happening prior to the “click” event, then the cell would not be highlighted before the “blur” and “click” events occur, but it is. This means that the actions ON THE GRID are happening PRIOR TO the “click” notification being sent to the developer. This is the opposite of what a true “click” event does.

A true “click” event notifies you that a click has occurred on an object PRIOR TO anything happening to the object clicked. This allows the developer to do anything they want, including preventing the click from performing any action (say, for example in this case, based on data validation of the data in the current row).

Since a “mouse-down” like event is being used in the grid, the actions on the grid are taking place FIRST (and shouldn’t). Therefore, there is no way to perform an activity on the current row prior to another row or another object from being selected. There is no way to short-circuit or prevent the results of the click event due to other page events.

To see this more clearly, simply change the setTimeout(handler) to setTimeout(handler, 3000), you’ll see that the user action takes place immediately (clicking a cell which is then IMMEDIATELY HIGHLIGHTED in the grid) but the user doesn’t get a notification of that event until 3 seconds later. You SHOULD get a “blur”, then a “click” event, and THEN the cell should be highlighted.

Thank you!

[adminKeymaster]

Hi chuckm,

Thank you for the detailed explanation. I got your point, but the jqxGrid selection is not based on a click event and it cannot be prevented by handling grid events.

Regards,
Peter

[Author]

Posts