Any plans to support vue3 grid cell template?

[chae hyeoung guk]

i have quick question.

 Any plans to support vue3 grid cell template?.

i think currently compile logic only support vue2.

https://github.com/syncfusion/ej2-vue-ui-components/blob/master/components/base/src/component-base.ts

[Rajapandiyan Settu]

Hi Chae, 

Thanks for contacting Syncfusion support.

Based on your query, we suspect that you want to render the EJ2 Grid with ColumnTemplate feature in Vue3 project. If so, you can achieve this by referring the following documentation and code example.  

https://ej2.syncfusion.com/vue/documentation/getting-started/vue3-tutorial/#template-usage
https://ej2.syncfusion.com/vue/documentation/grid/getting-started-vue/

https://ej2.syncfusion.com/vue/documentation/getting-started/vue3-tutorial/#migration-from-vue-2-to-vue-3

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/vue3_columntemplate-1268952397.zip

 

[ColumnTemp.vue]

 

<template>

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

  </div>

</template>

<script>

export default {

  name: " columnTemplate1",

  data() {

    return {

    };

  },

};

</script>

 

 

[App.vue]

 

<template>

  <div id="app">

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

      <e-columns>

          <e-column field='CustomerID' width='125' textAlign='Right'></e-column>

          <e-column field='OrderID' width='125' textAlign='Right'></e-column>

          <e-column field='ShipCountry' width='125' textAlign='Right'></e-column>

          <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 columnTemplate1 from "./ColumnTemp.vue";

 

import { createApp } from "vue";

const app = createApp();

// Template declaration

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

 

 

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};

     },

};

  },

  // module injection

  provide: {

grid: [Page],

  }

};

</script>

 

please get back to us if you need further assistance.

Regards, 

Rajapandiyan S

[chae hyeoung guk]

First of all thank you for your support. it works!

Unfortunately, we need to use not only in sfc style, but also in script setup style

so we are asking for a feature request to support script setup style.

And i have a two question.

one is regarding vue instance.

What would be the purpose of create a new instance when we create a new template ?

two is how to send props with data from grid?

currently template logic is propsData used. but that is vue2 api.

https://github.com/syncfusion/ej2-vue-ui-components/blob/master/components/base/src/template.ts
https://v3-migration.vuejs.org/breaking-changes/props-data.html#overview

Thanks for your help.

[Rajapandiyan Settu]

Hi Chae, 

Thanks for update.

Query #1: Unfortunately, we need to use not only in sfc style, but also in script setup style. so we are asking for a feature request to support script setup style.

Query #2: What would be the purpose of create a new instance when we create a new template ?

Currently, we have forwarded the reported query to the concerned team. So, we will update the further details on or before Aug 2^nd, 2022.

We appreciate your patience until then.

Query #3: how to send props with data from grid? currently template logic is propsData used.

In EJ2 Grid, we have passed the rowData, row index, and column details to the columnTemplate. You can get this from the computed method,

<template>

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

  </div>

</template>

<script>

export default {

  name: "columnTemplate1",

  data() {

    return {

    };

  },

  computed: {

    cellValue: function () {

      console.log(this.data); // get the row details

      return this.data.CustomerID + "(Custom Value)";

    }

  },

};

</script>

If this does not meet your requirement, Kindly explain it in detail with a video/screenshot to validate further.

Regards, 

Rajapandiyan S

[Ragunath Sukumaran]

Hi Chae,

Sorry for the delayed response.

Query #1: Unfortunately, we need to use not only in sfc style, but also in script setup style. so we are asking for a feature request to support script setup style.

Our component supports script setup style. Please refer the below sample.

Query #2: What would be the purpose of create a new instance when we create a new template ?

In vue 3, the temple should be created by creating the new instance only. If you are not comfortable with this approach, we have a way to achieve this in a slot support. Please refer to the below documentation and sample.

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/vue3-slot-setup590759078

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

Please get back to us if you have any queries.

Regards,

Ragunath S