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)
