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

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

rtmanrtman Posts: 13Questions: 4Answers: 0

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

This question has an accepted answers - jump to answer

Answers

  • kthorngrenkthorngren Posts: 20,144Questions: 26Answers: 4,736

    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

  • colincolin Posts: 15,112Questions: 1Answers: 2,583

    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

  • rtmanrtman Posts: 13Questions: 4Answers: 0

    @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

  • rtmanrtman Posts: 13Questions: 4Answers: 0
    edited May 2019

    @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

  • colincolin Posts: 15,112Questions: 1Answers: 2,583
    Answer ✓

    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

  • rtmanrtman Posts: 13Questions: 4Answers: 0

    Hey @colin
    Yup that works too!

This discussion has been closed.