Vue 3 Custom template on columns

[Alberto Provencio]

Good morning,

I am trying to use a custom template in one column.
I followed the instructions in here and works fine, but I want to do it in a grid that is loaded with the columns property. 
When I try to do this, in one case it does not render the grid (if the component is assigned to the template option of the column), in other case the grid is render but without any data (if the component is assigned to the template as a function).

I have created a new vue 3/ Typescripts app added the dependencies and created examples for all cases.
In the `master` branch it works as a column with a template on it.
In the `notWorkingTemplate` branch the component is assigned to the template and it gives an error.

in the `notWorkingTemplateFunction` branch the component is assigned as a function and the grid show no results (but if you set the pagination to true it show 3 different pages).

To try the app you need to `npm install` and `npm run serve` on the root directo

Thank you in advance

Attachment: prueba33_c30cac93.rar

[Rajapandiyan Settu]

Hi Alberto, 

Thanks for contacting Syncfusion support. 

We have run the sample by following the steps as you suggested. In which, we can reproduce the reported problem (“Grid is not rending with the column Template feature”). Currently, we are checking the cause of problem in your sample. So, we will update the further details on Aug 18th, 2021. 

We appreciate your patience until then. 

Regards, 

Rajapandian S 

[Ajith Govarthan]

Hi Alberto, 

Sorry for the inconvenience caused. 

Based on your reported issue you are facing column template rendering issue in your Grid application. So, we have found that when rendering the columns in typescript way throws script error with column template in the Grid component and rendering the columns as Vue template with column template works fine at our end. We have taken your reported behavior as high priority one and we will update further details on or before 23^rd August 2021. 

Until then we appreciate your patience. 

Regards, 

Ajith G. 

[Alberto Provencio]

ok thanks, i am waiting

[Alberto Provencio]

@Ajith Govarthan

In what state is the solution of the error?

Regards

[Vignesh Sivagnanam]

Hi Alberto 

 

Sorry for the inconvenience caused 

 

Based on reported issue, we forwarded to the concern team to validate the issue and we faced some difficulties in the reported issue and we will update the further details 26^th August 2021. 

 

Until then we appreciate your patience, 

 

Regards 

Vignesh Sivagnanam 

[Vignesh Sivagnanam]

Hi Alberto 

Thanks for your patience 

Based on your query, we found that you have faced issue while providing the template component to the grid dynamic columns. From validating your sample, we suggest you to append the template to the grid column using EJ2 Grid dataBound and load event. we have modified the provided sample at our end. 

Please refer the below code example and sample for your reference 

 

methods: { 

    dataBound: function() { 

      var gridObj = document.getElementsByClassName("e-grid")[0] 

        .ej2_instances[0]; 

      let tempCol = gridObj.getColumnByIndex(4); 

      tempCol.template = this.colTemplate; 

      tempCol.templateFn = templateCompiler(this.colTemplate); 

      if (this.isInitial) { 

        gridObj.refreshColumns(); 

        this.isInitial = false; 

      } 

    }, 

     onLoad: function() { 

       this.isInitial = true; 

     }, 

  } 

Sample : https://www.syncfusion.com/downloads/support/directtrac/general/ze/Vue3-Columntemplate498970482.zip 

Please get back to us for further assistance 

Regards 

Vignesh Sivagnanam 

[Alberto Provencio]

Hello

The example still doesn't work

What is the error?

[Vignesh Sivagnanam]

Hi Alberto 

Thanks for the update 

Based on your query, we have validated the provided sample at our end and we are unable to reproduced the reported script error. For your reference, we have provided a video demonstration for the sample.  

Please find the below video demonstration, 

Video : https://www.syncfusion.com/downloads/support/directtrac/general/ze/Issue-Video-demo1849935528.zip 

If you still reproducing the reported issue at your end, Please share the below details, 

1. Share the issue reproduced sample. 

2. Explain, in which case you are able to reproduced the issue at your end. 

Please get back to us for further assistance, 

Regards 

Vignesh Sivagnanam