TreeGrid – issue with column template in production with vue 3

[Liraz]

Hi,
In my Vue 3 project, I am using the TreeGrid component with column template. In development mode, this is working and I see the given template, but in production (it is built using webpack 5) nothing is shown. The TreeGrid shows no data. There is no error message in the console.

Please help me to fix this issue.

Thanks

NameColumn.vue:

<template>
    <div>
        <b>{{ data.name }}</b>
    </div>
</template>

<script>

export default {
    name: 'nameColumnTemplate',
    data() {
        return {
        }
    }
}
​

MyTreeGrid.vue:

<template>
    <ejs-treegrid 
        ref="treegrid"
        :dataSource="dataSource" 
        :columns='columns'>
    </ejs-treegrid>
</template>

<script>

import myapp from "@/main.js"
import data from "./data.js"
import NameColumn from './NameColumn.vue'

export default {
    data() {
        let colVue = myapp.component("nameColumnTemplate", NameColumn); 
        let nameColumnTemplate = () => {return { template: colVue}}
        let columns =  [
            {field: 'name', headerText: 'Name', textAlign: 'Left', width: 180, template: nameColumnTemplate },
       ]
        return {
            columns,
        }
    }
}
</script>

package.json:

{

   …

   "scripts": {

    "serve": "webpack-dev-server --env development --config ./build/webpack.config.js",

    "build": "webpack --env production --config ./build/webpack.config.js"

  },

  "dependencies": {

    "@syncfusion/ej2-vue-buttons": " ^19.4.41 ",

    "@syncfusion/ej2-vue-grids": " ^19.4.41 ",

    "@syncfusion/ej2-vue-inputs": " ^19.4.41 ",

    "@syncfusion/ej2-vue-popups": " ^19.4.41 ",

    "@syncfusion/ej2-vue-treegrid": " ^19.4.41 ",

    "core-js": "3.18.3",

    "vue": "3.2.20",

    "vue-class-component": "8.0.0-rc.1",

    "vue-router": "4.0.12",

    "vuex": "4.0.2"

},

…

}

[Pon Selva Jeganathan]

Hi Liraz ,  

 

Thanks for contacting syncfusion forum.  

 

Query : issue with column template 

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 to the below sample  

https://www.syncfusion.com/downloads/support/forum/172040/ze/Vue_3_col_template1775019484 

Please refer the below documentation for more information.  

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

                              https://ej2.syncfusion.com/staging/vue/documentation/getting-started/vue3-tutorial/#using-syncfusion-vue-components-inside-template-properties  

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,  

Pon selva   

 

[Liraz]

Hi,

I followed the documentation and I still have the same issue.

I want to emphasis that it is working for me while running in development mode, but I have this issue in production.
I am getting the following warning while building the application for production, may it related?

[Pon Selva Jeganathan]

Hi Liraz, 

 

we are able to reproduce the issue at our end. We have forwarded this request to our dependent component team to further validation and will update you with further details on or before 21^st January 2022.  

 

Until then we value your patience.   

 

Regards,   

Pon selva    

 

[Liraz]

Hi,

Is there any update on this?

Thanks,

[Pon Selva Jeganathan]

Hi Liraz, 

  

Sorry for the inconvenience caused. 

  

Currently we are validating your query with high priority and will update you the further information on or before January 31, 2022. 

 

Until then, we appreciate your patience. 

  

Regards, 

Pon selva 

[Pon Selva Jeganathan]

Hi Liraz,   

 

Thanks for your patience. 

 

We have validated your reported query and are able to replicate the reported warning at our end. And we have considered this as a bug “Facing an Warning error while running in development mode in Vue 3” at our end and logged a bug request. And it will be included with our upcoming weekly patch release which is scheduled on 15^th February 2022. Also, you can check the status of the bug by referring to the below feedback link. 

 

Feedback: https://www.syncfusion.com/feedback/32239/facing-an-warning-error-while-running-in-development-mode-in-vue-3 

 

Kindly get back to us for further assistance.  

     

[Liraz]

Hi, Thanks. 

Does this warning cause the original issue I am facing during production? 

The original issue: column template is not working with vue 3 in production. This issue is blocking.

[Pon Selva Jeganathan]

Hi Liraz ,   

 

Thanks for the update. 

 

Query: Does this warning cause the original issue I am facing during production?  

 

No, this warning issue shows in the normal rendering(without using column template) of the treegrid component. 

 

Query: column template is not working with vue 3 in production 

 

We were unable to reproduce the issue(Column template is not working) at our end. 

 

Please refer to the below sample, 

https://www.syncfusion.com/downloads/support/forum/172040/ze/Vue_3_col_template513676666 

 

Please refer to the below screenshot: 

 

 

 

After following the above reference, still faced issue please share us the following details.

1. Share video demo or screenshot of the issue
2. If possible, reproduce the issue in the attached sample or share the issue reproducible sample.
3. Share the network tab details

 

The provided information will be helpful to provide you response as early as possible.  

Note: In your shared code snippet, the child mapping or id mapping and parent id mapping property is not binded properly. Kindly ensure this case.

Regards,  

Pon selva   

[Liraz]

Hi,

I can't run the project example you provided in production. I am getting the following error on console:

node: v14.15.1

npm: 6.14.8

Can you please help me with that? I already tried to remove node_modules directory and package-lock.json, and also cleaned my npm cache (npm cache clean --force).

Thanks,

[Pon Selva Jeganathan]

Hi Liraz ,   

 

Sorry for the inconvenience 

 

We modified the shared sample. Please refer to the below sample, 

https://www.syncfusion.com/downloads/support/forum/172040/ze/Vue_3_template-1095296971 

Kindly get back to us for further assistance.

Regards,  

Pon selva   

 

[Liraz]

Hi Pon,

I finally found the problem: the column template function must be decleared as a property (under data, or as computed etc).

To solve it: 

Since my TreeGrid' columns were defined as a property, and I wanted to give a template to one of the columns, I had to return the column template function in data, and define the columns as computed property. This is what I did:

<template>
  <div id="app">
      <ejs-treegrid ref='grid' :dataSource="data" :columns="columns" height='100%' childMapping='subtasks'>
        </ejs-treegrid>
    </div>
</template>

<script>
import {createApp} from 'vue'
import NameColumn from './components/NameColumn.vue'

const app = createApp();

export default {
    name: 'App',
    data() {
        let colVue = app.component("colTemplate", NameColumn);
        return {
            data: [{
                    taskID: 1,
                    taskName: 'Planning',
                    startDate: new Date('02/03/2017'),
                    endDate: new Date('02/07/2017'),
                    progress: 100,
                    duration: 5,
                    priority: 'Normal',
                    approved: false,
                    subtasks: [
                        { taskID: 2, taskName: 'Plan timeline', startDate: new Date('02/03/2017'), endDate: new Date('02/07/2017'), duration: 5, progress: 100, priority: 'Normal', approved: false },
                        { taskID: 3, taskName: 'Plan budget', startDate: new Date('02/03/2017'), endDate: new Date('02/07/2017'), duration: 5, progress: 100, approved: true },
                        { taskID: 4, taskName: 'Allocate resources', startDate: new Date('02/03/2017'), endDate: new Date('02/07/2017'), duration: 5, progress: 100, priority: 'Critical', approved: false },
                        { taskID: 5, taskName: 'Planning complete', startDate: new Date('02/07/2017'), endDate: new Date('02/07/2017'), duration: 0, progress: 0, priority: 'Low', approved: true }
                    ]
                },
            ],
            colTemplate: () => { return { template: colVue }},
        };
    },
    computed: {
        columns() {
            return [
                {field: 'taskName', headerText: 'Task Name', template: this.colTemplate},
                {field: 'priority', headerText: 'Priority'},
            ]
        }
    }
};
</script>
​

The problem is that when I didn't define the column template as a property (I didn't return it in data), everything worked for me in development mode, but the issue occured only in production.

Thank you for your help.

[Pon Selva Jeganathan]

Hi Liraz, 

Thanks for the update. 

 

We are glad to hear your query has been solved. 

 

Kindly get back to us for further assistance. We are happy to assist you. 

Regards, 

Pon selva 

[Pon Selva Jeganathan]

Hi Liraz,   

 

Sorry for the inconvenience caused. 

Due to some internal complexities we could not include the fix as promised. We are currently working on it high priority and will include it in our upcoming weekly patch release which is scheduled on 1^st March 2022. 

 

Until then we value your patience.