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. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

How can I get RowData from attribute data-uid?

Thread ID:

Created:

Updated:

Platform:

Replies:

151265 Feb 5,2020 11:16 AM UTC Feb 7,2020 06:55 AM UTC Vue 3
loading
Tags: Data Grid
Pop Alex
Asked On February 5, 2020 11:16 AM UTC

Hi,

I have this code: 

<ejs-grid ref='grid' id='Grid' :dataSource="data" :allowSorting='true' class="table-dabo">
        <e-columns>
              <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>
        </e-columns>
</ejs-grid>

.. the script part: 

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

Vue.use(GridPlugin);

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>
</div>`,
data: function() {
return {
data: {}
}
},
components: {
Edit
},
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: {
Edit
},
methods: {

}
}
</script>


--------------

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

Regards, Pop Alex

Balaji Sekar [Syncfusion]
Replied On 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. 
 
Screenshot: 
 
 
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. 
 
Regards, 
Balaji Sekar. 


Pop Alex
Replied On 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: