Grid column array values as link

[Samir Modi]

Hi Team,

I have a requirement to show a particular column values as hyperlink( comma separated since column value is an array). For ex - lets assume I have a 'Applicable Countries' column and the first row in the grid has this column value as 'Canada, US' . Now both these values should be hyperlink and on click of each it should call its respective api and open that in new tab.

Thanks,

Samir

[Pavithra Subramaniyam]

Hi Samir, 

 

Thanks for contacting Syncfusion support. 

 

You can achieve your requirement by using the “Column Template” feature of Grid. Please refer to the below code example, documentation link and sample link for more information. 

 

[code example]  

<div class="control-section">  

        <ejs-grid [dataSource]='data' height='350'>  

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

                <div>  

                    <a rel='nofollow' href="#">{{ data.CustomerName }}</a>    //add your link here instead of #  

                </div>  

                </ng-template>  

            </e-column>  

        ....  

        ....  

       </e-columns>  

    </ejs-grid>  

</div >  

  

We have prepared a simple sample based on your requirement. Please find the sample in below documentation and sample link.  

  

Documentation: https://ej2.syncfusion.com/angular/documentation/grid/columns/#column-template 

 

Sample link       : https://stackblitz.com/edit/angular-vwreu2-qw31pk?file=default.html  

 

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

 

Regards, 

Pavithra S. 

[Samir Modi]

Hi Pavithra,

Thanks for the quick reply. Should field attribute be a part of e-column here? I am getting the fields as is after trying your solution. Also, in your stackBlitz demo, what if I am not aware of number of CustomerIds (the list is dynamic, can be 1, 2 or 5 values).

[Pavithra Subramaniyam]

Hi Samir, 

 

Query#1: Should field attribute be a part of e-column here? I am getting the fields as is after trying your solution. 

 

No, for displaying purpose alone, there is no need to provide the “field” property for template column. But if you want to do any Grid actions like filtering, sorting for that column, then you should provide the field based on which the actions will be performed.  

 

Querey#2: what if I am not aware of number of CustomerIds (the list is dynamic, can be 1, 2 or 5 values). 

 

You can use the “ngfor” to achieve your requirement. Please refer to the below code example, reference link and sample link for more information. 

 

[html] 

<e-columns> 

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

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

              <ng-template #template let-data> 

                <div> 

                <a rel='nofollow' href="#" *ngFor="let custid of data.CustomerID; let i=index">{{custid}}  

                 <span *ngIf="i != data.CustomerID.length-1"> ,</span></a> 

                </div> 

                </ng-template> 

            </e-column> 

</e-columns> 

 

  

Reference : https://angular.io/guide/displaying-data#showing-an-array-property-with-ngfor 

 

Sample      : https://stackblitz.com/edit/angular-vwreu2-xi8d5h?file=default.html 

 

Also you can use your own custom helper to customize the values. Please refer to the below demo link in which we have formatted the date using custom template helper method(“{{format(data.BirthDate)}}”) 

 

https://ej2.syncfusion.com/angular/demos/#/material/grid/row-template 

https://ej2.syncfusion.com/javascript/documentation/common/template-engine/#custom-helper 

 

 

Regards, 

Pavithra S.