Differentiate between an honest deselect and between a "deselect-and-select".

wutever0

I have a datatable which I use to populate other sections of the screen when one of the datatable rows are selected.
I am using the "on.deselect" event to make those other sections disappear and using the "on.select" event to populate them as needed.

An issue arises when one of the rows is selected but the user then selects a different row. This causes both events to be triggered (a deselect first followed by a select). The visual result of this is that there is a "flicker" on the page as the other sections are removed then added almost immediately. It also throws off the scroll bars since the page is suddenly shortened then extended again.

I am hoping there is a way I can differentiate between an "honest" deselect where the user simply clicks again on the selected row to deselect it and between an "automated" deselect which happens just before the new row is selected. In that case I will make the "clearing" code run only on the first instance. On the second scenario I will "overwrite" the section that needs to be changed instead of clearing-and-showing.

Can anyone help me with suggestions?

peasonokay

In the deselect event handler you can check if the index of the deselected row matches the index of the selected row and handle accordingly

wutever0

At the time you're in the deselect event handler there are no selected rows yet - dt.rows({selected: true}) is undefined at that point unless you know something I'm missing?

colin

Hi @wutever0 ,

The only way I can think of doing it is to introduce a slight delay, like this example here. You could code your logic to delay removing the elements on the deselect, and just reuse the elements if the select called and the old elements still present.

Hope that helps,

Cheers,

Colin

wutever0

Thanks @colin . Would you guys be open to me contributing some code to include custom data in the jQuery event (on.deselect) - to indicate which of the two scenarios it is? Assuming of course that this is possible.

allan

Indeed yes we would.

Before you do down that path though, you might want to consider another option:

let timeout;

table.on('deselect', function () {
  timeout = setTimeout( function () {
    // ... hide elements
  }, 50 );
} );

table.on('select', function () {
  clearTimeout( timeout );

  // ... show elements
} );

So basically if the deselect was triggered by a select action, it will effectively be immediately cancelled.

Allan

wutever0

Thank you both for your suggestions.