Anyone have experience with Telerik's RadGrid Paging?

Question

I am having an issue with the paging system on Telerik's RadGrid (AJAX). First take a look at this screenshot:

As you can see, the First/Last Prev/Next buttons are there, but there is no markings on them. Also, the dropdown (thats where those values are coming from) and whatever that 'select' is are really messed up. Here is my designer code:

<asp:LinqDataSource ID="ItemViewDataSource" runat="server" ContextTypeName="GSFyi.GSFyiDataClasses_DataContext"
    TableName="FYI_Items" OrderBy="FYI_State.name, name" EnableDelete="True">
</asp:LinqDataSource>
<h2 class="gridTitle">
    All Items</h2>
<telerik:RadGrid ID="ItemViewRadGrid" runat="server" AutoGenerateColumns="False"
    DataSourceID="ItemViewDataSource" GridLines="None" AllowAutomaticDeletes="True"
    EnableEmbeddedSkins="False" OnItemDataBound="itemsGrid_ItemDataBound" 
    AllowPaging="True" PageSize="15" AllowCustomPaging="True">
    <HeaderContextMenu>
        <CollapseAnimation Type="OutQuint" Duration="200"></CollapseAnimation>
    </HeaderContextMenu>
    <PagerStyle FirstPageImageUrl="../../../../../Custom/Modules/GSFyi/Resources/Images/Icons/resultset_first.png" 
        LastPageImageUrl="../../../../../Custom/Modules/GSFyi/Resources/Images/Icons/resultset_last.png" 
        Mode="NextPrev" 
        NextPageImageUrl="../../../../../Custom/Modules/GSFyi/Resources/Images/Icons/resultset_next.png" 

        PrevPageImageUrl="../../../../../Custom/Modules/GSFyi/Resources/Images/Icons/resultset_previous.png" />
    <MasterTableView DataKeyNames="id" DataSourceID="ItemViewDataSource" CommandItemDisplay="None"
        CssClass="listItems" Width="98%" PageSize="15" PagerStyle-Mode="NextPrevAndNumeric">
        <RowIndicatorColumn>
            <HeaderStyle Width="20px" />
        </RowIndicatorColumn>
        <ExpandCollapseColumn>
            <HeaderStyle Width="20px" />
        </ExpandCollapseColumn>
        <Columns>
            <telerik:GridTemplateColumn ItemStyle-CssClass="gridActions edit" UniqueName="Edit">
                <ItemTemplate>
                    <asp:HyperLink ID="edit" runat="server" Text="Edit"></asp:HyperLink>
                </ItemTemplate>
                <ItemStyle CssClass="gridActions edit"></ItemStyle>
            </telerik:GridTemplateColumn>
            <telerik:GridButtonColumn ConfirmText="Are you sure you want to delete this item?"
                ConfirmDialogType="RadWindow" ButtonType="LinkButton" ItemStyle-CssClass="gridActions delete"
                CommandName="Delete">
                <ItemStyle CssClass="gridActions delete"></ItemStyle>
            </telerik:GridButtonColumn>
            <telerik:GridBoundColumn DataField="name" HeaderText="Item Name" SortExpression="name"
                UniqueName="name">
            </telerik:GridBoundColumn>
            <telerik:GridTemplateColumn HeaderText="State" UniqueName="state" >
                <ItemTemplate>
                    <asp:Literal ID="stateLit" runat="server" Text='<%# Eval("FYI_State.name") %>' />
                </ItemTemplate>
            </telerik:GridTemplateColumn>
            <telerik:GridTemplateColumn HeaderText="Type" UniqueName="type">
                <ItemTemplate>
                    <asp:Literal ID="typeLit" runat="server" Text='<%# Eval("FYI_Type.name") %>' />
                </ItemTemplate>
            </telerik:GridTemplateColumn>
            <telerik:GridBoundColumn DataField="url" HeaderText="Value" SortExpression="url" UniqueName="url">
            </telerik:GridBoundColumn>
        </Columns>
        <EditFormSettings>
            <EditColumn InsertImageUrl="Update.gif" UpdateImageUrl="Update.gif" EditImageUrl="Edit.gif"
                CancelImageUrl="Cancel.gif">
            </EditColumn>
        </EditFormSettings>
    </MasterTableView>
    <FilterMenu>
        <CollapseAnimation Type="OutQuint" Duration="200"></CollapseAnimation>
    </FilterMenu>
</telerik:RadGrid>

I assumed that AT LEAST the images would be present since I specified these images:

But no luck. Any input will be greatly appreciated!

Cheers, anders

Answer 1

Most probably the (embedded) skin CSS files have failed to load. You can use Fiddler or Firebug to check your web site for failing requests. I have a blog post showing how to troubleshoot and resolve such problems. You can check it here

Answer 2

Indeed the odd appearance of the grid is due to the default skin not loading. This is because you have set EnableEmbeddedSkins="False". I assume you want the 'Default' skin because you have not specified one. Remove this declaration or set it to true. The odd combobox layout is due to the lack of the skin.

The images not loading is probably unrelated to the skin not loading. I'd check the path to the images.