1. Home
  2. Forum
  3. Vue
  4. Vue grid using template in e-colum

Vue grid using template in e-colum

I have one question about how to use Syncfusion grid with a template column.

In html:

<e-column field="estado" :customAttributes="customEncabezado" headerText="Estado" minWidth=90 width=90 maxWidth=90 :template="cTemplate"></e-column>

In the script:

export default {
    data() {
        return {

            cTemplate: function () {
                return {
                    template: Vue.component("columnTemplate", {
                        template: `
                               <div ref='grid2'>
                                     <div v-if="data.estado==6">
                                           <a v-on:click="procedimientoRechazo(data)" style="cursor:pointer">Rechazado</a>
                                     </div>
                                     <div v-if="data.estado==5">
                                           <a  class="customEstado" style="cursor:pointer">Aprobado</a>
                                     </div>
                                     <div v-if="data.estado==4">
                                          <a  class="customEstado" style="cursor:pointer">Hacienda</a>
                                     </div>
                                     <div v-if="data.estado==3">
                                           <a  class="customEstado" style="cursor:pointer">Enviando</a>
                                     </div>
                                     <div v-if="data.estado==2">
                                           <a  class="customEstado" style="cursor:pointer">Enviando</a>
                                     </div>
                                     <div v-if="data.estado==1">
                                           <a  class="customEstado" style="cursor:pointer">Firmando</a>
                                     </div>
                                </div>`,
                        data: function () {
                            return {
                                data: {}
                            };
                        },
                        methods: {
                            procedimientoRechazo: function(data) {
                                this.newMethod(data);
                            }
                            
                        }
                    })
                };
            },
 }
}

   methods: {
     newMethod: function (data) {
            // To Do
        }
 }
}

I Need to execute the method called newMethod() from inside the template, but everytime it returns undefined, basically not found, the method I need it's in the list of methods in the main template of vue, I need to know how to make it works.

Thanks for any support

1 Reply 1 reply marked as answer
SK Sujith Kumar Rajkumar Syncfusion Team April 23, 2021 09:45 AM UTC

Hi Randall, 
 
Greetings from Syncfusion support. 
 
Based on the query we could understand that your requirement is to access the root methods inside the column template function. This can be achieved by assigning the method to the Vue’s main root instance and then accessing it from the $root property. 
 
This is demonstrated in the below code snippet, 
 
export default { 
    mounted() { 
        this.$root.myNewmethod = this.newMethod; 
    }, 
    data() { 
        return { 
            cTemplate: function () { 
                return { 
                    template: Vue.component("columnTemplate", { 
                        template: `<div ref='grid2'> 
                                     <button v-on:click="procedimientoRechazo()">Click here</button> 
                                   </div>`, 
                        data: function () { 
                            return { 
                                data: {}, 
                            }; 
                        }, 
                        methods: { 
                            procedimientoRechazo: function () { 
                                this.$root.myNewmethod.call("temp", this); 
                            }, 
                        }, 
                    }), 
                }; 
            }, 
        }; 
    }, 
    methods: { 
        newMethod: function (templateInst) { 
            // The template instance can be accessed here as ‘templateInst’(returned as argument) 
            var country = templateInst.data.ShipCountry; 
            alert("ShipCountry is " + country); 
        }, 
    }, 
}; 
 
We have prepared a sample based on this for your reference. You can find it below, 
 
 
Note: The support for accessing root instance inside the template component has been provided from Syncfusion package - v18.2.58. So if you are using older packages, we suggest you to upgrade them to the latest version to include this. 
 
 
Please get back to us if you require any further assistance. 
 
Regards, 
Sujith R 


Marked as answer
Loader.
Up arrow icon