QTable method to toggle row selection

[labs20]

Hi. I’m adding keyboard support on QTable setting UP and DOWN to navigate rows and ENTER or SPACE to toggle selection on the currently focused row, and here is the problem:

How can I programatically toggle a row (un)selected?

QSelect has a toggleOption method, so I’m looking for a toggleSelection(rowKeyValue) of sorts that I could call from my keypress listener (which is targeting document, btw).

Any help?

[metalsadman]

@labs20 the row just need a prop.selected to true, so if your leaving to another one just set it to false and set the new one to true.

[labs20]

Hi, thanks for your reply.

Maybe I’m getting it wrong, but setting a “selected” prop at data row its not working, but, then again, even when I manually select a row at the table such a prop does not exists nor its created on my table data.

Props (__selected and selected) on row 1 was created by me with no effect, and row 4 is actually selected at table.

Just to be clear, I’m not in the context of the row html here. Picture it as I’m on a button click listener elsewhere and want to programatically select or deselect a row based on some index.

Thanks again.

[metalsadman]

@labs20 pls read docs, you need to set row-key and selected.sync for it to work.

[labs20]

Hi, friend. I DO read the docs and row-key and selection.sync IS in place.

Any more help?

Thanks.

[labs20]

By the way, the correct setting, as stated in the docs is selected.sync.

[labs20]

q-table.comp-table.no-shadow(v-bind="field.client.quasar" dense bordered hide-bottom
    :title="field.client.label"
    :index.native="field.index_str"

    :class="{focused: field.has_focus}"

    @click.native="checkEtapa(e, g, i); focusTable(e, g, i);"

    :selected.sync="field.value"
    :selection="field.multiple ? 'multiple' : 'single'"
    :row-key="field.client.quasar.rowKey"
    :data="field.options"
)
    template(v-slot:body="props")
        q-tr.cursor-pointer(:props="props" :class="{row_focus: (field.row_focus == props.row.__index)}"
            :ref="field.param + '_tr_' + props.row.__index"
            @click.native="props.selected = !props.selected"
            @keyup.enter.native.stop.prevent="props.selected = !props.selected"
        )

            q-td.action-col(v-if="!field.readonly")
                q-checkbox.q-mr-sm(:ref="field.param + '_check_' + props.row.__index" v-model='props.selected')

            q-td(v-for="col in props.cols"
                :key="col.name"
                :props="props"
            ) {{col.value}}

Thanks

[metalsadman]

@labs20
selected Type Array
Description Keeps the user selection array
Note “.sync” modifier required!
Default value “[]”
Example
:selected.sync=“selection”

[labs20]

I thank you for your interest, but I think you’re too quick to offer a solution, and maybe did not took you time to really understand the point. Ok, you edited you post above and corrected the selection.sync to selected.sync, thats good.

To others that may bump into the need to let the end user manipulate the selection row of a table via keyboard, I have managed to accomplish that by:

• Placing a ref at the checkbox of the row;
• At UP and DOWN listeners that already keep track of user focused row, I also now retrieve the checkbox by ref, and then call DOM default “focus()” on it;
• This makes that the user “focused” row (indicated by some fancy css) now maches the correct focused checkbox, that can be naturally toggled by SPACE key.

Bottom line, by the docs, the table API offers a isRowSelected (key).

@rstoenescu , it would be nice, IMHO, a natural API call to do the reverse: selectRow(key).

Thanks for your awesome work.

[metalsadman]

@labs20 give your table a ref @keyup.enter.native.stop.prevent="$refs.myTable.isRowSelected(props.row.__index)" or what key you set in your row-key.

[labs20]

Hi. Thanks, I follow your logic here and seems nice.

For one, I see that I was mistaken about the isRowSelected, as it seems that it already do what I want, ok I’ll try.

But I’m afraid it may not work as (I think) the keyup listener will not be called in DOM for a table. I’ll check when I’m back at office.

Thank you.

[labs20]

yeah, maybe my mistake at something, but it didnt worked.

the @keyup didnt get fired indeed.

but thanks, I have implemented like my post above and its running fine.