Differentiate between selection events initiated by user vs code

[gradualstudentMember]

Trying to coordinate selection between the jqxTree and another user widget, each of widget allows the user to select an element. For now it’s a simple click once to select, click again to deselect, or click another item to select that.

If the user clicks the jqxTree, it triggers a ‘select’ event, which allows the app to select (or deselect) the associated object. Great.

But if the user clicks the other widget, the app calls

$(“jqxTree”).jqxTree(‘selectItem’, selectedTreeElement)

which works fine .. **but** that causes the jqxTree to trigger a “select” event for that item. Which causes the other widget to think the user clicked on the element to de-select it.

In Backbone.js, there is an optional “silent” argument we can pass, e.g. {silent: true}, to prevent an object from triggering the change the code is causing.

Is there an analog in jqxTree? Or perhaps another way to differentiate primary changes caused by the user, vs secondary changes in response to the user?

[Peter StoevKeymaster]

Hi gradualstudent,

In jQuery, you have, event.stopPropagation. You can also return false in the event handler. This should prevent an event from bubbling.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[Alastair WalkerParticipant]

Hello – Peter, I have a similar problem. I have two trees linked by a grid row. When, say, the left tree is used to select a grid row, and the right tree is then selected to show the linked child row, the
jQuery(selector).jqxTree(‘selectItem’,item.element) action then triggers an event, which then interfers with the selection of selection of the left tree row.
I understand that event.stopPropagation is to be used to inhibit the action of the right tree row selection, but it is unclear to me how to implement this.
Ideally, I would like to inhibit/disable the event triggered by the right tree row selection.
Any guidance on a way forward would be really appreciated!
Alastair Walker

[adminKeymaster]

Hi,

You can try this:

$(‘#rightTree’).on(‘select’,function (event)
{
var args = event.args;
$(‘#righTree’).preventDefault();
$(‘#righTree’).stopPropagation();
});

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[Alastair WalkerParticipant]

I think this is the right approach.

A small correction though. It should read as follows:

event.preventDefault();
event.stopPropagation();

Otherwise a jQuery failure is raised.

Many thanks,

Alastair

[Alastair WalkerParticipant]

I could not get the event based methods to work.

I have looked at the ‘focus’ method, which seems to have the right idea (i.e. being able to highlight a row), but it does not have an element handle to it, so how does one shift the focus from one row to another?

I also looked at the ‘enableItem’ method, as the demo seemed also sets the focus on a new row. But in trying it out, the affected row was not highlighted. So I must be missing something there.

Alastair

[ivanpeevskiParticipant]

Hi Alastair,

The jqxTree ‘select’ event has an argument event.args.type which tells you if the selection was made with a “mouse”, “keyboard” or programatically(null).
If the selection type is programatic, then don’t trigger the selection of the other tree.
I think this should avoid the cyclical issue if I understood your problem correctly.

Best Regards,
Ivan Peevski
jQWidgets Team
http://www.jqwidgets.com

[Alastair WalkerParticipant]

I founding testing

event.args.type === null

proved to be a sound approach to establishing whether the event trigger originated from the user or from code.

Thank you for the guidance!
Many thanks!
Alastair

[Author]

Posts