Column template not working in production mode

[Jahedul Hasan]

Hi. I'm using treegrid for general purpose.  my problem is that when i use template in Test column static (for test) and 24-Jan to 24-Dec generated column. it's showing template name only which i identified but not showing the template element.
(In production) ​my grid showed like that

(In development mode) ​My grid should show like that

My code is

<ejs-treegrid

                            id="forecastGrid"

                            ref="forecastGrid"

                            :dataSource='manageForecast.data'

                            :treeColumnIndex='0'

                            :allowSelection='false'

                            :allowExcelExport='true'

                            :toolbar="manageForecast.toolbar"

                            :toolbarClick="onToolbarClick"

                            :queryCellInfo="onQueryCellInfo"

                            childMapping='forecasts'>

                            <e-columns>

                                <e-column field='headerName' :headerText="$t('p&lHeader')" width="200"></e-column>

                                <e-column :headerText="$t('test')" width="100" :template="'abcdworld'">

                                    <template v-slot:abcdworld="{}">

                                        <a>A Column</a>

                                    </template>

                                </e-column>

                               

                                <template :key="i" v-for="(item,i) in manageForecast.dateAmounts">

                                    <e-column                                        

                                        :headerText="isTotal(item.title)?$t('total')

                                        :headerText(item.date)"

                                        width=90

                                        textAlign="Right"

                                        :template="`template_${i}`">

                                            <template v-slot:[`template_${i}`]="{data}">

                                                <span v-if="isHeader(data) && isTotal(item.title)" class="text-white">{{ getRowTotalAmount(data.dateAmounts) }}</span>

                                                <span v-else-if="isSubHeader(data) && isTotal(item.title)" class="text-white">{{ getRowTotalAmount(data.dateAmounts) }}</span>

                                                <span v-else-if="isTotal(item.title)">{{ getRowTotalAmount(data.dateAmounts) }}</span>

                                                <span v-else-if="isHeader(data)" class="text-white">{{ data.dateAmounts[i].amount }}</span>

                                                <span v-else-if="isSubHeader(data)" class="text-white">{{ data.dateAmounts[i].amount }}</span>

                                                <span v-else-if="data.dateAmounts && data.dateAmounts[i].isLocked">{{ data.dateAmounts[i].amount }}</span>

                                                <span v-else-if="isForecast(headerText(item.date))">{{ data.dateAmounts[i].amount }}</span>

                                                <input v-else type="number" @change="onCellChange($event,data,item)" :value="data.dateAmounts[i].amount" class="form-control input-sm txt-right"/>

                                            </template>

                                        </e-column>

                                       

                                </template>

                               

                            </e-columns>

                        </ejs-treegrid>

manageForecast.dateAmounts:DateAmountModel[] = [{"title":"1/1/2024 12:00:00 AM","date":"2024-01-01T00:00:00","amount":0,"accountGroupId":0,"headerId":0,"subHeaderId":0}]

manageForecast.data:ForecastModel[]=[{"id":0,"date":"2024-09-12T04:54:52.9598221Z","companyId":null,"accountGroupId":0,"resultSheetId":1,"costCenterGroupId":null,"financialYearId":null,"headerId":1,"subHeaderId":0,"headerName":"Header-1","parentId":null,"projectId":null,"customerId":null,"forecastVersionId":null,"isLocked":false,"type":"Forecast","amount":0,forecasts:[]]

export interface DateAmountModel{

    title:string;

    headerId:number;

    subHeaderId:number;

    accountGroupId: number;

    date: string;

    amount: number;

    isLocked:boolean;

}

export interface ForecastModel{

    id: number;

    date: Date;

    type: string;

    headerName: string;

    isLocked: boolean;

    resultSheetId: number;

    accountGroupId: number;

    headerId:number;

    subHeaderId:number;

    companyId: number | null;

    costCenterGroupId: number | null;

    customerId: number | null;

    financialYearId: number | null;

    forecastVersionId: number | null;

    parentId: number | null;

    projectId: number | null;

    amount:number;

    dateAmounts:DateAmountModel[];

    forecasts:ForecastModel[];

}

My Package.json

{

  "name": "Clementine",

  "version": "0.1.0",

  "private": true,

  "scripts": {

    "start": "vue-cli-service serve --port 8080 --mode production",

    "serve": "vue-cli-service serve --port 8080",

    "build": "vue-cli-service build",

    "lint": "vue-cli-service lint",

    "i18n:report": "vue-cli-service i18n:report --src \"./src/**/*.?(js|vue)\" --locales \"./src/locales/**/*.json\""

  },

  "dependencies": {

    "@syncfusion/ej2-base": "23.1.36",

    "@syncfusion/ej2-buttons": "23.1.36",

    "@syncfusion/ej2-calendars": "23.1.36",

    "@syncfusion/ej2-data": "23.1.36",

    "@syncfusion/ej2-dropdowns": "23.1.36",

    "@syncfusion/ej2-inputs": "23.1.36",

    "@syncfusion/ej2-navigations": "23.1.36",

    "@syncfusion/ej2-popups": "23.1.36",

    "@syncfusion/ej2-splitbuttons": "23.1.36",

    "@syncfusion/ej2-vue-buttons": "23.1.36",

    "@syncfusion/ej2-vue-calendars": "23.1.36",

    "@syncfusion/ej2-vue-dropdowns": "23.1.36",

    "@syncfusion/ej2-vue-grids": "23.1.36",

    "@syncfusion/ej2-vue-navigations": "23.1.36",

    "@syncfusion/ej2-vue-notifications": "23.1.36",

    "@syncfusion/ej2-vue-popups": "23.1.36",

    "@syncfusion/ej2-vue-schedule": "23.1.36",

    "@syncfusion/ej2-vue-treegrid": "23.1.36",

    "add": "^2.0.6",

    "axios": "^1.4.0",

    "core-js": "^3.8.3",

    "exceljs": "^4.4.0",

    "jquery": "^3.7.1",

    "lodash": "^4.17.21",

    "mitt": "^3.0.1",

    "moment": "^2.29.4",

    "pinia": "^2.1.7",

    "read-excel-file": "^5.8.1",

    "vue": "^3.2.13",

    "vue-class-component": "^8.0.0-0",

    "vue-i18n": "^9.2.2",

    "vue-property-decorator": "^9.1.2",

    "vue-router": "^4.0.13",

    "vue-sweetalert2": "^5.0.5",

    "vue-toastification": "^2.0.0-rc.5",

    "yarn": "^1.22.19"

  },

  "devDependencies": {

    "@babel/core": "^7.12.16",

    "@babel/eslint-parser": "^7.12.16",

    "@intlify/vue-i18n-loader": "^3.0.0",

    "@types/lodash": "^4.14.197",

    "@typescript-eslint/eslint-plugin": "^5.4.0",

    "@typescript-eslint/parser": "^5.4.0",

    "@vue/cli-plugin-babel": "~5.0.0",

    "@vue/cli-plugin-typescript": "~5.0.0",

    "@vue/cli-service": "~5.0.0",

    "@vue/eslint-config-typescript": "^9.1.0",

    "eslint": "^7.32.0",

    "eslint-plugin-vue": "^8.0.3",

    "typescript": "~5.5.4",

    "vue-cli-plugin-i18n": "~2.3.2"

  },

  "eslintConfig": {

    "root": true,

    "env": {

      "node": true

    },

    "extends": [

      "plugin:vue/vue3-essential",

      "eslint:recommended",

      "@vue/typescript"

    ],

    "parserOptions": {

      "parser": "@typescript-eslint/parser"

    },

    "rules": {}

  },

  "browserslist": [

    "> 1%",

    "last 2 versions",

    "not dead",

    "not ie 11"

  ]

}

Attachment: App_Source_d7c249f4.zip

[Pon Selva Jeganathan]

Hi Jahedul Hasan ,

Greetings from Syncfusion.

We are able to replicate the issue at our end. The problem occurs because the data in the template column is not rendered correctly when using dynamically generated columns. To resolve this, we recommend rendering the column template dynamically using the code example below:

<template v-for="column in dateAmounts" :key="column.field">

        <e-column

          :field="column.field"

          :headerText="column.headerText"

          :width="column.width"

          :textAlign="column.textAlign"

        >

          <template #template="{ data }">

            <!-- Render custom content based on the column field -->

            <span v-if="column.field === 'taskName'">{{ data.taskName}} </span>

            <span v-else-if="column.field === 'startDate'">{{ data.startDate }} </span>

              <span v-else-if="column.field === 'duration'">{{ data.duration }} </span>

                <span v-else-if="column.field === 'progress'">{{ data.progress }} </span>

            <span v-else>{{ data[column.field] }}</span>

          </template>

        </e-column>

      </template>

 

Kindly get back to us for further assistance.

Regards,

Pon selva