We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
close icon

How can I get RowData from attribute data-uid?


I have this code: 

<ejs-grid ref='grid' id='Grid' :dataSource="data" :allowSorting='true' class="table-dabo">
              <e-column field='userId' headerText='Id' width=130 :visible="false"></e-column>
              <e-column field='userName' headerText='Nume Complet' width=130></e-column>
              <e-column field='email' headerText='Email' width=130></e-column>
              <e-column field='phone' headerText='Telefon' width=130 :allowSorting='false'></e-column>
              <e-column field='franchiseName' headerText='Nume Franciza' width='180' clipMode='EllipsisWithTooltip'></e-column>
              <e-column field='address' headerText='Adresa' width='220' clipMode='EllipsisWithTooltip'></e-column>
              <e-column headerText='Actiuni' width="180" minWidth='270' :template='buttonsTemplate' textAlign='Right' :allowSorting='false'></e-column>

.. the script part: 

import Vue from "vue"; 
import { GridPlugin, Sort, CommandColumn } from "@syncfusion/ej2-vue-grids";
import Edit from '../Icons/Edit'


export default {
data () {
return {
data: [
{ userId: 1, userName: 'Popescu Ion Doru', email: 'valdez@yahoo.com', phone: '+1 (861) 550-2796', franchiseName: 'DaBo Massachusetts Brogan', address: 'Chad, Massachusetts Brogan , 225 Bills Place' },
{ userId: 2, userName: 'Pena Valdez', email: 'miles@mail.com', phone: '+1 (824) 487-2755', franchiseName: 'DaBo American Samoa Durham', address: 'Mauritania, American Samoa Durham , 240 Hillel Place' },
{ userId: 3, userName: 'Kerri Barber', email: 'barber@gmail.com', phone: '+1 (929) 475-3153', franchiseName: 'DaBo Nebraska Callaghan', address: 'Tonga, Nebraska Callaghan , 500 Gold Street' },
buttonsTemplate: () => {
return { template : Vue.component('columnTemplate',{
template: `<div class="btns-actions-table">
<button class="secondary-action-row" @click="editFranchise"><edit></edit></button>
data: function() {
return {
data: {}
components: {
methods: {
editFranchise: (args) => {
                        var rowEle = $(args.target).closest('.e-row')
                          var dataUID = rowEle[0].getAttribute('data-uid')
                          // console.log(this.$refs.grid.getRowObjectFromUID(dataUID))
provide: {
grid: [Sort, CommandColumn]
components: {
methods: {



The function getRowObjectFromUID does not exist, how i can get the data?

Regards, Pop Alex

3 Replies

BS Balaji Sekar Syncfusion Team February 6, 2020 02:12 PM UTC

Hi Pop, 
Greetings from Syncfusion support. 
We checked your reported problem but were unfortunately unable to reproduce it from our end as the row data was properly returned from the getRowObjectFromUID method. Please check below sample and screenshot for your reference, 
You can cross check the above sample with your application to see if you have missed anything. 
It would be helpful to identify it better if you could share the following information, 
  • Are any console errors thrown? If so, please share it.
  • Syncfusion package version.
  • Share us the grid related code file.
  • If possible, share us a simple sample application to replicate the issue or try reproducing it in the above provided sample.
Let us know if you have any concerns. 
Balaji Sekar. 

PA Pop Alex February 6, 2020 03:13 PM UTC

Thanks its works!

Now I have another problem, how can i send rowData to buttonsTemplate. to do a v-if on template, for example:
I tried this: