Grid - questions about templates with vue single file Components (vue 3)

[Liraz]

Hi,

I want to provide column / filter / edit templates to grid / treegrid component. I want to do so using vue single file components.

Some questions about templates using vue SFC:

Question 1: How can I pass a data to the vue component template? 

After debug: 

• I found that I can extend the component and provide propsData as bellow:

myTemplate: () => { 
  return { 
    template: {
      extends: app.component("template", MyTemplateComp),
      propsData: {
        message: “My message”
      }
    }
  }
}

• The template name must be “template”, but I can register only one component with this name.
• When passing propsData, the data (e.g. column data) is not added to the component.
• Please note: the propsData option, used to pass props to the Vue instance during its creation, is removed in vue 3 (see this link).

Question 2: Is there a way to emit events in the template component and add a listener on the parent component (grid / treegrid)?

Question 3: How can I provide edit template to Grid? (When double-click on a cell, I want the cell to open for edit, and I also want to customize the edit template. What I tried is to set the edit setting to Batch mode, and to provide template function (editTemplate), but nothing happened after typing a value and clicking on Enter.)

Some comments about templates using vue SFC (just to help others, because I didn't find this in the documentation):

Comment 1: When defining the template in a single file component, in vue 3 I also need to register this component as a global component (otherwise it is not working) as below:

import { createApp } from ‘vue’
import ​MyTemplateComp from './MyTemplateComp.vue'

const app = createApp()

export default {
  data() {
    return {
      myTemplate: () => { return {template: app.component("myTemplate ", MyTemplateComp)}}
    }
  }
} 

It is missing in the documentation for vue 3 (see this link).

Comment 2: The component name must be the same as the template function name, otherwise it won’t work.

Working:

myTemplate: () => { return { template: app.component("myTemplate", MyTemplateComp)}}

Not working:

myTemplate: () => { return { template: app.component("columnTemplate", MyTemplateComp)}}

[Sujith Kumar Rajkumar]

Hi Liraz, 

Greetings from Syncfusion support. 

We are currently validating your query from our end and we will share you the further details on or before 10^th February 2022. 

 

Until then your patience is appreciated. 

 

Regards, 

Sujith R 

[Sujith Kumar Rajkumar]

Hi Liraz, 

We are facing complexities on validating the reported query and we are currently working on it with high priority. We will update you the further details on or before 14^th February 2022. 

We apologize for the inconvenience caused and appreciate your patience until then. 

Regards, 

Sujith R 

[Sujith Kumar Rajkumar]

Hi Liraz, 

 

Thanks for your patience and we apologize for the delay in providing the response. 

 

Currently our template approach in the Vue 3 has some limitations in using and passing props to the templates and registering template in multiple scenarios. However we have already planned to provide the native scoped slots support to the Vue templates and this will resolve all the problems in the templates and make them ease of use. The slots support will be included in our 2022 Volume 1 Main Release which is scheduled to be rolled out by the month of March 2022. Until then your patience is appreciated. 

 

You can now track the current status of this request, review the proposed resolution timeline and contact us for any further inquiries through the following feedback link, 

 

Feedback: https://www.syncfusion.com/feedback/4910/provide-the-scoped-slots-support-for-template-in-the-vue 

 

Regards, 

Sujith R