RadLinkButton + RadButton and RenderMode

[Kjell]

 Have problems with the icons on the RadLinkButton when using RadButton on the same page. For the icons to display on each button, I must put RenderMode to Lightweight on RadButton. See attached Pictures...

 

<div id="HeadCell" class="table">
    <div class="tr">
        <div class="td" style="vertical-align: top; padding-left: 6px; padding-top: 2px;">
            <telerik:RadLinkButton ID="rbBack" Skin="Black" Text="Tillbaka" NavigateUrl="~/admin/admin_start.aspx" runat="server">
                <Icon Url="~/admin/images/buttons/btn_tillbaka.png" Width="20" />
            </telerik:RadLinkButton>
            <telerik:RadLinkButton ID="rbNewPage" Skin="Black" Text="Ny huvudsida" NavigateUrl="~/admin/newpage/default.aspx" runat="server">
                <Icon Url="~/admin/images/buttons/btn_nysida.png" Width="20" />
            </telerik:RadLinkButton>
            <telerik:RadLinkButton ID="rbNewSubPage" Skin="Black" Text="Ny undersida" NavigateUrl="~/admin/newsubpage/default.aspx" runat="server">
                <Icon Url="~/admin/images/buttons/btn_nysubsida.png" Width="20" />
            </telerik:RadLinkButton>
            <telerik:RadLinkButton ID="rbLogOut" Skin="Black" Text="Logga ut" NavigateUrl="~/admin/logout/default.aspx" runat="server">
                <Icon Url="~/admin/images/buttons/btn_loggaut.png" Width="20" />
            </telerik:RadLinkButton>
        </div>
        <div class="td" style="width: 100px; padding: 0px; padding-right: 6px; text-align: right;"><asp:HyperLink ID="HlStartPage" ImageUrl="~/admin/images/buttons/btn_home.png" NavigateUrl="~/default.aspx" Target="_top" ToolTip="www.junis.org" CausesValidation="false" runat="server" /></div>
    </div>
</div>

[Kjell]

Applies telerik:RadFileExplorer too. Must enter RenderMode="Lightweight" on RadFileExplorer for the icons get right on the RadLinkButton

[Ianko]

Hi Kjell,

The described behavior with RadLinkButton is expected. This is noted in these materials:

• FileExplorer Render Modes—http://docs.telerik.com/devtools/aspnet-ajax/controls/fileexplorer/mobile-support/render-modes;
  
  
• RadButton Render Modes—http://docs.telerik.com/devtools/aspnet-ajax/controls/button/mobile-support/render-modes;
  
  
• RadLinkButton Render Modes—http://docs.telerik.com/devtools/aspnet-ajax/controls/linkbutton/mobile-support/render-modes.

The reason for this behavior is that the LinkButton is always rendered with Lightweight rendering, and Classic is not supported with this control. Thus, rendering any other control that is RadButton or RadButton is its child control (e.g., RadFileExplorer) with Classic rendering links the CSS for this render mode and breaks the layout of RadLinkButton. 

The only possible solution for that is to switch these controls (RadButton and RadFileExplorer) to Lightweight rendering. 

Regards,
Ianko
Telerik