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

Grid Column Template throws one error


I am trying to add a button in one column in the grid by following the example given in https://ej2.syncfusion.com/vue/documentation/grid/columns/#column-template. 
The difference is dataSource for the grid is given by case_list which is retrieved from one ajax request in vuex.
         <ejs-grid ref='grid' :dataSource="case_list"
                   :allowPaging="true" :pageSettings='pageSettings'
             <e-column field='case_id' headerText='case ID' width='7%'></e-column>
             <e-column headerText='actions' width='10%' :template='actionTemplate'></e-column>

              case_list: state => state.caseList.case_list
            actionTemplate: function () {
              return {
                template: Vue.component('columnTemplate', {
                      template: `<router-link :to="{name: 'CasePage', params: { case_id: this.data.case_id }}">
                     <button style="margin-right: 5px">view</button>
                  data: function () {
                    return {
                      data: {}
                  computed: {}
    created() {
      this.$store.dispatch('getCaseList', {id: this.$route.params.suite_id, level: 1})

However, it throws one error:

    vue.esm.js?efeb:1841 TypeError: str.replace is not a function
        at evalExp (template.js?ac09:65)
        at compile (template.js?ac09:52)
        at Object.Engine.compile (template-engine.js?a538:57)
        at compile (template-engine.js?a538:16)
        at templateCompiler (util.js?0c80:79)
        at new Column (column.js?a57a:125)
        at prepareColumns (util.js?0c80:119)
        at Grid.render (grid.js?9551:690)
        at Grid.Component.appendTo (component.js?2923:130)
        at VueComponent.ComponentBase.mounted (component-base.js?c3c0:42)
    Uncaught TypeError: Cannot read property 'getPanel' of undefined
        at Grid.getContent (grid.js?9551:1255)
        at Render.refreshDataManager (render.js?166f:90)
        at Render.refresh (render.js?166f:72)
        at Grid.extendedPropertyChange (grid.js?9551:1060)
        at Grid.onPropertyChanged (grid.js?9551:938)
        at Grid.Base.dataBind (base.js?2d5a:103)
        at Grid.Component.dataBind (component.js?2923:139)
        at messageHandler (util.js?4f23:29)

3 Replies

MS Madhu Sudhanan P Syncfusion Team February 12, 2019 05:54 AM UTC

Hi Jzy, 

Thanks for contacting Syncfusion support. 

This problem occurs when there are duplicate Syncfusion packages installed in our application. Please follow the below steps to update the NPM packages. Here npm dedupe ensure to remove duplicate packages. 

Madhu Sudhanan P 

JZ Jzy February 12, 2019 07:25 AM UTC


Thank you for your help, I ran those commands and this error never shows again. 

However,  router-link throws another error:

    TypeError: Cannot read property 'resolve' of undefined
        at Proxy.render (vue-router.esm.js?fe87:409)
        at VueComponent.Vue._render (vue.esm.js?efeb:3526)
        at VueComponent.updateComponent (vue.esm.js?efeb:4028)
        at Watcher.get (vue.esm.js?efeb:4428)
        at new Watcher (vue.esm.js?efeb:4417)
        at mountComponent (vue.esm.js?efeb:4035)
        at VueComponent.Vue.$mount (vue.esm.js?efeb:8998)
        at VueComponent.Vue.$mount (vue.esm.js?efeb:11864)
        at init (vue.esm.js?efeb:3102)
        at createComponent (vue.esm.js?efeb:5929)

MS Madhu Sudhanan P Syncfusion Team February 14, 2019 05:18 AM UTC

Hi Jzy, 

We are unable to reproduce the reported problem at our end. Please share the details about the placement of the router-link in your application and any other information you might find useful for us to analyze at our end. 

Madhu Sudhanan P 

Live Chat Icon For mobile
Up arrow icon