How do I show an icon in a datagrid column?

[Dustin Smith]

I'm looking to display a clickable icon for content in a col. I cannot get the icon to show up. I've tried everything I've seen on your site and samples. What am I missing?

<ejs-grid id="Grid" dataSource="Model" allowPaging="true" queryCellInfo="queryCellInfo">

        <e-grid-pagesettings pageCount="5"></e-grid-pagesettings>

        <e-grid-columns>

            <e-grid-column field="Created" headerText="Date" textAlign="Right" format="yMd" width="120"></e-grid-column>

            <e-grid-column field="Username" headerText="Username" width="150"></e-grid-column>

            <e-grid-column field="DisplayName" headerText="Full Name" width="130"></e-grid-column>

            <e-grid-column field="WorkStatus" headerText="Status" width="120"></e-grid-column>

            <e-grid-column headerText="Summary" template="#template" width="140"></e-grid-column>

        </e-grid-columns>

    </ejs-grid>

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

    <a rel='nofollow' href="><span class="e-icons e-search"></span></a>

</script>

Thanks in advance.

[Rajapandi Ravi]

Hi Dustin, 

Greetings from syncfusion support 

From your update, we could see that you like to display the clickable icon in the Grid Column Template. We have checked your shared information and found that your anchor tag rel='nofollow' href quotes were not closed properly. Since the syntax was wrong, we suspect this is the cause of the problem. And if you like to display the custom icon you need to define the content for that icon in CSS. Please refer to the below code example and sample for more information. 

Index.cshtml 

 

<div class="control-section"> 

    <ejs-grid id="Grid" dataSource="ViewBag.dataSource" allowPaging="true" > 

        <e-grid-pagesettings pageCount="5"></e-grid-pagesettings> 

        <e-grid-columns> 

            .  .  .  .  .  .  .  . 

            .  .  .  .  .  .  .  . 

           <e-grid-column field="ShipCountry" template="#templateAccoes" headerText="Ship Country" editType="dropdownedit" width="140"></e-grid-column> 

        </e-grid-columns> 

    </ejs-grid> 

</div> 

 

<script id="templateAccoes" type="text/x-template"> 

    <a rel='nofollow' href=https://en.wikipedia.org/wiki/${ShipCountry}><span class="e-icons e-Reply"></span></a> 

</script> 

 

<style> 

    .e-Reply:before { 

        content: "\e815"; 

    } 

</style> 

Sample: https://www.syncfusion.com/downloads/support/forum/167716/ze/167716388835389.zip 

Screenshot: 

 

You can use custom icons as you want. Please refer the below documentation for more information.  

Icons Documentation: https://ej2.syncfusion.com/angular/documentation/appearance/icons/#material 

Regards,
Rajapandi R

[Padmini Ramamurthy]

Hi Dustin, 

As per your request, we have removed your emails from this public forum thread and created a new incident under your Direct trac account to follow up with this query. We suggest you follow up with the incident for further updates. Please log in using the below link.     

https://www.syncfusion.com/account/login    

Regards,  

Padmini