Grid Column Template throws one error

[Jzy]

Hi,

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.

      

     <template>

       <div>

         <ejs-grid ref='grid' :dataSource="case_list"

                   :allowPaging="true" :pageSettings='pageSettings'

                   :dataBound="dataBound"

         >

           <e-columns>

             <e-column field='case_id' headerText='case ID' width='7%'></e-column>

             <e-column headerText='actions' width='10%' :template='actionTemplate'></e-column>

           </e-columns>

         </ejs-grid>

       </div>

     </template>

      computed:{

            ...mapState({

              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>

                  </router-link>`,

                  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)

[Madhu Sudhanan P]

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. 

https://ej2.syncfusion.com/documentation/common/how-to/update-npm-package/ 

Regards, 

Madhu Sudhanan P 

[Jzy]

Hi,

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)

[Madhu Sudhanan P]

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. 

Regards, 

Madhu Sudhanan P