Images Not Displayed (Prev, Next, Filter, etc.)

[jfkrueger]

The images are not being displayed in the grid, such as the Next & Previous button images and the filter image. Same issue with all skins. DataSourceID is set to an object datasource. How do I go about getting the images to show up? They do show up in Visual Studio on the design tab but not when the site is running. Instead of the images there are just some little ugly boxes with borders around them that can be clicked like buttons. It works if i explicitly set the URL to the images but then I can't update the skin without modifying code. It should get the paths based on the skin but for some reason it doesn't work. The grid is in an ASCX page inside a RadPanelBar.

Here is the code:

<telerik:RadGrid ID="rgAlternativeWords"
    AutoGenerateColumns="False"
    AllowPaging="True"
    AllowSorting="True"
    AllowFilteringByColumn="True"
    runat="server"
    DataSourceID="odsAlternativeWords"
    GridLines="None">

    <HeaderContextMenu EnableTheming="True">
    <CollapseAnimation Type="OutQuint" Duration="200"></CollapseAnimation>
    </HeaderContextMenu>

    <PagerStyle NextPageText="Next" PrevPageText="Prev" Mode="NextPrevNumericAndAdvanced" />

    <MasterTableView DataSourceID="odsAlternativeWords" DataKeyNames="RecordID">

        <RowIndicatorColumn>
        <HeaderStyle Width="20px"></HeaderStyle>
        </RowIndicatorColumn>

        <ExpandCollapseColumn>
        <HeaderStyle Width="20px"></HeaderStyle>
        </ExpandCollapseColumn>

        <Columns>
            <telerik:GridBoundColumn DataField="BaseWord" HeaderText="Original Word"
                ReadOnly="True" SortExpression="BaseWord" UniqueName="colBaseWord">
                <ItemStyle Width="125px" HorizontalAlign="Left" />
            </telerik:GridBoundColumn>
            <telerik:GridBoundColumn DataField="AlternativeWords"
                HeaderText="Alternate Words" SortExpression="AlternativeWords"
                UniqueName="colAlternateWords" AllowFiltering="false">
                <ItemStyle Width="350px" HorizontalAlign="Left" />
            </telerik:GridBoundColumn>
        </Columns>

    </MasterTableView>

    <ClientSettings AllowColumnsReorder="True"
        ReorderColumnsOnClient="True">
    </ClientSettings>

    <FilterMenu EnableTheming="True" >
        <CollapseAnimation Type="OutQuint" Duration="200"></CollapseAnimation>
    </FilterMenu>

</telerik:RadGrid>

Thanks!

[jfkrueger]

Upon viewing the source in the browser I can see that this is how the next button is rendered:

<input type="submit" name="ctl00$cphBody$wpmMain$wp1823486842$wp1597957143$rpbCSRLists$i0$i0$uctAlternativeWords$rgAlternativeWords$ctl00$ctl03$ctl01$ctl07" value=" " title="Next Page" class="BUTTONS" />

So it is rendering it as a "submit" button with the class of "BUTTONS". I already had a class called BUTTONS in my CSS which explains why there are the blue boxes with borders around them but if I remove my "BUTTONS" class they are still just displayed as regular old HTML buttons and no images. Shouldn't it have some reference to the image url in this tag?

And if I explicitly set the path to the Next image here is how it is rendered:

<a title="Next Page" href="javascript:__doPostBack('ctl00$cphBody$wpmMain$wp1823486842$wp1597957143$rpbCSRLists$i0$i0$uctAlternativeWords$rgAlternativeWords$ctl00$ctl03$ctl01$ctl06','')">Next&nbsp;<img src="/Headquarters/Skins/WebBlue/Grid/PagingNext.gif" alt="Next Page" style="border-width:0px;" /></a>

So as you can see if I don't explicitly set the image path (which I am not willing to do because it destroys the ability to update the skins without writing code to maintain the correct image paths) it renders as buttons, otherwise they render as links with images. So it looks like it is completely ignoring the skin for some reason.



Thanks!

[jfkrueger]

This seems to be occurring because I am using themes and have a skin for asp:button which uses a specific CSS class.

<asp:Button CssClass="BUTTONS" Runat="Server" />

If i remove this, the images show up. So, is there any way to use themes for an overall site but still have the Telerik controls skin applied rather than the site defaulting to the skin in the theme?

[jfkrueger]

Fixed it. On my WebUserControl i added the property "EnableTheming='false'" to the control directive at the top of the page. Now my themes are not overriding the Telerik skins.