Add link in Angular grid

[vin]

I am trying to add a link for a grid column.

When i add template, i always get error, am i missing any reference?

 <ejs-grid #gridPortfolios [dataSource]='pGridData' [allowPaging]='true' [allowSorting]='true'

                    [pageSettings]='pageOptions' [allowExcelExport]='true' [allowFiltering]='true'

                    [filterSettings]='filterOptions'>

                    <e-columns>

                        <e-column field='name' headerText='Portfolio Name' textAlign='Left' width=150 >

                            <ng-template #template let-data> 

                                <a rel='nofollow' rel='nofollow' href="#">{{pGridData.name}}</a> 

                               </ng-template> 

                          

                        </e-column>

                        <e-column field='programs' headerText='Programs' width=90></e-column>

                        <e-column field='projects' headerText='Projects' width=90></e-column>

                        <e-column field='status' headerText='Status' textAlign='Left' format='' width=90>

                        </e-column>

                        <e-column field='totalBudget' headerText='Total Budget' format='C2' width=120></e-column>

                        <e-column field='priority' headerText='Priority' width=120></e-column>

                        <e-column field='resources' headerText='Resources' width=120></e-column>

                    </e-columns>

                </ejs-grid>

core.js:4002 ERROR TypeError: Cannot read property 'getPanel' of undefined at GridComponent.push../node_modules/@syncfusion/ej2-grids/src/grid/base/grid.js.Grid.getContent (grid.js:1418) at Render.push../node_modules/@syncfusion/ej2-grids/src/grid/renderer/render.js.Render.refreshDataManager (render.js:221) at GridComponent.<anonymous> (render.js:147) at GridComponent.push../node_modules/@syncfusion/ej2-angular-grids/node_modules/@syncfusion/ej2-angular-base/src/component-base.js.ComponentBase.trigger

[Balaji Sekar]

Hi Vin, 

Greetings from the Syncfusion support. 

We evaluated your query with the information provided and found that problem is caused by the Grid dataSource reference variable used directly in the Grid column template. We cannot access JSON object(or Array of Object) details in "ng-template" in the Grid column. Since we recommend that you use the "let" attribute in the ng-template Now we can bind the Grid's column value using ng-template. For more details please refer to the definition and sample code below. 

[app.component.html] 

  <ejs-grid [dataSource]='pGriddata' allowPaging='true' [pageSettings]='pageSettings'> 

        <e-columns> 

            <e-column field='OrderID' headerText='Order ID' width='120' textAlign='Right'></e-column> 

            <e-column field='CustomerName' headerText='Customer Name' width='150'> 

               <ng-template #template let-data>  

                                <a rel='nofollow' rel='nofollow' href="#">{{data.CustomerName}}</a>  

                               </ng-template>  

            </e-column> 

            <e-column field='OrderDate' headerText='Order Date' width='130' format="yMd" textAlign='Right'></e-column> 

            <e-column field='Freight' headerText='Freight' width='120' format='C2' textAlign='Right'></e-column> 

            <e-column field='ShippedDate' headerText='Shipped Date' width='130' format="yMd" textAlign='Right'></e-column> 

            <e-column field='ShipCountry' headerText='Ship Country' width='150'></e-column> 

        </e-columns> 

    </ejs-grid> 

Sample link: https://stackblitz.com/edit/angular-rrwh2h-8rguhx 

  

For your reference, we have shared a ng-template with typed variable details in below link 

https://stackoverflow.com/questions/55458421/ng-template-typed-variable 

Please get back to us, if you need further assistance. 

Regards, 

Balaji Sekar

[vin]

Not sure why, but it is still NOT working

I kept only template with grid to simplify

 <ejs-grid [dataSource]='pGriddata' allowPaging='true' >

                    <e-columns>

                       

                        <e-column field='name' headerText='Customer Name' width='150'>

                           <ng-template #template let-data> 

                                            <a rel='nofollow' rel='nofollow' href="#">test</a> 

                                           </ng-template> 

                        </e-column>

                       </e-columns>

                </ejs-grid>

ERROR TypeError: str.match is not a function

    at evalExp (template.js:71)

    at compile (template.js:58)

    at Object.push../node_modules/@syncfusion/ej2-base/src/template-engine.js.Engine.compile (template-engine.js:130)

    at compile (template-engine.js:21)

    at templateCompiler (util.js:200)

    at new Column (column.js:157)

    at prepareColumns (util.js:257)

    at GridComponent.push../node_modules/@syncfusion/ej2-grids/src/grid/base/grid.js.Grid.render (grid.js:767)

    at GridComponent.push../node_modules/@syncfusion/ej2-base/src/component.js.Component.appendTo (component.js:134)

    at component-base.js:114

[Balaji Sekar]

Hi Vin, 

Query : Str.match is not a function. 

 

We have validated the provided information and tried to reproduce the problem at our end but we are not able to reproduce it and we suspect that the duplicate package might be cause of the problem so could you please check and ensure whether the syncfusion folder contains  duplicate packages or not. 

 

If  the syncfusion contains duplicate packages then we suggest you to remove the package-lock.json file and install the packages again to resolve the problem. 

 

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

 

Regards, 

Balaji Sekar 

[vin]

Thanks

Those commands in the link fixed the issue

[Balaji Sekar]

Hi Vin, 

 

We glad that your issue has been fixed.  

  

Please get back to us if you require further other assistance from us. 

 

Regards, 

Balaji Sekar 

[Steve Hampton]

How do I add a hyperlink to a grid cell programmatically without the use of a template?

[Balaji Sekar]

Hi Steve, 

 

Query : How do I add a hyperlink to a grid cell programmatically without the use of a template? 

 

To achieve the above requirement we have used the queryCellInfo event. In this event we can customize the grid cell UI, so we have added the hyperlink to CustomerName column’s cell.  

Please refer the below code example and sample for more information. 

[app.component.ts] 

  queryCellInfo(args) { 

    if (args.column.field == "CustomerName") { 

      var aEle = document.createElement("a"); 

      aEle.rel='nofollow' href = "ej2.syncfusion.com"; 

      aEle.innerText = args.data["CustomerName"]; 

      args.cell.innerText = ""; 

      args.cell.appendChild(aEle); 

    } 

  } 

Sample link: https://stackblitz.com/edit/angular-j6f1nr-ssmyjk?file=app.component.ts  

 

Help Documentation: https://ej2.syncfusion.com/angular/documentation/api/grid/#querycellinfo  

  

Please get back to us, if you need further assistance. 

Regards, 

Balaji Sekar