Selecting Row in Vaadin Grid

Question

I am using the vaadin grid component to display, edit and delete record in a table. I am using html inputs within my vaadin grid rows to hold the text and switch between readonly and editable depending on whether the user is editing the row. The code looks like this:

<vaadin-grid-column width="50%">
  <template class="header">
    Description
  </template>
  <template>
    <input id="desc" class="input-row" value="[[item.Description]]" on-input="_storeDesc" readonly$="[[!_isEditing(editing, item)]]"></input>
  </template>
</vaadin-grid-column>

The problem I have is that I would like to enable row selection within the vaadin grid. When I enable it the row is only registering as selected when the user clicks on a part of the row that does not contain the html input. If the user clicks on the input the grid will not register that the active item has changed.

If the user clicks on the white section (the html input) the grid will not register a change in selection however if they click the blue part it will register. Is there a workaround for this? Is there anything I can put on the input tag to ensure the row is selected properly?

TIA

Code.Decode Code.Decode · Accepted Answer · 2018-05-23T18:39:28

If you've a child element in the vaadin-grid row which will capture the click event, then the row selection will be affected.
Note from vaadin-grid demo of selection -

Clicking a child element inside a cell activates the item, unless either:

The clicked child is a focusable element, for example, an <input>, a <button>, or has the tabindex attribute.

The clicked child prevents default action of the click event.

The clicked child stops propagation of the click event.

Since, you're planning to make the row child elements editable, one way to achieve that would be programmatically selecting the row based on the click event from the input child element.

so slightly updated pseudo code would be -

<!-- template code -->
<vaadin-grid-column width="50%" active-item="{{_activeItem}}">
  <template class="header">
    Description
  </template>
  <template>
    <input id="desc" class="input-row" value="[[item.Description]]" item="[[item]]" on-click="_inputClicked" on-input="_storeDesc" readonly$="[[!_isEditing(editing, item)]]"></input>
  </template>
</vaadin-grid-column>

//set the row selected in which the input was clicked for editing
_inputClicked(e) {
  const item = e.currentTarget.item;
  this.$.dataGrid.selectedItems = item ? [item] : [];
}

Notice that the input element will have to reference the item to set the row selection programmatically.

You can check more examples of vaadin-grid selection mode here.

Selecting Row in Vaadin Grid

2 Answers