CODEWITHSUNDEEP
vue.jsfocusag-grid
Artur Carvalho
Artur Carvalho

Reputation: 7167

ag-grid focus checkbox when cell is selected

I have a column with checkboxes. I'd like the user to be able to press the down arrow, go to the next checkbox and press space to toggle the checkbox.

I don't want to select the rows, I just want to edit the checkbox on the current row.

I was able to create a custom cell renderer, but I don't know how to tell 'when this cell is selected, select the checkbox inside of it'.

This is how the column currently looks like:enter image description here

Upvotes: 0

Views: 407

Answers (1)

Russ Deneychuk
Russ Deneychuk

Reputation: 815

You can listen to cellKeyDown event from AgGridVue like so:

    <AgGridVue
      style="height: 100vh; width: 100%"
      class="ag-theme-alpine"
      :columnDefs="columnDefs"
      :rowData="rowData"
      @cellKeyDown="onKeyDownHandler($event)" 
    />

And add method/function:

    function onKeyDownHandler(params) {
      const { colId } = params.column;
      if (colId === 'isValid' && params.event.code === 'Space') {
        params.node.setDataValue(colId, !params.value);
      }
    }

That checks if key was pressed in your isValid column, and that it is Space key, if it is, it toggles the cells value.

Here's a quick sandbox/stackblitz: https://stackblitz.com/edit/vue-khblqw?file=src/App.vue

Upvotes: 1

Related Questions