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

Grid Column Template throws one error

Thread ID:

Created:

Updated:

Platform:

Replies:

142607 Feb 12,2019 03:33 AM UTC Feb 14,2019 05:18 AM UTC Vue 3
loading
Tags: Data Grid
Jzy
Asked On February 12, 2019 03:33 AM UTC

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 [Syncfusion]
Replied On 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. 


Regards, 
Madhu Sudhanan P 


Jzy
Replied On February 12, 2019 07:25 AM UTC

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 [Syncfusion]
Replied On 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. 

Regards, 
Madhu Sudhanan P 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon