Column Template with VUe 3

[Christian DAquino]

What's the correct way to render column templates using Vue 3?

import { createApp } from "vue"; 

const app = createApp(); 

// Template declaration 

var colVue = app.component("colTemplate", dialogTemplate1); 

These examples currently provided by the documentation don't work as the template is overwritten with each row. So if I want to click a particular cell and grab the row data for that particular cell it will only return the row data of the last row created.

<template>
  <div v-show=data.open_notifications_count>
    {{ data.open_notifications_count }}
    <a rel='nofollow' href='' @click.prevent='onOpen'><span class='e-icons e-dbi'></span></a>
  </div>
</template>
<script>
import { mapWritableState } from 'pinia'
import { defineComponent } from 'vue'
import { useNotificationStore } from 'src/stores/eddp/Notification'
export default defineComponent({
  name: 'NotificationsTemplate',
  data () {
    return {
      open: false
    }
  },
  computed: {
    ...mapWritableState(useNotificationStore, ['equipment', 'open'])
  },
  methods: {
    onOpen () {
      console.log(this.data)
    }
  }
})
</script>

On the example above, the onOpen method always return the row data of the last row.

And since the example is done by creating a whole new instance of the application for the template, we can't make use of the rest of the application. I'm using Quasar framework, and this means that I can't use any quasar component from within that standalone template/application.

[Pavithra Subramaniyam]

Hi Christian DAquino,

Thanks for contacting Syncfusion support.

In Vue3 you can render column templates using the “createApp” method. We have prepared a simple sample for your reference. Please refer to the below code example and the attached sample for more information.

<template>

  <ejs-grid :dataSource='data' :allowPaging="true">

    <e-columns>

      . . .

      <e-column headerText='Template Column' width='150' textAlign='Center' :template="colTemplate"></e-column>

    </e-columns>

  </ejs-grid>

 

</template>

<script>

  import { GridComponent, ColumnsDirective, ColumnDirective, Page } from '@syncfusion/ej2-vue-grids';

import columnTemplate1 from "./ColumnTemp.vue";

import { createApp } from "vue";

const app = createApp();

// Template declaration

var colVue = app.component("colTemplate", columnTemplate1);

 

export default {

 .  .  .

  data() {

return {

  data:  [

    {

       "OrderID":10248,

       "CustomerID":"VINET",

       "ShipCountry":"France"

    },

    {

       "OrderID":10249,

       "CustomerID":"TOMSP",

       "ShipCountry":"Germany"

    }],

    colTemplate: function () {

        return { template: colVue};

     },

};

  },

};

</script>

 

<template>

  // you can add your predefined component here

  <div> {{data.OrderID}} - {{data.CustomerID}}

  </div>

</template>

<script>

export default {

  name: " columnTemplate1",

  data() {

    return {

    };

  },

};

</script>

 

 

So if you are still facing the issue please share the below details that will be helpful for us to validate the issue and provide a better solution as early as possible.

1. Share your Grid code example
2. Is there any script error?
3. Share the pacakge.json file for the Syncfusion version
4. Share an issue reproducible sample if possible.

Regards,

Pavithra S

Attachment: ColumnTemp_5103949b.zip

[Ryan Sereno]

Has a solution been found to this problem?
Using creatApp() is just not an option.
It eliminates the availability of installed component plugins, likely has a negative effect on performance, and is generally just not good practice.

How can this be achieved in Vue 3 without using createApp()?
I've followed the recommended approach in the docs-  Row Template in Vue Grid component - Syncfusion

But this approach does not seem to be working in vue 3

[Vinitha Balasubramanian]

Ryan,

From your update we understand that you use to add the columnTemplate without using createApp(). You can achieve this using the slots, we have already discussed about these topic in the documentation, you can find it from the below link.

Documentation: https://ej2.syncfusion.com/vue/documentation/common/template/#slot-template

Regards,

Vinitha Balasubramanian