How to remove underline from the RadButton LinkButton Span text?

[HENRY]

Hi

I have a RadButton with  ButtonType="LinkButton".

I want remove the link from Head Office by following code.

ASPX

<telerik:GridTemplateColumn HeaderText="Branch" HeaderStyle-Width="10%" DataType="System.String" UniqueName="Branch" DataField="Branch">
                                    <ItemTemplate>
                                        <telerik:RadButton ID="btnBranch" Width="100%" runat="server" Text='<%#Eval("Branch") %>' ButtonType="LinkButton" ToggleType="CustomToggle" 
                                            Font-Underline="true" BorderStyle="None" CommandName="ViewBranchDtls" CommandArgument='<%#Eval("Branch") %>'>
                                        </telerik:RadButton>
                                        <asp:HiddenField ID="hdBranch" runat="server" Value='<%#Eval("Branch") %>' />
                                    </ItemTemplate>
                                </telerik:GridTemplateColumn>

CS

protected void gvReport_ItemDataBound(object sender, GridItemEventArgs e)
    {
        try
        {
            if (e.Item is GridDataItem)
            {
                GridDataItem item = e.Item as GridDataItem;
                if ((item.FindControl("btnBranch") as RadButton).Text == "HEAD OFFICE" )
                {
                    (e.Item.FindControl("btnBranch") as RadButton).Style.Add("pointer-events", "none");
                    // here need to remove the underline
                }
            }
        }
        catch (Exception ex)
        {
        }
        finally
        {
        }
    }

sample Extracted HTML

<td>
                                        <a id="ctl00_ContentPlaceHolder1_gvReport_ctl00_ctl12_btnBranch" class="RadButton RadButton_Default rbLinkButton" href="javascript:void(0)" style="display:inline-block;border-style:None;text-decoration:underline;width:100%;pointer-events:none;text-decoration:none;"><span class="rbText" style="text-decoration:underline;width:100%;padding-left:0;padding-right:0;text-align:center;">HEAD OFFICE</span><input id="ctl00_ContentPlaceHolder1_gvReport_ctl00_ctl12_btnBranch_ClientState" name="ctl00_ContentPlaceHolder1_gvReport_ctl00_ctl12_btnBranch_ClientState" type="hidden" autocomplete="off"></a>
                                        <input type="hidden" name="ctl00$ContentPlaceHolder1$gvReport$ctl00$ctl12$hdBranch" id="ctl00_ContentPlaceHolder1_gvReport_ctl00_ctl12_hdBranch" value="HEAD OFFICE">
                                    </td>

I notice Telerik will auto generate SPAN with underline.

How to remove the underline?

Thanks.

fsloke

[Doncho]

Hi,

You can use the ItemDataBound event to add a custom CSS class to the buttons whose styles need to be customized. Afterward you use that class a selector for these buttons and apply custom CSS to override the default appearance of the internal span element:

For instance:

protected void gvReport_ItemDataBound(object sender, GridItemEventArgs e)
{
    if (e.Item is GridDataItem)
    {
        GridDataItem item = e.Item as GridDataItem;
        var branchButton = item.FindControl("btnBranch") as RadButton;

        if (branchButton.Text == "HEAD OFFICE")
        {
            branchButton.Style.Add("pointer-events", "none");
            branchButton.CssClass = "nondecoratedLinkButton";
        }
    }
}

CSS

.nondecoratedLinkButton .rbText{
    text-decoration:none !important;
}

Please give it a try and let me know how it goes.

Regards,
Doncho
Progress Telerik