Problem with column templates after update

[Georgi Panayotov]

Hello,

i have problem wit column templates. When the template is a string it works, but when is a vue component it throws in console: [Vue warn]: Error in mounted hook: "TypeError: str.replace is not a function"

Until (some) last update everything worked, but since yesterday it stopped.

i think is something with versions because:

ej2-base is 16.2.47

ej2-vue-base is 16.2.46 and uses ej2-base 16.2.46

ej2-vue-grids is 16.2.46 which uses ej2-base 16.2.47 and ej2-vue-base 16.2.46 (which uses older ej2-base)

I've created a test project to reproduce

a snippets from it:

in HelloWorld.vue:

...

      <e-column field='OrderID' :template='cTemplate' headerText='Order ID' textAlign='Right' width=90></e-column>

...

      cTemplate: function() {
        return {
          template: Vue.component("columnTemplate", {
            template: `<div><a rel='nofollow' href="">{{ID}}</a></div>`,
            data: function() {
              return {
                data: {}
              };
            }
          })
        }
      }

in packages.json i have only following packages

  "dependencies": {
    "@syncfusion/ej2-vue-grids": "^16.2.48",
    "vue": "^2.5.17"
  },

the test project is created using new vue/cli and your getting started, i'm testing with yarn serv

i had problems with css include so it is commented

Attachment: test_5a7f46b5.zip

[Hariharan J V]

Hi Georgi, 

We have checked your query and we suspect that the cause of the issue could be the  Essential JavaScript 2 packages may not be updated properly. We would like to suggest you to delete the folder ‘node_modules/@syncfusion’ folder from your application and re-install the Essential JavaScript 2 Packages with "@syncfusion/ej2-vue-grids": "^16.2.48"  command in package.json file. So that all of the dependency packages of Essential JavaScript 2  Grid will be installed with latest version. 

Please refer to the below code example. 

[package.json] 

"dependencies": { 

     .     .    . 

     .     .    . 

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

    "cldr-data": "^32.0.1", 

    "core-js": "^2.4.1", 

    "rxjs": "^5.5.6", 

    "zone.js": "^0.8.19" 

  }, 

Note: Also use the latest packages, if you have any other Essential JavaScript 2 Components  

Regards, 

Hariharan 

[Georgi Panayotov]

Hi,

I did this many many times - the result was the same. I  even started from scratch in separate project, using your examples to be sure that the problem is not related to another module - I've included only the grids - the result was the same - not working templates and different versions of your packages - simply adding dependency to version 16.2.48 of the Vue version of your grid you will have  version 16.2.46 and 16.2.47 of the same ej2-base package. one is from vue-grids -> grids -> base, another is from vue-grids -> vue-base -> base.

Finally I've downloaded the old 16.2.46 of all packages used in my project, edit the dependency in packages.json from each component and change he version from "~16.2.46" to "16.2.46" (removing the ~).

And now using the packages from local folder i have working project again.

I will check then npm repository when the versions become more consistent and then will try to update again, until then i will use the modules from local folder.

[Hariharan J V]

Hi Georgi, 

We have analyzed the reported issue. We suspect that you have created the Vue sample by using the Runtime-only build. This build will contain only the basic services. Hence the template service could not be handled with this build. So we suggest you to use the compiler build or just configure by adding the below codes in the “vue.config.js” file to overcome the error you are facing and create a column template sample in Grid. Please refer the general documentation link below, 

Documentations :  

https://vuejs.org/v2/guide/installation.html#Runtime-Compiler-vs-Runtime-only 

https://cli.vuejs.org/guide/webpack.html 

 

[vue.config.js] 

 

module.exports = { 

    configureWebpack: { 

       resolve: { 

           alias: { 

              'vue$': 'vue/dist/vue.esm.js' // 'vue/dist/vue.common.js' for webpack 1 

           } 

       } 

    } 

} 

 

We have also modified the sample provided by you, please download the sample from the link below, 

Sample : http://www.syncfusion.com/downloads/support/directtrac/general/ze/onceagain1568670974 

Please get back to us if you need further assistance. 

Regards, 

Hariharan 

[Nurhan Aydogdu]

Hello, i  try to add a buttongroup in a column of a grid. Actually i get this error below. İ have try to solve this with your suggestions below but it doesn't work. Have everyone any İdea how i can solve this. 

[Vue warn]: Error in mounted hook: "TypeError: str.replace is not a function"

found in

---> <GridComponent> at src/views/Home.vue

       <SymbolPaletteComponent> at src/views/Home.vue

         <App> at src/App.vue

           <Root>

TypeError: str.replace is not a function

    at evalExp (template.js?5cc4:65)

    at compile (template.js?5cc4:52)

    at Object.Engine.compile (template-engine.js?d9ef:57)

    at compile (template-engine.js?d9ef:16)

    at templateCompiler (util.js?173d:145)

    at new Column (column.js?7d72:131)

    at prepareColumns (util.js?173d:185)

    at Grid.render (grid.js?aba3:701)

    at Grid.Component.appendTo (component.js?c155:129)

    at VueComponent.ComponentBase.mounted (component-base.js?5981:42)

[Hariharan J V]

Hi Nurhan,

Thanks for your update.

We have checked your query and we suspect that some duplicate packages might be installed on your ‘@syncfusion’ folder of ‘node_modules’. Could you please follow the steps provided in the following documentation to overcome the reported behavior.

Documentation: https://ej2.syncfusion.com/vue/documentation/common/how-to/update-npm-package/

Still, if you have facing the same issue, please share the following details to us. This will help us to provide the solution as early as possible,

1. Full Grid and detail template code.
2. Syncfusion package version.

Regards,
Hariharan  

[Nurhan Aydogdu]

Hi Haniharan, 

many thanks for your quick reply. it works fine for me. 

i have open a new task in vue forum which calls: 

"get/post Data into mysql database". 

İ need a quick help about this please.

[Hariharan J V]

Hi Nurhan,

Thanks for your update.

We are happy to hear that your problem has been resolved. We will check the another task and update the details on that task.

Please get back to use if you need any further assitance.

Regards,
Hariharan