Custom Icon FontAweresome with link TreeGrid

[Raúl Sánchez Villena]

Hi!

I need to implement an icon with some link into a treegrid and when the  user click in the icon redirect to the link.

Thanks.

[Lokesh Arjunan]

Hi Raul 

 

We have validated your query and you can achieve this by rendering icon inside <a> tag using column template. We have shared code snippet and attached sample for your reference. In this sample you can click the icon which will redirect to the other page.  

 

Sample: https://www.syncfusion.com/downloads/support/forum/169548/ze/CSG-289377730.zip 

 

To know more about columnTemplate refer the below documentation link: 

 

https://help.syncfusion.com/aspnet/treegrid/columns#column-template 

 

Code Snippet: 

 

Referring icons stylesheet: 

<link rel="stylesheet" rel='nofollow' href=http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css> 

 

 

Icon rendering inside <a> tag: 

<script type="text/x-jsrender" id="columnTemplate"> 

<div style="display:inline-block;position:relative;left:10px;top:1px"> 

            <a rel='nofollow' href=https://www.wikipedia.com> <i class="fa fa-dribbble fa-4x"></i></a> 

</div> 

</script> 

 

 

Referring columnTemplate in Columns Property: 

  columns: [ 

                ………, 

               { headerText: "Resource", isTemplateColumn: true, templateID: "columnTemplate", textAlign: "center" }, 

               ………, 

               ………             

                ],       

 

 

 

 

Regards, 

Lokesh