How can i create custom template for grid columns with async api data?

[yuren]

I'm trying to create an image with :template='cTemplate' but not working as expected. In inspect shown `<td class="e-rowcell e-templatecell e-selectionbackground e-active" role="gridcell" tabindex="-1" aria-label=" is template cell column header Image" aria-colindex="6" index="2" style="text-align: left;" aria-selected="true"><!--function (a, b, c, d) { return createElement(vm, a, b, c, d, true); }--></td>`. How can I fix it?

<div>

<ejs-grid

ref="grid"

:data-source="products"

:allow-paging="true"

:page-settings="pageSettings"

:allow-sorting="true"

:toolbar="toolbarOptions"

:allow-pdf-export="true"

:toolbar-click="toolbarClick"

:allow-excel-export="true"

>

<e-columns>

<e-column field="slug" header-text="slug" text-align="Left" />

<e-column field="title" header-text="title" text-align="Left" />

<e-column field="countries" header-text="countries" text-align="Left" />

<e-column field="continent" header-text="continent" text-align="Left" />

<e-column field="updatedAt" header-text="$" text-align="Left" />

<e-column field="image" header-text="Created On" text-align="Left" />

<e-column field="image" header-text="Modified Date" text-align="Left" :template='cTemplate' />

</e-columns>

</ejs-grid>

</div>

```

```

<script>

import Vue from 'vue'

import {

GridPlugin,

Sort,

Page,

Toolbar,

Search,

PdfExport,

ExcelExport

} from '@syncfusion/ej2-vue-grids'

Vue.use(GridPlugin)

export default {

provide: {

grid: [Toolbar, PdfExport, ExcelExport, Search, Sort, Page]

},

data () {

return {

products: {},

toolbarOptions: ['Search', 'PdfExport', 'ExcelExport'],

pageSettings: { pageSize: 15 },

cTemplate () {

return {

template: Vue.component('ColumnTemplate', {

data () {

return {

products: {}

}

},

computed: {

image () {

return this.products.image

},

altImage () {

return this.products.image

}

},

template: `<div class="image">

<img :src="image" :alt="altImage"/>

</div>`

})

}

},

title: 'Products',

}

},

async fetch () {

this.products = await fetch(

'https://api.nuxtjs.dev/mountains'

).then(res => res.json())

},

}

</script>

[Rajapandiyan Settu]

Hi Yuren, 

 

Greetings from Syncfusion support. 

 

Query: <!--function (a, b, c, d) { return createElement(vm, a, b, c, d, true); }--> 

 

By analyzing your error code, we suspect that the template complier is not working properly in your project. At this case, the Vue template element is not rendered in the DOM and throws below warning 

 

Screenshot: template-compiler warning 

 

 

Since the above issue is a common issue. You can resolve this by referring below links. 

 

https://stackoverflow.com/questions/47332728/you-are-using-the-runtime-only-build-of-vue-where-the-template-compiler-is-not-a  

 

https://medium.com/@stefanledin/solve-the-you-are-using-the-runtime-only-build-of-vue-error-e675031f2c50  

 

https://www.google.com/search?q=%5BVue+warn%5D%3A+You+are+using+the+runtime-only+build+of+Vue+where+the+template+compiler+is+not+available.+Either+pre-compile+the+templates+into+render+functions%2C+or+use+the+compiler-included+build.&rlz=1C1CHBD_enIN895IN895&oq=%5BVue+warn%5D%3A+You+are+using+the+runtime-only+build+of+Vue+where+the+template+compiler+is+not+available.+Either+pre-compile+the+templates+into+render+functions%2C+or+use+the+compiler-included+build.&aqs=chrome..69i57.1001j0j7&sourceid=chrome&ie=UTF-8  

 

Please find the below working sample for your reference. 

 

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/vue_grid_template842296778.zip 

  

Please get back to us if you need further assistance with this. 

 

Regards, 

Rajapandiyan S

[yuren]

Thank you @Rajapandiyan

[Rajapandiyan Settu]

Hi Yuren, 

 

We are glad that the provided solution resolved your requirement. 

 

Regards, 

Rajapandiyan S