This is a migrated thread and some comments may be shown as answers.

Font icon not showing when command name is present

3 Answers 823 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Scott
Top achievements
Rank 2
Scott asked on 05 Apr 2021, 03:11 PM

I have a RadGrid that I want to show a Font Awesome icon as a button. The column is set as a GridButtonColumn ButtonType="FontIconButton" with the button css class set. When the CommandName is blank the icon shows. When I assign the value CommandName="GetvCard" the grid shows the text "GetvCard" and not the icon. I don't have any code attached to the button yet as I was testing the UI only. Full grid markup:

 <telerik:RadGrid ID="RadGrid1" runat="server" AllowSorting="True" DataSourceID="ObjectDataSource1" AllowFilteringByColumn="true" EnableLinqExpressions="false">
<MasterTableView AutoGenerateColumns="False" DataSourceID="ObjectDataSource1">
<Columns>
<telerik:GridButtonColumn ButtonType="FontIconButton" ButtonCssClass="fad fa-address-card xgrid blue" CommandName="GetvCard" UniqueName="GetvCard" CommandArgument="GetvCard">
</telerik:GridButtonColumn>
<telerik:GridBoundColumn DataField="MYNAME" FilterControlAltText="Filter MYNAME column" HeaderText="Name" ReadOnly="True" SortExpression="MYNAME" UniqueName="MYNAME">
<FilterTemplate>
<telerik:RadTextBox ID="RadTextBox1" runat="server" ClientEvents-OnBlur="NameSearch" EmptyMessage="Name Search"></telerik:RadTextBox>
<telerik:RadScriptBlock ID="RadScriptBlock1" runat="server">
<script type="text/javascript">
function NameSearch(sender, args) {
var tableView = $find("<%# TryCast(Container,GridItem).OwnerTableView.ClientID %>");

var mystring = sender.get_value();
tableView.filter("MYNAME", mystring, "Contains");
}
</script>
</telerik:RadScriptBlock>
</FilterTemplate>
</telerik:GridBoundColumn>
<telerik:GridBoundColumn DataField="DSCRIPTN" AllowFiltering="false" FilterControlAltText="Filter DSCRIPTN column" HeaderText="Title" SortExpression="DSCRIPTN" UniqueName="DSCRIPTN">
</telerik:GridBoundColumn>
<telerik:GridBoundColumn DataField="EXTENSION" AllowFiltering="false" FilterControlAltText="Filter EXTENSION column" HeaderText="Extension" ReadOnly="True" SortExpression="EXTENSION" UniqueName="EXTENSION">
</telerik:GridBoundColumn>
<telerik:GridBoundColumn DataField="CELLNO" AllowFiltering="false" FilterControlAltText="Filter CELLNO column" HeaderText="Mobile No." ReadOnly="True" SortExpression="CELLNO" UniqueName="CELLNO">
</telerik:GridBoundColumn>
<telerik:GridBoundColumn DataField="INET1" AllowFiltering="false" FilterControlAltText="Filter INET1 column" HeaderText="Email" SortExpression="INET1" UniqueName="INET1">
</telerik:GridBoundColumn>
</Columns>
</MasterTableView>
</telerik:RadGrid>

Am I missing something?

Scott


3 Answers, 1 is accepted

Sort by
0
Scott
Top achievements
Rank 2
answered on 05 Apr 2021, 03:31 PM
Added screen clips for reference
0
Scott
Top achievements
Rank 2
answered on 07 Apr 2021, 03:59 PM
I went with a Template column and a push button with some CSS to get the result. The issue is resolved for me.
Donald McLean
Top achievements
Rank 2
commented on 05 May 2022, 06:45 PM

Could you post a code snippet showing your solution?
0
Doncho
Telerik team
answered on 08 Apr 2021, 08:15 AM

Hi Scott,

I am glad to hear you have found a solution to the issue.

We have created a blog post on this topic, so you may find it useful to review it - 4 Ways to Embed Font Awesome in Telerik UI for ASP.NET AJAX Controls. The approach demonstrated in Use the pseudo-elements to Change the Built-in Icons in Command Buttons in RadGrid section can be easily be adjusted to work for a GridButtonColumn.

Kind regards,
Doncho
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

Donald McLean
Top achievements
Rank 2
commented on 05 May 2022, 06:27 PM

I am having an issue trying to change the icon of GridEditCommandColumn and GridButtonColumn to use font awesome icons, I am using font awesome version 4.6.1 and telerik controls version 2021.1.224.45, I tried using the link above with no success any help would be greatly appreciated

Doncho
Telerik team
commented on 10 May 2022, 10:54 AM

Hi Donald,

I have attached a sample with RadGrid, demonstrating how you can use FontAwesome icons in GridEditCommandColumn and GridButtonColumn.

Styling the GridEditCommandColumn is achieved as per the instructions in the Use the pseudo-elements to Change the Built-in Icons in Command Buttons in RadGrid section in the blog post I have shared earlier.

Styling the ButtonColumn is similar to styling a Label, the way it is shown in the Leverage the CssClass Property to Bring in Font Icon in RadLabel section in the same blog post.

I hope you will find this information helpful.

Tags
Grid
Asked by
Scott
Top achievements
Rank 2
Answers by
Scott
Top achievements
Rank 2
Doncho
Telerik team
Share this question
or