1. Home
  2. Forum
  3. Vue
  4. Grid Column Template in Vue 3 not rendering

Grid Column Template in Vue 3 not rendering

Dear Syncfusion,

Before migrating to the latest version of Syncfusion and migration to Vue 3, I was able to use a vue component as a column template to avoid using the vue version which includes the compiler. After upgrading, this no longer works. Your documentation is not clear on how to implement a column template from a vue file in Vue 3. Additionally, I could not implement a basic column template using the template string example. Oddly, your documentation says that the "template" prop is string type, but your documentation shows that we are suppose to give a "function" type. Please advise.


with much gratitude,

Carlos


<template>
<ejs-dropdownbutton iconCss="fas fa-ellipsis-v" :items="items" @open="open" @select="select"></ejs-dropdownbutton>
</template>

<script lang='ts'>
import { defineComponent, reactive, ref } from 'vue';
import useActionDropDown from '../_compositions/useActionDropDown';

export default defineComponent({
name: 'actionDropDown',
setup() {
const dropdown = reactive({ ...useActionDropDown() });

const items = ref([
{ text: dropdown.Items.EDIT },
{ text: dropdown.Items.DELETE }]);

const select = (args:any) => {
dropdown.setItemClicked(args.item.text);
};
const open = (args:any) => {
const rowUID: string = args.items[0].controlParent.element.parentElement.parentElement.getAttribute('data-uid');
dropdown.setRowUID(rowUID);
dropdown.setItemClicked('');
};
return {
items,
open,
select,
};
},
});
</script>


The corresponding composition function:

import { computed, ref } from 'vue';

const rowUID = ref('');
const itemClicked = ref('');
export default function useDropDown() {
const setRowUID = (str: string) => {
rowUID.value = str;
};
const setItemClicked = (str: string) => {
itemClicked.value = str;
};
const resetItemClicked = () => {
if (itemClicked.value !== '') {
itemClicked.value = '';
}
};
enum Items {
EDIT = 'Edit',
DELETE = 'Delete',
}
return {
setRowUID,
setItemClicked,
resetItemClicked,
Items,
itemClicked: computed(() => itemClicked),
rowUID: computed(() => rowUID),
};
}


The parent component pseudo code:

<e-column headerText='Actions' width='100' textAlign='Center' :template='actionTemplate'></e-column>

import DropDown from './DropDown.vue';

const actionTemplate = () => ({
template: DropDown,
});

return {
actionTemplate,
};



5 Replies
RR Rajapandi Ravi Syncfusion Team July 14, 2021 12:56 PM UTC

Hi Carlos, 

Greetings from syncfusion support 

Before using the template in the Vue application, we need to enable the runtime compiler. Create the Vue.config.js file in the root folder if it doesn’t exist and add the following code. 
 
 
module.exports = { 
runtimeCompiler: true 
  } 


For your reference we have prepared a sample of column Template in Vue 3. Please refer the below sample for more information. 

 
<template> 
  <div id="app"> 
    <ejs-grid :dataSource='data' :allowPaging="true"> 
      <e-columns> 
          .  .  .  .  .  .  .  .  . 
          .  .  .  .  .  .  .  .  . 
          <e-column headerText='Employee Image' width='150' textAlign='Center' :template='colTemplate'></e-column> 
      </e-columns> 
  </ejs-grid> 
    </div> 
</template> 

<script> 
import { GridComponent, ColumnsDirective, ColumnDirective, Page } from '@syncfusion/ej2-vue-grids'; 
import { createApp } from "vue"; 

const app = createApp(); 

// Template declaration 
var colVue = app.component("colTemplate", { 
  data: () => ({}), 
  template: `<b>Name:{{data.OrderID}}</b>`, 
}); 


export default { 
  name: 'App', 
  components: { 
    'ejs-grid' : GridComponent, 
'e-columns' : ColumnsDirective, 
'e-column' : ColumnDirective 
  }, 
  data() { 
return { 
  data:  [ 
    { 
       "OrderID":10248, 
       "CustomerID":"VINET", 
       "ShipCountry":"France" 
    }, 
    { 
       "OrderID":10249, 
       "CustomerID":"TOMSP", 
       "ShipCountry":"Germany" 
    }], 
    colTemplate: function () { 
        return { template: colVue }; 
      }, 
    columns: [ 
        { field: "OrderID", headerText: "OrderID", width: "120" }, 
        { field: "CustomerID", headerText: "Customer ID", width: "120" }, 
      ] 
}; 
  }, 
  // module injection 
  provide: { 
grid: [Page], 
  } 
}; 
</script> 

<style> 
</style> 



This below article explains how to use Syncfusion Vue components in Vue 3 application. Please refer the below documentation for more information. 



If you still face the issue, please replicate the issue with our above attached sample or share any issue reproducible sample that would be helpful for us to validate the application. 

Regards, 
Rajapandi R 


CA Carlos July 16, 2021 04:07 PM UTC

Dear Syncfusion,


Thank you. I can verify that your sample works with my desired components. However, is there a way to use this feature without including the runtime compiler? If there isn't, can this be supported in a future release?

- Carlos


RR Rajapandi Ravi Syncfusion Team July 19, 2021 10:43 AM UTC

Hi Carlos, 

We want to inform you that templates need to be compiled in runtime and included in the DOM. So, we follow sending template as string using template property which needs runtime compiler. There is no change in this architecture flow util Vue makes any changes in its flow. We request you to refer the below links. 


Regards, 
Rajapandi R 
 


CA Carlos July 27, 2021 06:50 PM UTC

Dear Syncfusion,


Thank you for your attention to this issue. I was able to get the template functionality working in development, but it does not work in production. I am using Vue CLI 5.0.0-beta2 to build and I'm using a monorepo project with .NET backend. I am currently trying to replicate this issue for you to troubleshoot. I am letting you know in case you run into a similar issue.


Sincerely,

Carlos


RR Rajapandi Ravi Syncfusion Team July 28, 2021 12:13 PM UTC

Hi Carlos 

Sorry for the inconvenience.  

We have checked with the latest Vue CLI version (5.0.0-beta.2) in production mode. We build the application and deployed the “dist” folder in server environment but we are unable to reproduce the reported issue. We have attached the sample for your reference that you can get from the below link. 
 
 
We believe that you are using Vue 3 with ASP.NET Core as backend and we request you to check the above project creation template for your reference. 
 
Please get back us if you have any queries. 

Regards, 
Rajapandi R 


Loader.
Up arrow icon