Lost Plus/Minus images after upgrade to 2008 Q2

[Kelvin]

Hi,

I have a hierarchical grid that uses a custom skin and when running a 2007 version the +/- icons show up without a problem.  But if I change to 2008Q2 the icons don't show up anymore, they are replaced by what looks like rounded buttons.  Not sure if I need to change anything in the CSS or ??  I did add the .rgExpand and .rgCollapse values and once added the buttons now look more sqaured off so it must be reading the file.  Still, no images.  Here is what the classes look like now (note changing the img url to SinglePlus.gif etc. has no affect...the buttons still show up):

.RadGrid_mainsite .rgExpand
{
        background:url('Grid/sprite.gif') -64px -63px no-repeat;

}

.RadGrid_mainsite .rgCollapse
{
        background:url('Grid/sprite.gif') -64px -63px no-repeat;

}

The site uses a Theme page which defines the base values for the grid and then in the page itself you should be able to override the values set in the theme....but this does not seem to work..

Here is the grid code in the page itself...I have changed the images path to serveral different values with no luck...

                        <telerik:RadGrid ID="RadGrid" runat="server"  Width="850px" Height="420px" AllowPaging="True" EnableEmbeddedSkins='False' Skin='mainsite' PageSize="2" ImagesPath="Skins/mainsite/Grid">

Any thoughts?

Thanks in advance!

K

[Dimo]

Hello Kelvin,

Generally, when you set ImagesPath for RadGrid, you don't need the rgExpand and rgCollapse CSS classes, because they are used only when RadGrid renders the so-called SpriteButtons ( http://www.telerik.com/help/aspnet-ajax/css-sprites.html ). When using ImagesPath, the only thing you need to make sure is that there are SinglePlus.gif and SingleMinus.gif images at the ImagesPath location.

If you still cannot find a way out of this problem, please post the whole RadGrid declaration. Thanks.

All the best,
Dimo
the Telerik team

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

[Kelvin]

Hi,

Thanks for the reply.  I still am not able to get the +/- images rendered, there is a button rendered instead.  Please note:

• It is interesting that the column sort images (^ etc.) do get rendered on the page and work correctly
• The +/- images showed up before I upgraded to 2008 Q2.
• I have validated the image paths are correct...~/Skins/mainsite/Grid contains the SinglePlus.gif and SingleMinus.gif images
• Even if I attempt to add the following value (and the collapse value also )to the <MasterTableView> in either the theme page or the page itself it seems to be ignored and the button is still rendered: ExpandCollapseColumn-ExpandImageUrl="../Skins/mainsite/Grid/SinglePlus.gif"
  

Anyway here is the code for the grid...any assistance you could provide would be appreciated.  I am stumped on this one! 

The master page contains a reference to the CSS:
    <link href="~/Skins/mainsite/Grid.mainsite.css" type="text/css" rel="Stylesheet" />    

This is what is in the Theme skin:
<telerik:RadGrid runat="server" AutoGenerateColumns="false" EnableEmbeddedSkins="false" skin="mainsite" ImagesPath="~/Skins/mainsite/Grid"
            AllowPaging="True" AllowSorting="True" AllowCustomPaging="False" PageSize="30">
    <ClientSettings AllowColumnsReorder="False" ReorderColumnsOnClient="False">
        <Selecting AllowRowSelect="True" EnableDragToSelectRows="false" />
        <Scrolling UseStaticHeaders="True" AllowScroll="true" SaveScrollPosition="false" />
        <Resizing AllowColumnResize="False" />                                            
    </ClientSettings>
    <PagerStyle Height="20px" Mode="NextPrevAndNumeric" ShowPagerText="True" Position="Bottom" HorizontalAlign="Right" Font-Bold="true" PagerTextFormat="Displaying page {0} of {1}:&nbsp;&nbsp;&nbsp;{4}" Width="100%" />
    <MasterTableView TableLayout="Fixed">    
        <NoRecordsTemplate>
            <div style="text-align: center; width: 100%" class="arial_bold_11px_navy">
                Detail View
            </div>
        </NoRecordsTemplate>
    </MasterTableView>
</telerik:RadGrid>

Then this is what is in the page itself:
                       <telerik:RadGrid ID="RadGrid1" runat="server"  Width="850px" Height="420px">
                        <ClientSettings ClientEvents-OnRowDblClick="RowSelected">
                            <Selecting EnableDragToSelectRows="False" AllowRowSelect=true />
                            <Scrolling UseStaticHeaders="True" AllowScroll="True" SaveScrollPosition="False" />
                  
                        </ClientSettings>
                         <MasterTableView AutoGenerateColumns="False" DataKeyNames="AuctionID"  Width="100%" TableLayout="Fixed" CellPadding="0" >
                               <ParentTableRelation>
                                        <telerik:GridRelationFields DetailKeyField="AuctionID" MasterKeyField="AuctionID" />
                                    </ParentTableRelation>
                          <Columns>

                          <telerik:GridBoundColumn DataField="AuctionID" HeaderText="Auction ID" UniqueName="AuctionID"
                                    SortExpression="AuctionID">
                                    <HeaderStyle Width="10%" Height="20px" HorizontalAlign="Center" Font-Bold="False" />
                                    <ItemStyle HorizontalAlign="Left" VerticalAlign="Middle" Height="20px" Width="5%" Font-Size="11px" />
                                </telerik:GridBoundColumn>
                           <telerik:GridBoundColumn DataField="Title" HeaderText="Title" UniqueName="Title"
                                    SortExpression="Title">
                                    <HeaderStyle Width="23%" Height="20px" HorizontalAlign="Center" Font-Bold="False" />
                                    <ItemStyle HorizontalAlign="Left" VerticalAlign="Middle" Height="20px" Width="5%" Font-Size="11px" />
                                </telerik:GridBoundColumn>
<!--a bunch of other columns here....the data displays without a problem-->

                              </Columns>
 
                             <DetailTables >
                                <telerik:GridTableView AutoGenerateColumns="False" TableLayout="Fixed" Width="100%"  DataKeyNames="AuctionID" runat="server" >
                                    <Columns>
                                 <telerik:GridBoundColumn DataField="MemberID" HeaderText="Member ID - Last Name/First Name" ReadOnly="True"
                                    UniqueName="MemberID" SortExpression="MemberID">
                                    <HeaderStyle Width="20%" Height="20px" HorizontalAlign="Center" Font-Bold="False" />
                                    <ItemStyle HorizontalAlign="Left" VerticalAlign="Middle" Height="20px" Width="20%" Font-Size="11px" />
                                </telerik:GridBoundColumn>


                                    </Columns>
                                    <ParentTableRelation>
                                        <telerik:GridRelationFields DetailKeyField="AuctionID" MasterKeyField="AuctionID" />
                                    </ParentTableRelation>
                                 </telerik:GridTableView>
                            </DetailTables>

 <!--some other columns here...again, the data displays correctly-->
 
 
                            <NoRecordsTemplate>
                                <div style="vertical-align: middle; text-align: center; font-weight: bold; font-size: small">
                                    No records to display.
                                </div>
                            </NoRecordsTemplate>
                         </MasterTableView>
                            <ExportSettings>
                                <Pdf PageBottomMargin="" PageFooterMargin="" PageHeaderMargin="" PageHeight="11in"
                                    PageLeftMargin="" PageRightMargin="" PageTopMargin="" PageWidth="8.5in" />
                            </ExportSettings>
                            <ActiveItemStyle BackColor="#C0FFC0" />
                    </telerik:radgrid>

The CSS listed in the master page looks like this:
.RadGrid_mainsite
{
    border: solid 1px #898d8f;        
    font: normal 11px Arial, Verdana, Sans-serif;
    scrollbar-base-color: White;
    scrollbar-arrow-color: #233962;
    scrollbar-track-color:#233962;
    scrollbar-face-color:#7F9DB9;
    cursor: default;
    text-align: left;
    /*width: 100%;*/
}

.MasterTable_mainsite
{
    border: 0px;
    /*width: 443px;*/
    border-collapse: separate !important;
    color: black;    
}

div.RadGrid_mainsite table td
{
    padding: 0px 4px;
    /*width: 443px;*/
}

.GridRow_mainsite td
{
    border-top: solid 1px #CECECE;
    /*border-bottom: solid 1px #FFFFFF;*/
    /*background: #f0f2f4;*/    
    background: transparent;
    height: 20px;
    cursor: hand;
    font-size: 11px;
    border-right: solid 1px #233962;
    border-bottom: solid 1px #233962;
}

.GridAltRow_mainsite td
{
    border-top: solid 1px #FFFFFF;
    /*border-bottom: solid 1px #CECECE;*/
    background: #CECECE;
    height: 20px;
    cursor: hand;
    font-size: 11px;
    border-right: solid 1px #233962;
    border-bottom: solid 1px #233962;
}

.SelectedRow_mainsite td
{
    /*border-top: solid 1px #000000;*/ /*#d2d8db;*/
    /*border-bottom: solid 1px #000000; */
    background: #ffff99;  /*#f9f6dd;*/
    cursor: hand;
    font-size: 11px;
    border-right: solid 1px #233962;
    border-bottom: solid 1px #233962;
}

.ActiveRow_mainsite td
{
    /*border-top: solid 1px #abb4b9;
    border-bottom: solid 1px #f0f2f4;*/
    background: #d2d8db;
    cursor: hand;
    font-size:11px;
}

/*div.GridHeaderDiv_mainsite
{
    border: solid 1px #233962;
}*/

th.GridHeader_mainsite,
th.ResizeHeader_mainsite
{
    background-color: #b6c1cf;
    /*border-top: solid 1px #8d9092;*/
    /*border-bottom: solid 1px #8d9092;*/
    padding: 0px 4px 0px 4px;
    height: 26px !important;
    color: black;
    font-size: 11px;
    border-right: solid 1px #233962;
    border-bottom: solid 1px #233962;
}

th.GridHeader_mainsite a
{
    text-decoration: none;
    color: black !important;
    font: normal;
}

/* ascending / descending sorting arrow */
.GridHeader_mainsite img,
.GroupPanelItems_mainsite input
{
    vertical-align: middle;
}

td.GridHeader_mainsite input
{
    width: auto;
    float: left;
    border: solid 1px #474b38;
    background-color: #fafafa;
    font: bold 10px Verdana, Arial, Sans-serif;
    color: #989cb0;
    margin-right: 2px;
}

tr.GridCommandRow_mainsite td
{
    border-bottom: solid 1px #233962;
}

tr.GridCommandRow_mainsite table td
{
    border-bottom: none 0px;
}

tr.GridPager_mainsite
{
    background: #b6c1cf;/*#d2d6db;*/
    border-top: solid 1px #8d9092;
    color: #000000; /*#6e7376;*/
    cursor: default;
}

tr.GridPager_mainsite td
{    
    border-top: solid 1px #8d9092;
}

.GridPager_mainsite a
{
    color: #333;
}

.GridPager_mainsite a:hover
{
    color: #333;
}

[Dimo]

Hi Kelvin,

Thanks for providing code snippets. I created a sample project, based on them and it seems that the hierarchy expand/collapse images appear as expected (tested with Q2 2008 SP2 and Q3 2008 SP1). Please find attached.

Let us know how it goes.

Kind regards,
Dimo
the Telerik team

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

[Kelvin]

Hi Dimo,

Thanks for your time.  I loaded up the pages you sent over in the IDE, made a small change to the grid column header (black to red so I could see if it was reading the css) loaded the page.  Grid looks like it is supposed to but still has the buttons.  I am running version 2008.1.415.20.  Here is the HTML that is rendered to the page for the grid...as you can see it has submit buttons instead of the icons.  Do you know what I am missing for the grid to render the buttons?  The expand/collapse works etc...

    <div id="RadGrid1_GridData" class="GridDataDiv_mainsite" style="overflow:auto;width:100%;height:300px;">

<table class="MasterTable_mainsite" cellspacing="0" border="0" id="RadGrid1_ctl00" style="border-collapse:collapse;table-layout:fixed;overflow:hidden;text-overflow:ellipsis;empty-cells:show;">
    <colgroup>
        <col width="20px"  />
        <col />
        <col />
        <col />
        <col />
    </colgroup>
<tbody>
    <tr class="GridRow_mainsite" id="RadGrid1_ctl00__0">
        <td><input type="submit" name="RadGrid1$ctl00$ctl04$GECBtnExpandColumn" value="" id="RadGrid1_ctl00_ctl04_GECBtnExpandColumn" title="Expand" class="rgExpand" /></td><td>Column1 Row1</td><td>Column2 Row1</td><td>Column3 Row1</td><td>Column4 Row1</td>
    </tr><tr class="GridAltRow_mainsite" id="RadGrid1_ctl00__1">
        <td><input type="submit" name="RadGrid1$ctl00$ctl07$GECBtnExpandColumn" value="" id="RadGrid1_ctl00_ctl07_GECBtnExpandColumn" title="Expand" class="rgExpand" /></td><td>Column1 Row2</td><td>Column2 Row2</td><td>Column3 Row2</td><td>Column4 Row2</td>
    </tr><tr class="GridRow_mainsite" id="RadGrid1_ctl00__2">
        <td><input type="submit" name="RadGrid1$ctl00$ctl10$GECBtnExpandColumn" value="" id="RadGrid1_ctl00_ctl10_GECBtnExpandColumn" title="Expand" class="rgExpand" /></td><td>Column1 Row3</td><td>Column2 Row3</td><td>Column3 Row3</td><td>Column4 Row3</td>
    </tr><tr class="GridAltRow_mainsite" id="RadGrid1_ctl00__3">
        <td><input type="submit" name="RadGrid1$ctl00$ctl13$GECBtnExpandColumn" value="" id="RadGrid1_ctl00_ctl13_GECBtnExpandColumn" title="Expand" class="rgExpand" /></td><td>Column1 Row4</td><td>Column2 Row4</td><td>Column3 Row4</td><td>Column4 Row4</td>
    </tr><tr class="GridRow_mainsite" id="RadGrid1_ctl00__4">
        <td><input type="submit" name="RadGrid1$ctl00$ctl16$GECBtnExpandColumn" value="" id="RadGrid1_ctl00_ctl16_GECBtnExpandColumn" title="Expand" class="rgExpand" /></td><td>Column1 Row5</td><td>Column2 Row5</td><td>Column3 Row5</td><td>Column4 Row5</td>
    </tr><tr class="GridAltRow_mainsite" id="RadGrid1_ctl00__5">
        <td><input type="submit" name="RadGrid1$ctl00$ctl19$GECBtnExpandColumn" value="" id="RadGrid1_ctl00_ctl19_GECBtnExpandColumn" title="Expand" class="rgExpand" /></td><td>Column1 Row6</td><td>Column2 Row6</td><td>Column3 Row6</td><td>Column4 Row6</td>
    </tr><tr class="GridRow_mainsite" id="RadGrid1_ctl00__6">
        <td><input type="submit" name="RadGrid1$ctl00$ctl22$GECBtnExpandColumn" value="" id="RadGrid1_ctl00_ctl22_GECBtnExpandColumn" title="Expand" class="rgExpand" /></td><td>Column1 Row7</td><td>Column2 Row7</td><td>Column3 Row7</td><td>Column4 Row7</td>
    </tr><tr class="GridAltRow_mainsite" id="RadGrid1_ctl00__7">
        <td><input type="submit" name="RadGrid1$ctl00$ctl25$GECBtnExpandColumn" value="" id="RadGrid1_ctl00_ctl25_GECBtnExpandColumn" title="Expand" class="rgExpand" /></td><td>Column1 Row8</td><td>Column2 Row8</td><td>Column3 Row8</td><td>Column4 Row8</td>
    </tr><tr class="GridRow_mainsite" id="RadGrid1_ctl00__8">
        <td><input type="submit" name="RadGrid1$ctl00$ctl28$GECBtnExpandColumn" value="" id="RadGrid1_ctl00_ctl28_GECBtnExpandColumn" title="Expand" class="rgExpand" /></td><td>Column1 Row9</td><td>Column2 Row9</td><td>Column3 Row9</td><td>Column4 Row9</td>
    </tr><tr class="GridAltRow_mainsite" id="RadGrid1_ctl00__9">
        <td><input type="submit" name="RadGrid1$ctl00$ctl31$GECBtnExpandColumn" value="" id="RadGrid1_ctl00_ctl31_GECBtnExpandColumn" title="Expand" class="rgExpand" /></td><td>Column1 Row10</td><td>Column2 Row10</td><td>Column3 Row10</td><td>Column4 Row10</td>
    </tr><tr class="GridRow_mainsite" id="RadGrid1_ctl00__10">
        <td><input type="submit" name="RadGrid1$ctl00$ctl34$GECBtnExpandColumn" value="" id="RadGrid1_ctl00_ctl34_GECBtnExpandColumn" title="Expand" class="rgExpand" /></td><td>Column1 Row11</td><td>Column2 Row11</td><td>Column3 Row11</td><td>Column4 Row11</td>
    </tr><tr class="GridAltRow_mainsite" id="RadGrid1_ctl00__11">
        <td><input type="submit" name="RadGrid1$ctl00$ctl37$GECBtnExpandColumn" value="" id="RadGrid1_ctl00_ctl37_GECBtnExpandColumn" title="Expand" class="rgExpand" /></td><td>Column1 Row12</td><td>Column2 Row12</td><td>Column3 Row12</td><td>Column4 Row12</td>
    </tr><tr class="GridRow_mainsite" id="RadGrid1_ctl00__12">
        <td><input type="submit" name="RadGrid1$ctl00$ctl40$GECBtnExpandColumn" value="" id="RadGrid1_ctl00_ctl40_GECBtnExpandColumn" title="Expand" class="rgExpand" /></td><td>Column1 Row13</td><td>Column2 Row13</td><td>Column3 Row13</td><td>Column4 Row13</td>
    </tr><tr class="GridAltRow_mainsite" id="RadGrid1_ctl00__13">
        <td><input type="submit" name="RadGrid1$ctl00$ctl43$GECBtnExpandColumn" value="" id="RadGrid1_ctl00_ctl43_GECBtnExpandColumn" title="Expand" class="rgExpand" /></td><td>Column1 Row14</td><td>Column2 Row14</td><td>Column3 Row14</td><td>Column4 Row14</td>
    </tr><tr class="GridRow_mainsite" id="RadGrid1_ctl00__14">
        <td><input type="submit" name="RadGrid1$ctl00$ctl46$GECBtnExpandColumn" value="" id="RadGrid1_ctl00_ctl46_GECBtnExpandColumn" title="Expand" class="rgExpand" /></td><td>Column1 Row15</td><td>Column2 Row15</td><td>Column3 Row15</td><td>Column4 Row15</td>
    </tr><tr class="GridAltRow_mainsite" id="RadGrid1_ctl00__15">
        <td><input type="submit" name="RadGrid1$ctl00$ctl49$GECBtnExpandColumn" value="" id="RadGrid1_ctl00_ctl49_GECBtnExpandColumn" title="Expand" class="rgExpand" /></td><td>Column1 Row16</td><td>Column2 Row16</td><td>Column3 Row16</td><td>Column4 Row16</td>
    </tr><tr class="GridRow_mainsite" id="RadGrid1_ctl00__16">
        <td><input type="submit" name="RadGrid1$ctl00$ctl52$GECBtnExpandColumn" value="" id="RadGrid1_ctl00_ctl52_GECBtnExpandColumn" title="Expand" class="rgExpand" /></td><td>Column1 Row17</td><td>Column2 Row17</td><td>Column3 Row17</td><td>Column4 Row17</td>
    </tr><tr class="GridAltRow_mainsite" id="RadGrid1_ctl00__17">
        <td><input type="submit" name="RadGrid1$ctl00$ctl55$GECBtnExpandColumn" value="" id="RadGrid1_ctl00_ctl55_GECBtnExpandColumn" title="Expand" class="rgExpand" /></td><td>Column1 Row18</td><td>Column2 Row18</td><td>Column3 Row18</td><td>Column4 Row18</td>
    </tr><tr class="GridRow_mainsite" id="RadGrid1_ctl00__18">
        <td><input type="submit" name="RadGrid1$ctl00$ctl58$GECBtnExpandColumn" value="" id="RadGrid1_ctl00_ctl58_GECBtnExpandColumn" title="Expand" class="rgExpand" /></td><td>Column1 Row19</td><td>Column2 Row19</td><td>Column3 Row19</td><td>Column4 Row19</td>
    </tr><tr class="GridAltRow_mainsite" id="RadGrid1_ctl00__19">
        <td><input type="submit" name="RadGrid1$ctl00$ctl61$GECBtnExpandColumn" value="" id="RadGrid1_ctl00_ctl61_GECBtnExpandColumn" title="Expand" class="rgExpand" /></td><td>Column1 Row20</td><td>Column2 Row20</td><td>Column3 Row20</td><td>Column4 Row20</td>
    </tr>
    </tbody>

</table>    </div>
<input id="RadGrid1_ClientState" name="RadGrid1_ClientState" type="hidden" />
    </div>

Thanks in advance...

K

[Dimo]

Hi Kelvin,

RadGrid 2008.1.415 behaves differently. In that version the hierarchy expand/collapse buttons are by default SpriteButtons even if you set ImagesPath. In newer versions, if you set ImagesPath, these buttons transform into image buttons, which is more correct.

In order to make the expand/collapse buttons appear as expected in RadGrid 2008.1.415 you should either set the ExpandColumn's ButtonType property to "ImageButton", or add the following CSS code to the CSS file in the sample project I sent you:

.RadGrid_mainsite .rgExpand,
.RadGrid_mainsite .rgCollapse
{
    display:block;
    border:0;
    background-color:transparent;
    width:16px;
    height:16px;
}

.RadGrid_mainsite .rgExpand
{
        background:url('Grid/SinglePlus.gif') center center no-repeat;

}

.RadGrid_mainsite .rgCollapse
{
        background:url('Grid/SingleMinus.gif') center center no-repeat;
}

All the best,
Dimo
the Telerik team

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

[Kelvin]

That did it!  Thanks!

K