We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

Grid column array values as link

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

3 Replies

PS Pavithra Subramaniyam Syncfusion Team November 3, 2019 11:31 PM

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.  
  
 
 
Please get back to us if you need further assistance on this.  
 
Regards, 
Pavithra S. 



SM Samir Modi November 4, 2019 12:15 AM

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


PS Pavithra Subramaniyam Syncfusion Team November 4, 2019 03:55 AM

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> 
 
  
 
 
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)}}”) 
 
 
 
Regards, 
Pavithra S. 


Loader.
Live Chat Icon For mobile
Up arrow icon