How to prevent row select during click event?

[p2806Participant]

I am able to catch a right-click on a data table row using:

this.refs.myTable.on('rowClick', (event) => {
  if (event.args.originalEvent.button === 2) {
    ...(do something)...
  }
});

I do not want the row to be selected in this case. In the above handler, I tried:

event.preventDefault();
event.stopPropagation();
event.stopImmediatePropagation();
return false;

None of these worked. I also tried putting those inside a handler for the “rowSelect” event (without any qualification at all (since “rowSelect” does not provide information on the mouse button that was clicked), just to test), but still does not work.

Unselecting the row after the fact is not a good solution because there may have been other rows selected that will be lost. I do not want to lose the current selection status on the entire table.

Please advise, thank you.

[HristoParticipant]

Hello p2806,

You could try to use the “unselectRow” method. I read that ‘marks’ about the unselect method but this method has arguments and you could specify the row (row with context menu) that you do not want to be selected.

Best Regards,
Hristo Hristov

jQWidgets team
http://www.jqwidgets.com

[p2806Participant]

Hristo,

You seem to have missed this from my first post:

Unselecting the row after the fact is not a good solution because there may have been other rows selected that will be lost. I do not want to lose the current selection status on the entire table.

So your suggestion is not workable. Can you please explain why I cannot stop the event propagation and suggest a workaround?

Thank you

[HristoParticipant]

Hello p2806,

Unfortunately, there is no such option.
Because this event is bound to the all other events (main events as “click” and “mousedown”).
The approach that I suggest you with unselectRow does not clear all selected rows. You could unselect only this row where you click.
Please, take a look at this example: http://jsfiddle.net/txhi/4k2axn66/

Best Regards,
Hristo Hristov

jQWidgets team
http://www.jqwidgets.com

[p2806Participant]

Your example only shows a button — no table is rendered.

Regardless, it should go without saying that a *click* event de-selects the other rows. You seem to want to demonstrate your solution with a button, which is irrelevant. The problem is that the mouse click selects the row where the click happened and de-selects all the other rows. So please suggest a better solution. If the global “onClick” event is involved, great, I *want* to cancel the event.

[HristoParticipant]

Hello p2806,

Unfortunately, I cannot provide you a better solution.
Please, take a look at this example.

Best Regards,
Hristo Hristov

jQWidgets team
http://www.jqwidgets.com

[p2806Participant]

I see you suggest using a Timeout to restore the original selected state. Note that datatables.net simple demo code has tables that do not select a row upon right click — only left click selects a row. This is what should be expected, and I hope JQWidgets can add this fix to your next version. If you have comments on where I could introduce that fix myself, that would be appreciated.

[p2806Participant]

I tried your technique but found incredibly that selectRow() does not work unless its argument is hard-coded. This is quite odd, but no matter what I changed, it remained the case. The contents of my timeout function are as follows (it’s highly inconvenient that you do not provide a method on the data table to get a list of selected row indexes!) (selectedRows is obtained earlier using getSelection()):

let allRows = this.refs.myTable.getRows();
for (let i in selectedRows) {
  for (let j in allRows) {
    if (allRows[j].MY_ID === selectedRows[i].MY_ID) {
      console.log('Selecting row ' + j);
      this.refs.myTable.selectRow(j);
      break;
    }
  }
}

You don’t need to spend much time looking at the rest of my code, because the console.log() does show the correct row index values, thus the code works as it should. The incredible thing is that the rows simply do not get selected, UNLESS I hard code them – for example instead of index “j” I hard code to index number 2:

this.refs.myTable.selectRow(2);

Again, the console.log() shows the correct, desired rows to be selected, and I would expect selectRow() to thus select my rows, but it simply does not. How can this happen?

[p2806Participant]

Any comment on this or how I can debug it?

[HristoParticipant]

Hello p2806,

I suggested you one approach (update).
That you mentioned “selectRow() does not work” it seems there is some mistake with the arguments that used there.
You could try to check the values that you use is the index of the array, not the item.
Please, check the value that you set.
Also, I use only one for loop, you could try with only one, too.

Best Regards,
Hristo Hristov

jQWidgets team
http://www.jqwidgets.com

[p2806Participant]

I’ve already viewed your suggested approach, and shown you some code based on that, so it should be clear that I’ve tried to adapt your idea. You seem to assume that our data table would be built the same way as a simple demo snippet, which will never be the case.

Because JQWidgets does not provide a way to obtain the list of selected indexes from a data table (and the row data does not provide a “uid” (nor any other attribute) that is a simple index as in your example), there is no choice — we MUST use two loops, because we have to compare the previously selected objects with the full list of row objects. These are all shortcomings in JQWidgets that we have had to work around with extra code that bloats our application.

Where did you see in my code above that I was passing the row item to selectRow()? I am clearly sending the index. I would appreciate if you would pay more attention and make suggestions that are more accurate. The problem turns out to be that the index in the loop was a string and selectRow() only wants an integer, so I have it working for now (so thank you for the idea), but it’s not very pleasing that we have to go to such lengths to make JQWidgets do something this simple.

[HristoParticipant]

Hello p2806,

The examples that I provided you are workarounds.
The jqxDataTable has getSelection method – returns an array of selected rows.
I did not understand your issue with suggested examples.
In the example that I provide you it is possible to deselect or select multiple rows and in any case, you could invoke the custom ‘contextmenu’.
If I know what exactly is the case I will try to provide you a solution.
As I mentioned before that is what I could provide you in our forum. The suggested workarounds above.
Also, I would like to suggest you try to use the jqxGrid with the context menu. Please, take a look at this example:
https://www.jqwidgets.com/react/react-grid/react-grid-contextmenu.htm
Thank you for the understanding.

Best Regards,
Hristo Hristov

jQWidgets team
http://www.jqwidgets.com

[Author]

Posts