Hyperlink issue in ejs grid

[PH Harish]

I am working on ejs-grid, am getting an issue of hyperlink

1). If I use the filed name as static it is working fine please refer below code.

 <ejs-grid [dataSource]='data' [allowPaging]="true" [allowSorting]="true" [pageSettings]="pageSettings"  allowResizing="true">
    <e-columns>
      <e-column field='Ssoid' headerText='Ssoid' width=90 [customAttributes]='customAttributes'></e-column>
      <e-column field='Name' headerText='Name' width=120 [customAttributes]='customAttributes'>
        <ng-template #template let-data>
          <a rel='nofollow' href="#">{{data.Name}}</a>
        </ng-template>
      </e-column>
      <e-column field='CustomerNo' headerText='Customer #' width=120 [customAttributes]='customAttributes'>
        <ng-template #template let-data>
          <a rel='nofollow' href="#">{{data.CustomerNo}}</a>
        </ng-template>
      </e-column>
    </e-columns>

  </ejs-grid>

2). But if I use the field as dynamic I am not able to get a hyperlink please refer the below code 

<ejs-grid [dataSource]='data' [allowPaging]="true" [allowSorting]="true" [pageSettings]="pageSettings"
            [height]="350" width="2500"
            allowResizing="true">
    <e-columns>   
      <e-column *ngFor="let column of aoColumns"
                [field]="column.mData"
                [headerText]="column.sTitle"
                [visible]='column.bVisible'
                [customAttributes]='customAttributes' width=500>
        <ng-template #template let-data *ngIf="column.mData == 'TalkingTrack'">
          <a rel='nofollow' href="#" class="Talking_track"></a>
        </ng-template>
        <ng-template #template let-data *ngIf="column.mData == 'Name'">
          <a rel='nofollow' href="#">{{data.Name}}</a>
        </ng-template>
        <ng-template #template let-data *ngIf="column.mData == 'CustomerNo'">
          <a rel='nofollow' href="#">{{data.CustomerNo}}</a>
        </ng-template>
        <ng-template #template let-data *ngIf="column.mData == 'CaseId'">
          <a rel='nofollow' href="#">{{data.CaseId}}</a>
        </ng-template>
      </e-column>
    </e-columns>

  </ejs-grid> 

Attachment: Error_Screen_shot_cb0d70e9.7z

[Rajapandi Ravi]

Hi Harish, 

Greetings from syncfusion support 

We have analyzed your query and based on your requirement we have prepared a sample and rendered the Grid columns dynamically with template. It works fine from our end. We are able to get a hyperlink in template column. Please refer the below code example and sample for more information. 

Default.html 

 

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

            <e-columns> 

      <ng-template #template  ngFor let-column [ngForOf]="columns"> 

             <e-column [field]="column.field"  

                       [headerText]="column.headerText" 

                       [allowEditing]="column.allowEditing" 

                       [isPrimaryKey]="column.isPrimaryKey != null ? column.isPrimaryKey : null" 

                       [width] = "column.width" > 

            </e-column> 

       </ng-template> 

    </e-columns> 

    </ejs-grid> 

     

<ng-template let-data #template2> 

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

     

</ng-template> 

Default.component.ts 

 

export class DefaultComponent implements OnInit { 

  public data: Object[] = []; 

  public gridData: any; 

  public template: any; 

    @ViewChild('template2') 

  public temp2: NgModel; 

  @ViewChild('grid') 

  public grid: Grid; 

  public columns: any; 

  ngOnInit(): void { 

 

    this.data = employeeData; 

    this.columns = [{ field: "EmployeeID", isPrimaryKey: "true", headerText: "Employee ID", width: "90" }, 

    { field: "FirstName", headerText: "First Name", width: "90" }, 

    { field: "LastName", headerText: "Last Name", width: "90", allowEditing: false }, 

    { field: "Country", headerText: "Country", width: "90" }] 

  } 

 

  ngAfterViewInit(): void { 

    (this.grid.getColumns()[2].template as any) = this.temp2; 

  } 

 

} 

 

We need to initialize the template when initialize process completed (due to avoid time delay to initialize the  template) 

Sample: https://stackblitz.com/edit/angular-ninkrn-9xoh7j?file=default.component.ts 

Regards, 

Rajapandi R