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

Font icon not showing when command name is present

3 Answers 58 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.
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/.

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