This is a migrated thread and some comments may be shown as answers.

Theme with missing expand column image

3 Answers 196 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Tony Velasquez
Top achievements
Rank 1
Tony Velasquez asked on 02 Jul 2008, 07:55 PM
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>

3 Answers, 1 is accepted

Sort by
0
Dimo
Telerik team
answered on 03 Jul 2008, 08:14 AM
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
0
Tony Velasquez
Top achievements
Rank 1
answered on 08 Jul 2008, 03:36 PM
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.
0
Dimo
Telerik team
answered on 08 Jul 2008, 03:47 PM
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
Tags
Grid
Asked by
Tony Velasquez
Top achievements
Rank 1
Answers by
Dimo
Telerik team
Tony Velasquez
Top achievements
Rank 1
Share this question
or