1

Using a SyncFusion Vue Grid component, I need to call a function when a row is selected. I have tried adding a column of edit buttons but I can't find documentation for the correct syntax to use to get the buttons to call a function. I also tried looking for a way to just call a function whenever the row itself is clicked which would be fine as long as I can determine which row was clicked (access the value of one of the fields in the row). The Grid Selection API looks like it is just for programmatically selecting parts of the grid which is not what I am trying to do. I tried following this explanation but I could not figure out the syntax for getting the button to call a function. I have looked at the Vue and SyncFusion documentation but I can't find specifically what I am trying to do. Below are the relevant parts of the code.

<template>
<ejs-grid>
    <e-columns>
        <e-column
            headerText='Buttons'
            width='120'
           :template='cTemplate'></e-column>
        <e-column
            field="name"
            headerText="Name"
            :isPrimaryKey="true"
            width="60"
            ></e-column>
        <e-column
            field="generalSubject"
            headerText="Subject"
            width="40"
            ></e-column>
    </e-columns>
</ejs-grid>
</template>

<script>
export default Vue.extend({  
  data() {
    cTemplate: function () { 
        return { template : Vue.component('columnTemplate',{ 
            template: `<button v-on:click="fx">Edit</button>`, // <-- call fx() syntax??
                data: function() { 
                    return { 
                        data: {} 
                    } 
                },
        })}
    },
    fx: function() { // do something },
  },  
});
</script>
Stack Underflow
  • 2,363
  • 2
  • 26
  • 51

1 Answers1

1

Your requirement can be achieved by using the Grid’s rowSelected event. This event gets triggered on selecting a Grid row and returns the current row details in the event arguments.

Please find the below sample prepared based on this for your reference,

Sample: https://codesandbox.io/s/vue-forked-0knlb?file=/src/App.vue

API link: https://ej2.syncfusion.com/vue/documentation/api/grid/#rowselected

Let us know if you need further assistance.

Regards,

Sujith R

Sujith
  • 96
  • 2