Add link in Angular grid

Question

I am trying to add a link for a grid column.When i add template, i always get error, am i missing any reference?

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 · Accepted Answer

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

Balaji Sekar · Answer

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]

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 · Answer

Not sure why, but it is still NOT workingI kept only template with grid to simplify

test

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

vin · Answer

ThanksThose commands in the link fixed the issue

Balaji Sekar · Answer

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 · Answer

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

Balaji Sekar · Answer

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.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