Theme with missing expand column image

[Tony Velasquez]

I attempted to create a custom skin and apply it via a theme. Everything works fine except the expand collapse button images. The sort images work fine and I believe they work in the same manner as the expand images so I don't understand why one works and not the other. Below are the relevant code snippets, please let me know if you need anything else.

Custom skin file entry:
<telerik:RadGrid runat="server" Skin="CustomSkin" ImagesPath="~/App_Themes/CustomSkin/Grid"></telerik:RadGrid>

Page code:
<telerik:RadGrid ID="RadGridDeposits" runat="server" DataSourceID="dsDepositCount" AllowSorting="True" EnableEmbeddedSkins="false"
                    AllowPaging="True" AutoGenerateColumns="False" Width="100%" OnDetailTableDataBind="RadGridDeposits_DetailTableDataBind"
                    OnItemDataBound="RadGrid1_ItemDataBound">
                    <ClientSettings></ClientSettings>
                    <PagerStyle Mode="NextPrevNumericAndAdvanced" />
                    <MasterTableView DataSourceID="dsDepositCount" DataKeyNames="tDate" CommandItemDisplay="Top">
                        <DetailTables>
                            <telerik:GridTableView DataKeyNames="Number,StartDate,Site ID" DataSourceID="dsProcessedDeposits" Width="100%" runat="server" CommandItemDisplay="Top">
                                <ParentTableRelation>
                                    <telerik:GridRelationFields DetailKeyField="ProcessingDate" MasterKeyField="tDate" />
                                </ParentTableRelation>
                                <CommandItemTemplate>
                                <span class="childgridtitle"> Processed Deposits </span>
                                </CommandItemTemplate>                               
                                <Columns>
                                    <telerik:GridBoundColumn AllowFiltering="False" DataField="Number" HeaderText="Number"
                                        SortExpression="Number" UniqueName="column" ReadOnly="True" />
                                    <telerik:GridBoundColumn AllowFiltering="False" DataField="Site ID" HeaderText="Site ID"
                                        SortExpression="Site ID" UniqueName="column1" ReadOnly="True" />
                                    <telerik:GridBoundColumn AllowFiltering="False" DataField="ProcessingDate" HeaderText="Processing Date"
                                        SortExpression="ProcessingDate" UniqueName="column2" ReadOnly="True" />
                                    <telerik:GridBoundColumn AllowFiltering="False" DataField="StartDate" HeaderText="Start Date"
                                        SortExpression="StartDate" UniqueName="column3" ReadOnly="True" />
                                    <telerik:GridBoundColumn AllowFiltering="False" DataField="Account" HeaderText="Account"
                                        SortExpression="Account" UniqueName="column4" ReadOnly="True" />
                                    <telerik:GridBoundColumn AllowFiltering="False" DataField="Amount" HeaderText="Amount"
                                        SortExpression="Amount" UniqueName="column5" ReadOnly="True" DataFormatString="{0:C}" />
                                    <telerik:GridTemplateColumn HeaderText="Duplicates">
                                        <HeaderStyle Width="25px" />
                                        <ItemStyle HorizontalAlign="Center" />
                                        <ItemTemplate>
                                            <asp:Label ID="Label1" runat="server" Text='<%# GetDuplicateCountByDeposit(Eval("Site ID").ToString(),Eval("StartDate").ToString(),Eval("Number").ToString()) %>'></asp:Label>                                           
                                        </ItemTemplate>
                                    </telerik:GridTemplateColumn>
                                </Columns>
                                <ExpandCollapseColumn>
                                    <HeaderStyle Width="19px" />
                                </ExpandCollapseColumn>
                                <DetailTables>
                                   
                                    <telerik:GridTableView runat="server" DataKeyNames="Index" Width="100%" DataSourceID="dsDepositItems" SkinID="Diebold" CommandItemDisplay="Top">
                                        <ParentTableRelation>
                                            <telerik:GridRelationFields DetailKeyField="DepositIndex" MasterKeyField="Number" />
                                        </ParentTableRelation>
                                        <CommandItemTemplate>
                                        <span class="childgridtitle2"> Deposit Items </span>
                                        </CommandItemTemplate>
                                        <Columns>
                                            <telerik:GridTemplateColumn>
                                                <HeaderStyle Width="25px" />
                                                <ItemStyle HorizontalAlign="Center" />
                                                <ItemTemplate>
                                                    <asp:ImageButton runat="server" ID="ButtonViewDuplicateItem" AlternateText="View Possible Duplicate Item(s)" ImageUrl="~/Images/Warning.gif"
                                                        OnClientClick="<%# GetDisplayDupImageFuncName() %>" Visible="<%# DisplayDupImage() %>" />                                                  
                                                </ItemTemplate>
                                            </telerik:GridTemplateColumn>                   
                                            <telerik:GridTemplateColumn>
                                                <HeaderStyle Width="25px" />
                                                <ItemStyle HorizontalAlign="Center" />
                                                <ItemTemplate>
                                                    <asp:ImageButton runat="server" ID="ButtonViewItem" AlternateText="View Item" ImageUrl="~/Images/ViewCheck.gif"
                                                        OnClientClick="<%# GetDisplayImageFuncName() %>" />
                                                </ItemTemplate>
                                            </telerik:GridTemplateColumn>
                                            <telerik:GridBoundColumn AllowFiltering="False" DataField="Index" HeaderText="Index"
                                                SortExpression="Index" UniqueName="column" ReadOnly="True" Visible="false" />
                                            <telerik:GridBoundColumn AllowFiltering="False" DataField="DepositIndex" HeaderText="DepositIndex"
                                                SortExpression="DepositIndex" UniqueName="column1" ReadOnly="True" Visible="false" />
                                            <telerik:GridBoundColumn AllowFiltering="False" DataField="Serial" HeaderText="Serial"
                                                SortExpression="Serial" UniqueName="column2" ReadOnly="True" />
                                            <telerik:GridBoundColumn AllowFiltering="False" DataField="Aba" HeaderText="ABA"
                                                SortExpression="Aba" UniqueName="column3" ReadOnly="True" />
                                            <telerik:GridBoundColumn AllowFiltering="False" DataField="Account" HeaderText="Account"
                                                SortExpression="Account" UniqueName="column4" ReadOnly="True" />
                                            <telerik:GridBoundColumn AllowFiltering="False" DataField="Amount" HeaderText="Amount"
                                                SortExpression="Amount" UniqueName="column5" ReadOnly="True" DataFormatString="{0:C}" />
                                            <telerik:GridBoundColumn AllowFiltering="False" DataField="Front Image File" HeaderText="Front Image File"
                                                SortExpression="Front Image File" UniqueName="column6" ReadOnly="True" Visible="false" />
                                            <telerik:GridBoundColumn AllowFiltering="False" DataField="Rear Image File" HeaderText="Rear Image File"
                                                SortExpression="Rear Image File" UniqueName="column7" ReadOnly="True" Visible="false" />
                                        </Columns>
                                        <ExpandCollapseColumn Visible="False">
                                            <HeaderStyle Width="19px" />
                                        </ExpandCollapseColumn>
                                        <RowIndicatorColumn Visible="False">
                                            <HeaderStyle Width="20px" />
                                        </RowIndicatorColumn>
                                    </telerik:GridTableView>
                                   
                                </DetailTables>
                                <RowIndicatorColumn Visible="False">
                                    <HeaderStyle Width="20px" />
                                </RowIndicatorColumn>
                            </telerik:GridTableView>
                            <telerik:GridTableView DataKeyNames="Number,StartDate,Site ID" DataSourceID="dsOpenDeposits" Width="100%" runat="server" SkinID="Diebold_Child1" CommandItemDisplay="Top">
                                <ParentTableRelation>
                                    <telerik:GridRelationFields DetailKeyField="ProcessingDate" MasterKeyField="tDate" />
                                </ParentTableRelation>
                                <CommandItemTemplate>
                                <span class="childgridtitle"> Open Deposits </span>
                                </CommandItemTemplate>
                                <Columns>
                                    <telerik:GridBoundColumn AllowFiltering="False" DataField="Number" HeaderText="Number"
                                        SortExpression="Number" UniqueName="column" ReadOnly="True" />
                                    <telerik:GridBoundColumn AllowFiltering="False" DataField="Site ID" HeaderText="Site ID"
                                        SortExpression="Site ID" UniqueName="column1" ReadOnly="True" />
                                    <telerik:GridBoundColumn AllowFiltering="False" DataField="ProcessingDate" HeaderText="Processing Date"
                                        SortExpression="ProcessingDate" UniqueName="column2" ReadOnly="True" />
                                    <telerik:GridBoundColumn AllowFiltering="False" DataField="StartDate" HeaderText="Start Date"
                                        SortExpression="StartDate" UniqueName="column3" ReadOnly="True" />
                                    <telerik:GridBoundColumn AllowFiltering="False" DataField="Account" HeaderText="Account"
                                        SortExpression="Account" UniqueName="column4" ReadOnly="True" />
                                    <telerik:GridBoundColumn AllowFiltering="False" DataField="Amount" HeaderText="Amount"
                                        SortExpression="Amount" UniqueName="column5" ReadOnly="True" DataFormatString="{0:C}" />
                                    <telerik:GridTemplateColumn HeaderText="Duplicates">
                                        <HeaderStyle Width="25px" />
                                        <ItemStyle HorizontalAlign="Center" />
                                        <ItemTemplate>
                                            <asp:Label ID="Label1" runat="server" Text='<%# GetDuplicateCountByDeposit(Eval("Site ID").ToString(),Eval("StartDate").ToString(),Eval("Number").ToString()) %>'></asp:Label>                                           
                                        </ItemTemplate>
                                    </telerik:GridTemplateColumn>
                                </Columns>
                                <ExpandCollapseColumn>
                                    <HeaderStyle Width="19px" />
                                </ExpandCollapseColumn>
                                <DetailTables>
                                   
                                    <telerik:GridTableView runat="server" DataKeyNames="Index" Width="100%" DataSourceID="dsDepositItems" SkinID="Diebold" CommandItemDisplay="Top">
                                        <ParentTableRelation>
                                            <telerik:GridRelationFields DetailKeyField="DepositIndex" MasterKeyField="Number StartDate" />
                                        </ParentTableRelation>
                                        <CommandItemTemplate>
                                        <span class="childgridtitle2"> Deposit Items </span>
                                        </CommandItemTemplate>
                                        <Columns>
                                            <telerik:GridTemplateColumn>
                                                <HeaderStyle Width="50px" />
                                                <ItemStyle HorizontalAlign="Center" />
                                                <ItemTemplate>
                                                    <asp:ImageButton runat="server" ID="DeleteButton" AlternateText="View Item" ImageUrl="~/Images/ViewCheck.gif" CommandName="Delete"
                                                        OnClientClick="<%# GetDisplayImageFuncName() %>" />
                                                </ItemTemplate>
                                            </telerik:GridTemplateColumn>
                                            <telerik:GridBoundColumn AllowFiltering="False" DataField="Index" HeaderText="Index"
                                                SortExpression="Index" UniqueName="column" ReadOnly="True" Visible="false" />
                                            <telerik:GridBoundColumn AllowFiltering="False" DataField="DepositIndex" HeaderText="DepositIndex"
                                                SortExpression="DepositIndex" UniqueName="column1" ReadOnly="True" Visible="false" />
                                            <telerik:GridBoundColumn AllowFiltering="False" DataField="Serial" HeaderText="Serial"
                                                SortExpression="Serial" UniqueName="column2" ReadOnly="True" />
                                            <%--<telerik:GridBoundColumn AllowFiltering="False" DataField="Aba" HeaderText="ABA"
                                                SortExpression="Aba" UniqueName="column3" ReadOnly="True" />--%>
                                            <telerik:GridBoundColumn AllowFiltering="False" DataField="Account" HeaderText="Account"
                                                SortExpression="Account" UniqueName="column4" ReadOnly="True" />
                                            <telerik:GridBoundColumn AllowFiltering="False" DataField="Amount" HeaderText="Amount"
                                                SortExpression="Amount" UniqueName="column5" ReadOnly="True" DataFormatString="{0:C}" />
                                            <telerik:GridBoundColumn AllowFiltering="False" DataField="Front Image File" HeaderText="Front Image File"
                                                SortExpression="Front Image File" UniqueName="column6" ReadOnly="True" Visible="false" />
                                            <telerik:GridBoundColumn AllowFiltering="False" DataField="Rear Image File" HeaderText="Rear Image File"
                                                SortExpression="Rear Image File" UniqueName="column7" ReadOnly="True" Visible="false" />
                                        </Columns>
                                        <RowIndicatorColumn Visible="False">
                                            <HeaderStyle Width="20px" />
                                        </RowIndicatorColumn>
                                    </telerik:GridTableView>
                                   
                                </DetailTables>
                                <RowIndicatorColumn Visible="False">
                                    <HeaderStyle Width="20px" />
                                </RowIndicatorColumn>
                            </telerik:GridTableView>
                        </DetailTables>
                        <CommandItemTemplate>
                        </CommandItemTemplate>
                        <Columns>
                            <telerik:GridBoundColumn AllowFiltering="False" DataField="companyID" HeaderText="Merchant ID"
                                SortExpression="companyID" UniqueName="column" ReadOnly="True" Visible="false">
                            </telerik:GridBoundColumn>
                            <telerik:GridBoundColumn DataField="companyName" HeaderText="Merchant Name" SortExpression="companyName"
                                UniqueName="column1" Visible="false">
                            </telerik:GridBoundColumn>
                            <telerik:GridBoundColumn DataField="tDate" HeaderText="Date" SortExpression="tDate"
                                UniqueName="column2">
                            </telerik:GridBoundColumn>
                            <telerik:GridBoundColumn DataField="NotProcessedCount" HeaderText="Not Processed" SortExpression="NotProcessedCount"
                                UniqueName="column3">
                            </telerik:GridBoundColumn>
                            <telerik:GridBoundColumn DataField="ProcessedCount" HeaderText="Processed" SortExpression="ProcessedCount"
                                UniqueName="column4">
                            </telerik:GridBoundColumn>
                            <telerik:GridBoundColumn DataField="ProcessedAmount" HeaderText="Processed Amount" SortExpression="ProcessedAmount"
                                UniqueName="column5" DataFormatString="{0:C}">
                            </telerik:GridBoundColumn>                            
                        </Columns>
                        <ExpandCollapseColumn>
                            <HeaderStyle Width="19px" />
                        </ExpandCollapseColumn>
                        <RowIndicatorColumn Visible="False">
                            <HeaderStyle Width="20px" />
                        </RowIndicatorColumn>
                    </MasterTableView>
                </telerik:RadGrid>

[Dimo]

Hello Tony,

I don't see anything wrong with your RadGrid declaration. Do you have SinglePlus.gif and SingleMinus.gif  images in the ImagesPath folder? What is the HTML output for the problematic expand/collapse buttons?

Regards,
Dimo
the Telerik team

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

[Tony Velasquez]

I got it to work, maybe you can make this a public post in case someone else is having the same problem. Please let me know if you see a problem with what I have done.

Thanks.

Here is the code for the Expand button
<input type="button" class="rgExpand" title="Expand" id="ctl00_ContentPlaceHolder1_Activity1_RadGridDeposits_ctl00_ctl04_GECBtnExpandColumn" onclick="javascript:__doPostBack('ctl00$ContentPlaceHolder1$Activity1$RadGridDeposits$ctl00$ctl04$GECBtnExpandColumn','')" value="" name="ctl00$ContentPlaceHolder1$Activity1$RadGridDeposits$ctl00$ctl04$GECBtnExpandColumn"/>

here is the code for the working sort button:
<input type="image" alt="Sorted asc" src="/App_Themes/Diebold08/Grid/SortAsc.gif" name="ctl00$ContentPlaceHolder1$Activity1$RadGridDep

I noticed the sort button includes a src attribute while the expand collapse button derives its image through css.
--------------------------------------------------------------------
I also noticed the css when an embedded skin is used accesses the image differently:

.RadGrid_Office2007 .rgAdd, .RadGrid_Office2007 .rgRefresh, .RadGrid_Office2007 .rgEdit, .RadGrid_Office2007 .rgDel, .RadGrid_Office2007 .rgFilter, .RadGrid_Office2007 .rgPagePrev, .RadGrid_Office2007 .rgPageNext, .RadGrid_Office2007 .rgExpand, .RadGrid_Office2007 .rgCollapse, .RadGrid_Office2007 .rgSortAsc, .RadGrid_Office2007 .rgSortDesc, .RadGrid_Office2007 .rgUpdate, .RadGrid_Office2007 .rgCancel {

background-color:transparent;

background-image:url(WebResource.axd?d=wKNJ2a1fJJG4STLLLSNHuo6gar2U0Z5AyKlE-gziyKDbbCJP5i6qAwMnwTiXwN7i1bKwOJOnl8LB3AzCPGcH5w2&t=633493986460000000);

background-repeat:no-repeat;

border:0pt none;

cursor:pointer;

height:16px;

padding:0pt;

vertical-align:middle;

width:16px;

}

-------------------------------------------------------------------
THIS IS HOW I GOT IT TO WORK.

This is the css when using my theme (which has a modified version of the Grid.Office2007.css file):

.RadGrid_Diebold08 .rgAdd, .RadGrid_Diebold08 .rgRefresh, .RadGrid_Diebold08 .rgEdit, .RadGrid_Diebold08 .rgDel, .RadGrid_Diebold08 .rgFilter, .RadGrid_Diebold08 .rgPagePrev, .RadGrid_Diebold08 .rgPageNext, .RadGrid_Diebold08 .rgExpand, .RadGrid_Diebold08 .rgCollapse, .RadGrid_Diebold08 .rgSortAsc, .RadGrid_Diebold08 .rgSortDesc, .RadGrid_Diebold08 .rgUpdate, .RadGrid_Diebold08 .rgCancel {Grid.Die...old08.css (line 48)

background-color:transparent;

background-image:url(Grid/sprite.gif);

background-repeat:no-repeat;

border:0pt none;

cursor:pointer;

height:16px;

padding:0pt;

vertical-align:middle;

width:16px;

}

I added this so the sprite.gif image gets overwritten:

.RadGrid_Diebold08 .rgCollapse
{
    background-image:url('Grid/SingleMinus.gif');
}
.RadGrid_Diebold08 .rgExpand
{
    background-image:url('Grid/SinglePlus.gif');
}

I commented out this code:
.RadGrid_Diebold08 .rgExpand
{
    background-position:2px -1294px;
}

.RadGrid_Diebold08 .rgCollapse
{
    background-position:2px -1326px;
}


Now everything looks as it should.

[Dimo]

Hi Tony,

Indeed, using separate background images instead of a sprite image is always an option. I am glad everything is OK now.

Sincerely yours,
Dimo
the Telerik team

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