First click doesn't trigger highlight, only second click or navigation with keys does.

rtman

Hey,

In this live example, the first click on a cell doesn't highlight the row. It's only after clicking one more time (dblclick or slowly clicking again) that the row is highlighted. Whereas if you click then navigate the row highlights follow the focused cell. I'd like the row to be highlighted on the first click.

Thoughts?

Ryan

kthorngren

It looks like keyTable and Select are competing with each other. Maybe the select checkbox example will work for you:
https://datatables.net/extensions/select/examples/initialisation/checkbox.html

This way one column will be for select then use the second example here to enable keys for the other columns:
https://datatables.net/reference/option/keys

Kevin

colin

Hi @rtman ,

Is there any reason why you're doing the manual selects in the key-focus? If you remove them, like this here, then your code behaves how you want. If the reason why you're doing it is to ensure only a single row is selected at any time, you can set select.style to single for the same effect.

Hope that helps,

Cheers,

Colin

rtman

@kthorngren
Hey,

I can't use a checkbox as this a mobile table and horizontal space is limited. Also I have no use case for individual selection (I'm using inline edit), this is purely to help the user keep track of the data they are viewing by highlighting the row as they move/click/tap around.

R

rtman

@colin

That doesn't quite get me there, the purpose of the key-focus listener is to highlight rows based on keytable movements. Select on its own doesnt do this as far as I know. The solution (might not be the best solution) is to combine the two. Check out this example, it's the behaviour i want (I was able to include the style: 'single' attribute and remove some redundant code in the listener).

Most important are these two bits of code:

    select: {
        style: 'single',
        selector: 'td:first-child'
    },
    keys: true,

  datatable.on('key-focus', (e, dt, cell) => {
      dt.row(cell.index().row).select();
  });

Seems like selector: 'td:first-child' with the key-focus listener are the keys.

Best,
Ryan

colin

Hi @rtman ,

Got ii, I understand. If you tell Select extension to ignore clicks, and only select from the API you get what you're after - see here.

Fingers crossed this time

Cheers,

Colin

rtman

Hey @colin
Yup that works too!