Missing RadGrid images after upgrade

[Greg]

Hi,
I have upgraded from RadGrid.Net2.dll v5.1.1.0 & Prometheus Telerik.Web.UI v2007.3.1314.35 to RadControls for ASP.NET AJAX Telerik.Web.UI.dll v2008.1.1415.20

I removed the RadGrid.Net2.dll and RadControls RadGrid Theme files from my application.
Created a new reference to the (v2008.1.1415.20) Telerik.Web.UI.dll.
Modified each RadGrid control on each page to use the Telerik.Web.UI name space.

All RadGrid controls are working, but the paging icons & GroupBy sort icons are missing (viewed in VS Design mode & in web browser).
But the column sort order icons do appear!

I presume that it is a setting problem as the Telerik RadGrid Demo's work locally on my machine.

Within the RadGrid properties PagerStyle - FirstPageImageUrl is set to "mvwres://Telerik.Web.UI, Version=2008.1.415.35, Culture=neutral, PublicKeyToken=121fae78165ba3d4/Telerik.Web.UI.Skins.Default.Grid.PagingFirst.gif"

Is there any web.config changes that I need to make to allow the icons to appear?

Thanks
William

[Dimo]

Hi William,

I presume that you are using a non-embedded custom skin for RadGrid for ASP.NET AJAX.

The first/last paging arrows have been removed from the assembly by mistake and will be added back for the coming service pack. In the meantime, you can use different (and valid) ImageUrl's for them.

As for the sort icon inside the group panel, as of Q1 2008 it is a SpriteButton instead of ImageButton. Obviously this is not very backwards compatible in the cases when one uses a custom skin, so we will fix this for the coming service pack as well. In the meantime, you can set a background image for the SpriteButtons by adding a couple of CSS rules:

.GroupPanel_SKIN  .rgSortAsc,
.GroupPanel_SKIN  .rgSortDesc
{
    width:........px;
    height:.......px;
    border:0;
    padding:0;
    background-color:transparent;
    background-repeat:no-repeat;
    background-position:center center;
    vertical-align:middle;
    cursor:pointer;
}

.GroupPanel_SKIN  .rgSortAsc
{
    background-image:url(.......);
}

.GroupPanel_SKIN  .rgSortDesc
{
    background-image:url(.......);
}


More information about SpriteButtons is available here:

RadGrid CSS Sprites



Sincerely yours,
Dimo
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center

[Greg]

Hi Dimo,

 Well this turned out to be a problem with my default web site skin.

I had set a style for all the site’s asp:Buttons within the skin.

<asp:button runat="server" cssclass="btn"/>

As the RadGrid had changed Image Buttons to SpriteButtons, my default skin style overrode the Teleik RadGrid SpriteButton styles.

Therefore the Column Sort Order images and the Grouping Collapse & Expand images would appear (Presumably as they are not SpriteButtons), but the Paging, Column filtering and Grouping Sort order images would not.

So to fix the problem I will need to remove the button style from my website’s skin, and add the cssclass to every asp:button within my app. 
Which is only a small job.

Thanks
William

[Dimo]

Hello William,

The column sort indicators and group expand/collapse buttons are also SpriteButtons, unless specified otherwise. I am glad that you have discovered the reason for the problem. Let us know if you need more information.

Sincerely yours,
Dimo
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center

[genesplitter]

I am having a somewhat similar problem with my RadGrid missing pager and column sort icons when using the built-in skin. The functionality works, just missing the icons.

Right clicking to save the (missing) image shows it is coming from WebResource.axd (because this is a built-in skin).

This is for the latest 5-15 hotfix

RadControls_for_ASP.NET_AJAX_2008_1_515_dev_hotfix.zip

Anyone else missing their pager/sort icons?

[Dimo]

Hello Donald,

Could you please copy/paste your RadGrid declaration here, so that I can take a look and try reproducing your problem? Thanks.

Sincerely yours,
Dimo
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center

[genesplitter]

That was an unexpected fast response Dino - thanks.

This page lives in a folder one-level from the root. I simplified the page and tested to see if the icons were still missing.

<%@ Page Language="C#" MasterPageFile="~/Admin/admin1.master" AutoEventWireup="true" CodeFile="ManageVideos.aspx.cs" Inherits="Admin_ManageVideos" %>

<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="Server">
    <telerik:RadGrid ID="VideosGrid" runat="server" GridLines="None" AutoGenerateColumns="False" DataSourceID="FilesDS" AllowSorting="True" AllowAutomaticUpdates="True"
        AllowPaging="True" Skin="Vista">
        <MasterTableView DataKeyNames="FileId" EditMode="InPlace">
            <Columns>
                <telerik:GridEditCommandColumn ButtonType="ImageButton" UniqueName="EditCommandColumn">
                    <ItemStyle />
                </telerik:GridEditCommandColumn>
                <telerik:GridCheckBoxColumn DataField="IsHomePage" DataType="System.Boolean" HeaderText="Featured" SortExpression="IsHomePage" UniqueName="IsHomePage">
                </telerik:GridCheckBoxColumn>
            </Columns>
            <PagerStyle Mode="NextPrevAndNumeric" Position="TopAndBottom" />
        </MasterTableView>
    </telerik:RadGrid>
    <asp:LinqDataSource ID="FilesDS" runat="server" ContextTypeName="DAL.DareCentralDataContext" TableName="Files">
    </asp:LinqDataSource>
</asp:Content>

[Dimo]

Hello Donald,

Thanks for the code snippet. I used it to create a simple project and no problems occurred.

Are you using RadFormDecorator? If no, please try removing all other styles from the page, leave just the RadGrid skin and see whether it makes any difference.


Regards,
Dimo
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center

[genesplitter]

You were correct, removing the following css solved the problem:

.main input[type="submit"], .main input[type="button"] {
    color: #000000;
    background: #FFFFFF;
    border: 1px solid #B8C1CA;
}


I have no idea why this css would clash with the RadGrid. I'll look deeper into the structure of the RadGrid css.

Thanks Dimo

[Celestyn]

I noticed that "arrow" images dissapeared when I use <page Theme= xxx ... directive in my web.config . It may be helpful information for all , I hope. (Sorry for my bad english)

---answer---

Problem was i my css file of actual skin template. I overrided default <img tag with my own. So many similar problems may be caused this way.

------------


Celestyn