Button on grid column

[Christian DAquino]

I have a column with a button on my grid. When I click the button, how do I return the Id of that row?

[Praveenkumar Gajendiran]

Hi Christian DAquino,


Greetings from Syncfusion support,


Query: “I have a column with a button on my grid. When I click the button, how do I return the Id of that row?”

Based on your query we suspect that you want to get the ID of the row when click on the column button. We suggest you to achieve your requirement by using getAttribute() method as demonstrated in the below code snippet.
 

  <ejs-grid 

        ref="grid" 

        id="grid" 

        :allowPaging="true" 

        :dataSource="data" 

        :dataBound="dataBound" 

        :commandClick="commandClick" 

      >
         ………………
          <e-column headerText="Commands" width="150" :commands="commands"></e-column>
</ejs-grid>
------------------------------------------------------------------------
export default { 

  store: store, 

  data() { 

    return { 

      data: this.$store.state.gridData, 

      commands: [{ buttonOption: { content: "Details", cssClass: "e-flat" } }] 

    }; 

  }, 

  methods: { 

    commandClick: function(args) { 

      var rowID = args.target.parentElement 

        .closest("tr") 

        .getAttribute("data-uid");    // here you can get row ID 

      var rowData = JSON.stringify(args.rowData);     //here you can get row data 

      var rowIndex = args.target.parentElement 

        .closest("tr") 

        .getAttribute("aria-rowindex");     // here you can get row index 

      alert( 

        "rowID: " + 

          rowID + 

          "\r\nrowIndex: " + 

          rowIndex + 

          "\r\nrowData: " + 

          rowData 

      ); 

    } 

  }, 

 

In the above sample, We have used command property to  render button in a column. You can get the current “td” element  by using ‘args.target.parentElement’ property in commandClick method of Grid . You can get the current “tr” element by using “closest(“tr”)” method and you can get current row ID by pass parameter as “data-uid” in  ‘getAttribute()’ method.

Documentation Link:  https://ej2.syncfusion.com/vue/documentation/grid/edit/#custom-command 

Here we have prepared a sample for your reference,

Sample: https://codesandbox.io/s/281713-requirements-y57xm?file=/src/App.vue


Let us know if you have any concerns.

regards,
Praveenkumar G