BoldSignA modern eSignature application with affordable pricing. Sign up today for unlimited document usage!
Hi Team,
I am facing issues with the grid.
I have followed the documentation to create the inline template. That template is not working with the grid, and another difficulty is accessing the variable from the parent method.
Added working sample below.
Regards,
Cyril Ovely
Hi Cyril,
Thanks for contacting Syncfusion support.
We have run the provided sample and replicated the issue from our side. It is truly
related to the template compiler.
|
Please find the below links to resolve this.
https://github.com/fengyuanchen/vue-feather/issues/8
[package.json] "@babel/core": "^7.12.16", "@babel/eslint-parser": "^7.12.16", "@vue/cli-plugin-babel": "~5.0.0", "@vue/cli-plugin-eslint": "~5.0.0", "@vue/compiler-sfc": "^3.0.0", "@vue/cli-service": "~5.0.0", "eslint": "^7.32.0", "eslint-plugin-vue": "^8.0.3" },
|
[vue.config.js] module.exports = defineConfig({ runtimeCompiler: true, transpileDependencies: true })
|
Regards,
Rajapandiyan S
Hi Rajapandiyan,
I am not able to render the column template with Vite compiler. Can you let me know how we can enable it in Vue3 + Vite project
I have added a sample project below.
Regards,
Cyril Ovely
Hi Cyril,
By default, the runtime compiler
is not included in the Vue build. To include it, add the following code
in resolve.alias configuration,
reference: https://stackoverflow.com/questions/66470249/vue-3-with-vite-rendering-blank-page-when-not-using-app-vue/67354652#67354652
[vite.config.js] plugins: [vue()], resolve: { alias: { vue: 'vue/dist/vue.esm-bundler.js', '@': fileURLToPath(new URL('./src', import.meta.url)) } } })
|
Or, if you want to render the columnTemplate without using runtimeCompiler, you need to define the Vue component of template column in separate file instead of same file. Please find the below code example and attached sample for your reference.
[App.vue]
<template> <ejs-grid :dataSource="data" :actionFailure="actionFailure"> <e-columns> <e-column field="OrderID" width="100" textAlign="Right"></e-column> <e-column field="CustomerID" :template="customerIDTemplate" width="180"></e-column> --- </e-columns> </ejs-grid> </template>
<script> import nameTemplate from "./ColumnTemp.vue"; import { createApp } from 'vue' const app1 = createApp();
// Template declaration from another vue file var colVue1 = app1.component("colIDTemplate", nameTemplate); export default { name: 'App', components: { 'ejs-grid' : GridComponent, 'e-columns' : ColumnsDirective, 'e-column' : ColumnDirective, }, data() { return { data: data, customerIDTemplate: function () { return { template: colVue1}; }, }; }, }; </script>
|
[ColumnTemp.vue]
<template> <div> {{data.OrderID}} - {{data.CustomerID}} </div> </template> <script> export default { name: "nameTemplate", data() { return { }; }, }; </script> |
Regards,
Rajapandiyan S