ng-template inside ejs-grid

[Ananya Juhi]

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.

<ejs-grid [dataSource]='clientData' [allowSorting]='true' [sortSettings]='initialSort'>

<e-columns>

<e-column field='clientName' headerText='NAME' textAlign='Right' width=120></e-column>

<e-column textAlign="left" width='60' [showInColumnChooser]='false'>

  <ng-template  #template  let-clientData >

<img src="assets/images/delete-icon.svg" class="edit-delete-img" id="img1" (click)="onClickDelete(clientData)">

<img src="assets/images/pencil-icon.svg" class="edit-delete-img" id="img1" (click)="onClickEdit(clientData)">

  </ng-template>

</e-column>

<e-column field='companies.name' headerText='COMPANY' width=120></e-column>

<e-column field='station' headerText='STATION' textAlign='Right' width=90></e-column>

<e-column field='formats.length' headerText='FORMAT' textAlign='Right' width=120></e-column>

<e-column field='markets.length' headerText='MARKET' textAlign='Right'  width=120></e-column>

</e-columns>

</ejs-grid>

[Venkatesh Ayothi Raman]

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, 

<ejs-grid [dataSource]='clientData' [allowSorting]='true' [sortSettings]='initialSort'> 

    <e-columns> 

        <e-column textAlign="left" width='60' [showInColumnChooser]='false'> 

            <ng-template #template let-clientData> 

                <img src="assets/images/delete-icon.svg" class="edit-delete-img" id="img1" (click)="onClickDelete(clientData)"> 

                <img src="assets/images/pencil-icon.svg" class="edit-delete-img" id="img1" (click)="onClickEdit(clientData)"> 

            </ng-template> 

        </e-column> 

        .   .   . 

    </e-columns> 

</ejs-grid> 

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, 

<ejs-grid #grid [dataSource]='clientdata'> 

    <e-columns> 

        <e-column headerText='Employee Image' width='150' textAlign='Center'> 

            <ng-template #template let-data> 

                <div class="image"> 

                    <img src="https://ej2.syncfusion.com/angular/demos/src/grid/images/{{data.EmployeeID}}.png" (click)="onClickDelete(data.EmployeeID)" alt="{{data.EmployeeID}}" /> 

                </div> 

            </ng-template> 

        </e-column> 

         

    </e-columns> 

</ejs-grid> 

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]

Hello Venkatesh,

Thanks for responding. But I think you misunderstood my requirement. The main issue I am facing is after upgrading the <ej-grid> to latest version(16.1.30, <ejs-grid>) , 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]

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: 

<e-column headerText='Employee Image' width='150' textAlign='Center'> 

    <ng-template #template let-clientdata> 

        <div class="image"> 

            <img src="https://ej2.syncfusion.com/angular/demos/src/grid/images/{{clientdata}}.png"  (click)="onClickDelete(clientdata)" /> 

        </div> 

    </ng-template> 

</e-column> 

 

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]

I am also facing the same problem. Did you found solution for it?

Error: str.replace is not a function

[Ananya Juhi]

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]

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]

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]

Again Thanks

But 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]

Hi

I am using the version 16.1.33.

Remove everything of syncfusion from your project and install the grid freshly.

[Brijesh]

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

[Ananya Juhi]

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]

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]

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

[Balaji Sekar]

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]

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]

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]

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]

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]

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