CODEWITHSUNDEEP
javascriptpolymervaadin
KVNA
KVNA

Reputation: 907

Select `vaadin-grid` Row Data with Button

<vaadin-grid id="grid" items="[[data]]" active-item="{{activeItem}}">

  <vaadin-grid-column>
    <template class="header">#</template>
    <template>[[index]]</template>
  </vaadin-grid-column>

  <vaadin-grid-column>
    <template class="header">First Name</template>
    <template>[[item.name.first]]</template>
  </vaadin-grid-column>
</vaadin-grid>

Using the activeItem pattern vaadin-grid row data can be selected when clicking on a row.

Is there a way to invoke this with a button action?

Perhaps by selecting a property from a parent node?

<vaadin-grid id="grid" items="[[data]]" active-item="{{activeItem}}">

  <vaadin-grid-column>
    <template class="header">#</template>
    <template>[[index]]</template>
  </vaadin-grid-column>

  <vaadin-grid-column>
    <template class="header">First Name</template>
    <template><paper-button on-tap="selectRowData">Select</paper-button</template>
  </vaadin-grid-column>
</vaadin-grid>

Upvotes: 0

Views: 799

Answers (3)

Erich Mayr
Erich Mayr

Reputation: 1

<vaadin-grid-column width="14em">
 <template>
   <vaadin-button on-click="deleteUser" >
     <iron-icon icon="icons:delete" ></iron-icon>
   </vaadin-button>              
 </template>

//You don't need to define any model it's simply available

deleteUser(e)
{
   let row=e.model.item;
   console.log(row);
   // e.g. make a REST Delete Operation with iron-ajax
   this.$.ajaxUserModify.url=this.dataURL+"/"+row.id;
   this.$.ajaxUserModify.method="delete";
   this.$.ajaxUserModify.body="";
   this.$.ajaxUserModify.generateRequest();
}

Upvotes: 0

KVNA
KVNA

Reputation: 907

You can select row data with a button by getting the row index and selecting the row from the data source.

<vaadin-grid id="grid" items="[[data]]" active-item="{{activeItem}}">
  <vaadin-grid-column>
    <template class="header">#</template>
    <template>[[index]]</template>
  </vaadin-grid-column>

 <vaadin-grid-column>
   <template class="header">First Name</template>
   <template>
     <paper-button id="[[index]] on-tap="selectRowData">Select</paper-button</template>
   </vaadin-grid-column>
 </vaadin-grid>

...

selectRowData(e) {
  let row = this.data[e.detail.sourceEvent.target.id];
  // do something with row data
}

Upvotes: 2

Jouni
Jouni

Reputation: 2918

Place a button in one of the cell templates, bind a click listener for that which receives the item as a parameter. This is easiest to do with Polymer data binding. Then add the item to grid.selectedItems array in the listener callback.

Upvotes: 0

Related Questions