blank buttons appear where images should be

[Charles Forsyth]

Using the latest release of RadGrid for ASP.Net AJAX and Visual Studio 2008 SP1

In design view, I can see images for control buttons like filter and paging.

However, at run-time those images change to blank HTML buttons.

They still work, but it's just ugly.

Any idea what I'm doing wrong?

-Charles

[Guss]

Do you use custom skins?
If yes...which buttons? (CommandItem buttons, page button images, editColumn buttons etc.)

(I had similar issues when moving away from the buildin resources to custom skins, but different buttons have different fixes.)

More details please...

[Charles Forsyth]

Nope. I was using a default skin, everything was default.

Also, I failed to mention that the RadGrid is in a content page used by a MasterPage. I'm not sure if that matters.

The proxy controls are included on the page (RadAjax and AjaxManager)

It looks to me like a bug with RadGrid.

To fix it I just copied the "grid" image folder from the Telerik/Skins install path into my app. Then changed the RadGrid.ImagePath property to point to it.

This isn't exactly the best solution since my site uses Themes. I don't like to hard-code (in declarative syntax) anything that is custom. I want all that define din the Theme folder. Oh well.

[Dimo]

Hello Charles,

Generally, there are three reasons why RadGrid for ASP.NET AJAX may have problems with its buttons:

1) A custom non-embedded skin is used and this skin lacks styles for the new so-called sprite buttons (introduced in Q1 2008) - http://telerik.com/help/aspnet-ajax/css-sprites.html

The solution in this case is either to add the missing styles, or revert to the previous behavior by specifying ImagesPath and using image buttons instead of sprite buttons.

2) In certain scenarios RadGrid might lose its skin during AJAX requests. However, in this case the control will appear completely unstyled, it won't be just the buttons.

3) RadFormDecorator exhibited a negative side effect of spoiling the RadGrid sprite buttons' appearance, but this has been fixed and does not occur in the latest version.


All three issues listed above can be fixed very easily, but from what you are saying, I can surely exclude (1) and (3), so may be it's something related to AJAX? Please provide some more information about this. By the way, a quick and easy thing you can try if you are using AJAX is to set RadGrid's property EnableAjaxSkinRendering to true in Page_Load.

If the issue persists, it will be best if you send us a simple ASPX page, which reproduces you scenario, so that we can take a look and give a prompt advice. Thanks.


Greetings,
Dimo
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.

[Charles Forsyth]

Something else is going on here.

All control image buttons (sort direction, group sort direction, page navigation images, etc.) are displayed as HTML buttons at run-time. But in design view they appear as images and look nice.
 
I simply dragged the RadGrid onto my page and set the datasource and allow paging, sorting, grouping, etc.

Here's the exact declarative markup used in the page...

<%@ Page Title="Service Lines Activity Logs" Language="C#" MasterPageFile="~/MasterPage.Master" AutoEventWireup="true" CodeBehind="ServiceLinesActivity.aspx.cs" Inherits="PIM2.Administration.DataLists.ServiceLinesActivity" %>
<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>
<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder_Header" runat="server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder_OptionalLinks" runat="server">
    <asp:HyperLink ID="HyperLink1" NavigateUrl="~/Administration/DataLists/ManageServiceLines.aspx" runat="server">Manage Service Lines</asp:HyperLink>
</asp:Content>
<asp:Content ID="Content3" ContentPlaceHolderID="ContentPlaceHolder_Body" runat="server">
    <telerik:RadGrid ID="RadGrid1" runat="server" AllowFilteringByColumn="True"
        AllowPaging="True" AllowSorting="True" DataSourceID="SqlDataSource_Logs"
        GridLines="None" ShowGroupPanel="True" Skin="Office2007" PageSize="5">
        <MasterTableView AutoGenerateColumns="False" DataSourceID="SqlDataSource_Logs">
        <RowIndicatorColumn>
        <HeaderStyle Width="20px"></HeaderStyle>
        </RowIndicatorColumn>
        <ExpandCollapseColumn>
        <HeaderStyle Width="20px"></HeaderStyle>
        </ExpandCollapseColumn>
            <Columns>
                <telerik:GridBoundColumn DataField="PersonnelID" DataType="System.Int32"
                    HeaderText="PersonnelID" SortExpression="PersonnelID" UniqueName="PersonnelID">
                </telerik:GridBoundColumn>
                <telerik:GridBoundColumn DataField="PersonnelFullName"
                    HeaderText="PersonnelFullName" ReadOnly="True"
                    SortExpression="PersonnelFullName" UniqueName="PersonnelFullName">
                </telerik:GridBoundColumn>
                <telerik:GridBoundColumn DataField="WindowsLoginName"
                    HeaderText="WindowsLoginName" SortExpression="WindowsLoginName"
                    UniqueName="WindowsLoginName">
                </telerik:GridBoundColumn>
                <telerik:GridBoundColumn DataField="ServiceLineID" DataType="System.Int32"
                    HeaderText="ServiceLineID" SortExpression="ServiceLineID"
                    UniqueName="ServiceLineID">
                </telerik:GridBoundColumn>
                <telerik:GridBoundColumn DataField="ServiceLineName"
                    HeaderText="ServiceLineName" SortExpression="ServiceLineName"
                    UniqueName="ServiceLineName">
                </telerik:GridBoundColumn>
                <telerik:GridBoundColumn DataField="AuditTypeID" DataType="System.Int32"
                    HeaderText="AuditTypeID" SortExpression="AuditTypeID" UniqueName="AuditTypeID">
                </telerik:GridBoundColumn>
                <telerik:GridBoundColumn DataField="AuditTypeName" HeaderText="AuditTypeName"
                    ReadOnly="True" SortExpression="AuditTypeName" UniqueName="AuditTypeName">
                </telerik:GridBoundColumn>
                <telerik:GridBoundColumn DataField="GMTDateLogged" DataType="System.DateTime"
                    HeaderText="GMTDateLogged" SortExpression="GMTDateLogged"
                    UniqueName="GMTDateLogged">
                </telerik:GridBoundColumn>
                <telerik:GridBoundColumn DataField="ChangesXML" HeaderText="ChangesXML"
                    SortExpression="ChangesXML" UniqueName="ChangesXML">
                </telerik:GridBoundColumn>
            </Columns>
        </MasterTableView>
        <ClientSettings AllowDragToGroup="True">
        </ClientSettings>
        <FilterMenu EnableTheming="True">
        <CollapseAnimation Type="OutQuint" Duration="200"></CollapseAnimation>
        </FilterMenu>
    </telerik:RadGrid>
    <asp:SqlDataSource ID="SqlDataSource_Logs" runat="server"
        ConnectionString="<%$ ConnectionStrings:ConnectionString %>"
        SelectCommand="ServiceLinesActivityLog_Select"
        SelectCommandType="StoredProcedure">
        <SelectParameters>
        </SelectParameters>
    </asp:SqlDataSource>
</asp:Content>

I created a new test project and I'm unable to reproduce the problem in the over-simplified test scenario.

I can't figure out why images would not appear, but instead buttons. I assume there must be code (in the Telerik control) that replaces images with button tags if the images can't be found. So that leads to the question why would images not be found?

Am I missing something in my web.config?

Note: other Rad controls (even on the same page) display images just fine.

[Charles Forsyth]

I'm sorry I forgot to mention that while all images appear as buttons, the rest of the control is styled perfectly. So it's not #2

[Charles Forsyth]

Within the same project, I created a simple page that was not hooked up to the master page, and does not use RadAjaxManager.

The code below (no master page, no RadAjax) exibits the exact same symptoms, it displays buttons with no text in them instead of images.

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="test1.aspx.cs" Inherits="PIM2.Administration.DataLists.test1" %>

<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <asp:ScriptManager ID="ScriptManager1" runat="server">
    </asp:ScriptManager>
    <div>
        <telerik:RadGrid ID="RadGrid1" runat="server" AllowFilteringByColumn="True"
            AllowPaging="True" AllowSorting="True" DataSourceID="SqlDataSource1"
            GridLines="None" ShowGroupPanel="True">
<MasterTableView AutoGenerateColumns="False" DataSourceID="SqlDataSource1">
<RowIndicatorColumn>
<HeaderStyle Width="20px"></HeaderStyle>
</RowIndicatorColumn>

<ExpandCollapseColumn>
<HeaderStyle Width="20px"></HeaderStyle>
</ExpandCollapseColumn>
    <Columns>
        <telerik:GridBoundColumn DataField="PersonnelID" DataType="System.Int32"
            HeaderText="PersonnelID" SortExpression="PersonnelID" UniqueName="PersonnelID">
        </telerik:GridBoundColumn>
        <telerik:GridBoundColumn DataField="PersonnelFullName"
            HeaderText="PersonnelFullName" ReadOnly="True"
            SortExpression="PersonnelFullName" UniqueName="PersonnelFullName">
        </telerik:GridBoundColumn>
        <telerik:GridBoundColumn DataField="WindowsLoginName"
            HeaderText="WindowsLoginName" SortExpression="WindowsLoginName"
            UniqueName="WindowsLoginName">
        </telerik:GridBoundColumn>
        <telerik:GridBoundColumn DataField="ServiceLineID" DataType="System.Int32"
            HeaderText="ServiceLineID" SortExpression="ServiceLineID"
            UniqueName="ServiceLineID">
        </telerik:GridBoundColumn>
        <telerik:GridBoundColumn DataField="ServiceLineName"
            HeaderText="ServiceLineName" SortExpression="ServiceLineName"
            UniqueName="ServiceLineName">
        </telerik:GridBoundColumn>
        <telerik:GridBoundColumn DataField="AuditTypeID" DataType="System.Int32"
            HeaderText="AuditTypeID" SortExpression="AuditTypeID" UniqueName="AuditTypeID">
        </telerik:GridBoundColumn>
        <telerik:GridBoundColumn DataField="AuditTypeName" HeaderText="AuditTypeName"
            ReadOnly="True" SortExpression="AuditTypeName" UniqueName="AuditTypeName">
        </telerik:GridBoundColumn>
        <telerik:GridBoundColumn DataField="GMTDateLogged" DataType="System.DateTime"
            HeaderText="GMTDateLogged" SortExpression="GMTDateLogged"
            UniqueName="GMTDateLogged">
        </telerik:GridBoundColumn>
        <telerik:GridBoundColumn DataField="ChangesXML" HeaderText="ChangesXML"
            SortExpression="ChangesXML" UniqueName="ChangesXML">
        </telerik:GridBoundColumn>
    </Columns>
</MasterTableView>

            <ClientSettings AllowDragToGroup="True">
            </ClientSettings>

<FilterMenu EnableTheming="True">
<CollapseAnimation Type="OutQuint" Duration="200"></CollapseAnimation>
</FilterMenu>
        </telerik:RadGrid>
        <asp:SqlDataSource ID="SqlDataSource1" runat="server"
            ConnectionString="<%$ ConnectionStrings:ConnectionString %>"
            SelectCommand="ServiceLinesActivityLog_Select"
            SelectCommandType="StoredProcedure"></asp:SqlDataSource>
    </div>
    </form>
</body>
</html>

[Charles Forsyth]

Well, I believe I've figured it out. 

I'm hoping this post will save another unsuspecting developer from hours of hair pulling when using RadGrid. (and possibly influence the developers of RadGrid to change their control to fix this problem)

It seems that the problem is related to the fact that my site employs the use of Themes. Specifically, I have a skin file that identifies a default skin for all button controls used in my site. (there are thousands)

RadGrid apparently uses ASP Button controls and as such they adopt the default skin for the theme being used on the site.

That's why buttons appear where images should be.

Too bad I can't mark my own post as an answer.

[Jeff Mikla]

I'm having the same problems.
How did you resolve the issue?

[cforsyth]

Like I stated before, it was a problem with skinning. Just make sure you don't have any default skins. In other words, make sure you assign a skinID attribute to all controls configured in .skin files.

[Sasha Dossantos]

set enabletheming = false for the radgrid itself