ng-template inside ejs-grid

Question

Hello,I have upgraded the syncfusion grid to the latest version ("@syncfusion/ej2-ng-grids ":" ^16.1.30 ").So while implementing the inside the , I am facing difficulties.Can you please look into it ? Below is the corresponding code.

Venkatesh Ayothi Raman · Answer

Hi Ananya, Thanks for using Syncfusion products. We went through your code example that you have shared for us and found that you are assigning the values to ng-template directive to access the Grid row details while click the image the tag like as follows,

. . .

In this case, angular structural directives tried to parse the value which is undefined, so its thrown an error while parsing the template HTML element. We suggest you to define the ng-template directive and pass the data into the click event like as follows,

Sample: https://plnkr.co/edit/mFugm8uE8Lqns7bcCcss?p=preview Refer to the following Help documentation for more information, Help documentation: https://ej2.syncfusion.com/16.1.24/documentation/base/template-engine.html?lang=es5 Please let us know if you have any further assistance on this. Regards, Venkatesh Ayothiraman.

Ananya Juhi · Answer

Hello Venkatesh,Thanks for responding. But I think you misunderstood my requirement. The main issue I am facing is after upgrading the to latest version(16.1.30, ) , I am not able to implement the ng-template directive inside it.In the previous version of ej-grid, I was able to use the ng-template directive without any issues.But now when I am using it after upgrading, I am facing the below errors,ERROR TypeError: str.replace is not a function at evalExp (ej2-base.es5.js:6798) at compile$1 (ej2-base.es5.js:6786) at Object.Engine.compile (ej2-base.es5.js:6901) at compile$$1 (ej2-base.es5.js:6866) at templateCompiler (ej2-grids.es5.js:303) at new Column (ej2-grids.es5.js:150) at prepareColumns (ej2-grids.es5.js:343) at GridComponent.Grid.render (ej2-grids.es5.js:9416) at GridComponent.Component.appendTo (ej2-base.es5.js:5009) at eval (component-base.js:40)ERROR TypeError: Cannot read property 'getPanel' of undefined at GridComponent.Grid.getContent (ej2-grids.es5.js:9848) at Render.refreshDataManager (ej2-grids.es5.js:4684) at Render.refresh (ej2-grids.es5.js:4665) at GridComponent.Grid.extendedPropertyChange (ej2-grids.es5.js:9723) at GridComponent.Grid.onPropertyChanged (ej2-grids.es5.js:9614) at GridComponent.Base.dataBind (ej2-base.es5.js:1111) at GridComponent.Component.dataBind (ej2-base.es5.js:5018) at messageHandler (ej2-base.es5.js:29) at ZoneDelegate.invokeTask (zone.js:421) at Object.onInvokeTask (core.js:4724)Could you please take a look into it ?Thanks.

Venkatesh Ayothi Raman · Answer

Hi Ananya, Thanks for the update. We were unable to reproduce the reported issue at our end while using latest version(v16.1.30) and we have prepa0red a sample for your convenience which can be referred from following link, Sample: https://plnkr.co/edit/mFugm8uE8Lqns7bcCcss?p=preview Code example:

If you still face the same issue, then could you please share the following details? 1) Share the issue reproducing scenario. 2) Share the issue reproduced sample. 3) If sample is not possible then please modified the given sample as issue reproducible. It would be helpful for us to find the problem and provide the better solution as earliest. Regards, Venkatesh Ayothiraman.

Brijesh · Answer

I am also facing the same problem. Did you found solution for it?Error: str.replace is not a function

Ananya Juhi · Answer

Hi Brijesh,I don't know if this is a solution, but I just deleted the whole "@syncfusion module" from my node modules folder and npm installed the ej-grid package with the latest version and everything worked fine for me.Try this. Hope you overcome your problem. :-)

Brijesh · Answer

Thanks Ananya,I am using "@syncfusion/ej2-ng-grids": "^16.1.37". Do I need to install ej-grid or ej2-ng-grids.

Ananya Juhi · Answer

Hi,If you are using the latest version of the grid(version ^16) then you need to install this npm install @syncfusion/ej2-ng-grids --save

Brijesh · Answer

Again ThanksBut still I am facing same issue. I removed syncfusion module and again installed. Can you let me know which version of ejs-grid you are using.

Ananya Juhi · Answer

HiI am using the version 16.1.33.Remove everything of syncfusion from your project and install the grid freshly.

Brijesh · Answer

Can you please share some sample code. Or Is there any other configuration which you did at your end?

Ananya Juhi · Answer

Hi,There is no sample code for it and the no extra configurations also. Why don't you try in a fresh project and see if it works or not.

Venkatesh Ayothi Raman · Answer

Hi Brijesh, 

Thanks for using Syncfusion products. 

This issue reproduced when we are using different versions for different modules or duplicate modules installed. Please kindly check whether you are using the same version for all @syncfusion modules and we suggest you remove/delete the @Syncfusion folder in node modules as well as package.lock.json file. Now, you can again install the Syncfusion package module from the following command to resolve this issue, 
To install Grid packages using below command. 

npm install @syncfusion/ej2-ng-grids --save 

 Help documentation: https://ej2.syncfusion.com/16.1.37/angular/documentation/grid/getting-started.html 

Please let us know if you have any further assistance on this. 


Regards, 
Venkatesh Ayothiraman.

Brijesh · Answer

Thanks Ananya and Venkatesh for your support. Now this is working fine.

Balaji Sekar · Answer

Hi  Brijesh, 

Thanks for your update. We are happy that your issue has been resolved. 

Please let us know if have any queries. 

Regards, 
Balaji S.

Brijesh · Answer

Hi Brijesh, 

Thanks for using Syncfusion products. 

This issue reproduced when we are using different versions for different modules or duplicate modules installed. Please kindly check whether you are using the same version for all @syncfusion modules and we suggest you remove/delete the @Syncfusion folder in node modules as well as package.lock.json file. Now, you can again install the Syncfusion package module from the following command to resolve this issue, 
To install Grid packages using below command. 

npm install @syncfusion/ej2-ng-grids --save 

 Help documentation: https://ej2.syncfusion.com/16.1.37/angular/documentation/grid/getting-started.html 

Please let us know if you have any further assistance on this. 


Regards, 
Venkatesh Ayothiraman. Hi Venkatesh,This approach worked while building in windows, but when we try same approach in Linux its not working, issue still exists.

Pavithra Subramaniyam · Answer

Hi Brijesh, 
 
For updating to latest Syncfusion npm package, please refer the steps provided in the below documentation. 
 
Documentation: https://ej2.syncfusion.com/angular/documentation/common/how-to/update-npm-package/ 
 
Please get back to us if you have any concern. 
 
Regards, 
Pavithra S.

Brijesh · Answer

Hi Pavithra,We have tried the approach from link provided, now we can see below mentioned new error while development build it self.ERROR in node_modules/@syncfusion/ej2-splitbuttons/src/split-button/split-button.d.ts(85,5): error TS2424: Class 'DropDownButton' defines instance member function 'click', but extended class 'SplitButton' defines it as instance member property.

Vinoth Kumar Sundara Moorthy · Answer

Hi Brijesh,  
 
Good day to you.  
 
We have validated your reported issue and we can replicate it. We have created defect report “Name conflict issue when function, property having same name in Dropdown button” and you can track the status of this defect using below link from our feedback portal. 
 
https://www.syncfusion.com/feedback/6782/name-conflict-issue-when-function-property-having-same-name-in-dropdown-button 
 
The fix for this issue will be included in our upcoming patch release and we will inform you once this release has been rolled out. We appreciate your patience until then.  
 
Regards,  
Vinoth Kumar S

Vinoth Kumar Sundara Moorthy · Answer

Hi Brijesh, 
 
Good day to you. 
 
We are glad to announce that our Essential JavaScript 2 patch release (v17.1.51) has been rolled out successfully and in this release, we have added the fix for issue “Name conflict occurs when function and property having same name in DropDownButton”. Now you can update latest package to resolve this issue in your end.  
 
Regards, 
Vinoth Kumar S