hyperlink for first column value if we have dynamic field names.

[Bhavya Harini]

Hi,

I need to add a hyperlink for first column value if we have dynamic field names. please check below sample code

<ejs-grid #grid id='Grid' [dataSource]='rowData'>

  <e-columns>

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

      <e-column [field]="column.fieldName" [headerText]="column.headerName" [validationRules]="{ required: true}">

      </e-column>

    </ng-template>

  </e-columns>

</ejs-grid>

I have above code,How can I add hyperlink for 1st column in it

Regards,

Bhavya

[Rajapandiyan Settu]

Hi Bhavya, 

 

Greetings from syncfusion support. 

 

Query : I need to add a hyperlink for first column value if we have dynamic field names. 

 

We have validated the provided details. By using index parameter of *ngFor, we have added a hyperlink only in the first column with the help of column template. Please refer the below code example and sample for more information. 

 

 

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

  <e-columns> 

    <ng-container *ngFor="let column of columns; index as i"> 

// rendered only for the 0^th index 

      <e-column *ngIf=" i == 0;else Show" [field]="column.field" [width]="column.width"> 

// added a hyper link using column template 

        <ng-template #template let-data> 

          <div> 

            <a rel='nofollow' href="">hyplnk</a> 

          </div> 

          <span style="color:red"> {{data[column.field]}}</span> 

        </ng-template> 

      </e-column> 

// rendered for other index values (not for 0^th index) 

      <ng-template #Show> 

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

        </e-column> 

      </ng-template> 

    </ng-container> 

  </e-columns> 

</ejs-grid> 

 

 

Sample : https://stackblitz.com/edit/angular-udaqpk-i2c5et?file=app.component.html 

 

UG : https://ej2.syncfusion.com/angular/documentation/grid/columns/#using-condition-template          

 

Please get back to us if you need further assistance on this. 

 

Regards, 

Rajapandiyan S