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. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Grid column array values as link

Thread ID:

Created:

Updated:

Platform:

Replies:

148776 Nov 4,2019 06:55 AM UTC Nov 4,2019 11:55 AM UTC Angular - EJ 2 3
loading
Tags: Grid
Samir Modi
Asked On November 4, 2019 06:55 AM UTC

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 [Syncfusion]
Replied On November 4, 2019 07:31 AM UTC

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. 


Samir Modi
Replied On November 4, 2019 08:15 AM UTC

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 [Syncfusion]
Replied On November 4, 2019 11:55 AM UTC

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. 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon