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

Grid Custom Skin Grouping images

6 Answers 127 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Curt
Top achievements
Rank 1
Curt asked on 10 Jun 2008, 09:35 PM
I have implemented a custom skin (basically a copy of the default with a few minor changes) for my grid.  Everything works except when I group by a column.

When I group by a column I get the column name in the Group Panel but the button next to it to sort it Asc or Desc does not show the correct image.  All I see is a default button with no text about 25px wide.

I can't find anywhere in the stylesheets where these images are called from.  The embedded styles get the correct images.  Is this a bug or can someone point  me to the correct place to reference the image path for these two items.

Thanks

6 Answers, 1 is accepted

Sort by
0
Dimo
Telerik team
answered on 11 Jun 2008, 02:07 PM
Hello Brent,

I tried to reproduce the issue you are talking about with RadGrid 5.1.3, but everything worked as expected - the sort images inside the group panel had the following URLs:

~/RadControls/Grid/Skins/Default/SortAsc.gif
~/RadControls/Grid/Skins/Default/SortDesc.gif

Please paste your RadGrid declaration here and we will investigate whether it contains anything specific, which creates problems.


Sincerely yours,
Dimo
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center
0
Curt
Top achievements
Rank 1
answered on 11 Jun 2008, 04:06 PM

Here is the grid:

<telerik:RadGrid ID="RadGrid1" Skin="DWDS" EnableEmbeddedSkins="False" ImagesPath="~/Skins/DWDS/Grid/" runat="server" Width="900px" PageSize="4" allowAutomaticUpdates="False" OnColumnCreating="RadGrid1_ColumnCreating"   
        OnInsertCommand="RadGrid1_InsertCommand" OnDeleteCommand="RadGrid1_DeleteCommand" OnNeedDataSource="RadGrid1_NeedDataSource" OnDataBound="RadGrid1_DataBound" OnItemCreated="RadGrid1_ItemCreated"   
        OnUpdateCommand="RadGrid1_UpdateCommand" OnItemInserted="RadGrid1_ItemInserted" OnItemUpdated="RadGrid1_ItemUpdated" OnItemCommand="RadGrid1_ItemCommand" OnItemDataBound="RadGrid1_ItemDataBound" 
        AllowPaging="True" AutoGenerateColumns="False" ShowStatusBar="True" AllowSorting="True" ShowFooter="True" AllowFilteringByColumn="True" GridLines="None" ShowGroupPanel="True" > 
        <PagerStyle Mode="NextPrevNumericAndAdvanced" /> 
        <ExportSettings FileName="DeepWellData File Export" /> 
        <MasterTableView CommandItemDisplay="Top" GroupLoadMode="Client" ShowHeadersWhenNoRecords="true" DataKeyNames="ActivityId"  Width="100%" AllowFilteringByColumn="true" > 
            <CommandItemTemplate> 
                <asp:LinkButton ID="btnUpdateEdited" runat="server" CommandName="UpdateEdited" Visible="<%# RadGrid1.EditIndexes.Count > 0 %>">  
                <img ID="Img1" runat="server" alt="" src="~/Skins/DWDS/Grid/Update.gif" style="border:0px" /> Update Activity  
                </asp:LinkButton> 
                &nbsp;  
                <asp:LinkButton ID="btnCancel" runat="server" CommandName="CancelAll" Visible="<%# RadGrid1.EditIndexes.Count > 0 || RadGrid1.MasterTableView.IsItemInserted %>">  
                <img ID="Img2" runat="server" alt="" src="~/Skins/DWDS/Grid/Cancel.gif" style="border:0px" /> Cancel editing  
                </asp:LinkButton> 
                &nbsp;  
                <asp:LinkButton ID="LinkButton2" runat="server" CommandName="InitInsert" Visible="<%# !RadGrid1.MasterTableView.IsItemInserted %>">  
                <img ID="Img3" runat="server" alt="" src="~/Skins/DWDS/Grid/AddRecord.gif" style="border:0px" /> Add new Activity</asp:LinkButton> 
                <asp:LinkButton ID="LinkButton3" runat="server" CommandName="PerformInsert" Visible="<%# RadGrid1.MasterTableView.IsItemInserted %>">  
                <img ID="Img4" runat="server" alt="" src="~/Skins/DWDS/Grid/Insert.gif" style="border:0px" /> Add this Activity</asp:LinkButton> 
                &nbsp;&nbsp;&nbsp;  
                <asp:LinkButton ID="LinkButton4" runat="server" CommandName="RebindGrid">  
                <img ID="Img5" runat="server" alt="" src="~/Skins/DWDS/Grid/Refresh.gif" style="border:0px" /> Refresh Activity list  
                </asp:LinkButton> 
                &nbsp;&nbsp;&nbsp;  
                <asp:LinkButton ID="LinkButtonClearFilter" runat="server" OnClick="clrFilters_Click">  
                    <img ID="Img6" runat="server" alt="" src="~/Skins/DWDS/Grid/Refresh.gif" style="border:0px" /> Clear Filters  
                </asp:LinkButton> 
            </CommandItemTemplate> 
            <Columns> 
                <telerik:GridEditCommandColumn ButtonType="ImageButton" CancelImageUrl="~\Skins\DWDS\Grid\Cancel.gif" EditImageUrl="~\Skins\DWDS\Grid\Edit.gif"   
                    InsertImageUrl="~\Skins\DWDS\Grid\Insert.gif" UniqueName="EditColumn" UpdateImageUrl="~\Skins\DWDS\Grid\Update.gif">  
                    <HeaderStyle Width="25px" /> 
                    <ItemStyle HorizontalAlign="Center" Width="25px" /> 
                </telerik:GridEditCommandColumn> 
                <telerik:GridButtonColumn ButtonType="ImageButton" CommandName="Delete" ConfirmText="Delete this activity?" ImageUrl="~\Skins\DWDS\Grid\Delete.gif" Text="Delete"   
                    UniqueName="DeleteColumn">  
                    <HeaderStyle Width="25px" /> 
                    <ItemStyle HorizontalAlign="Center" Width="25px" /> 
                </telerik:GridButtonColumn> 
                <telerik:GridBoundColumn ColumnEditorID="GridTextBoxColumnEditor1" DataField="ActivityName" HeaderText="Activity Name" SortExpression="ActivityName" UniqueName="ActivityName1" Display="false" /> 
                <telerik:GridDropDownColumn DataField="OrganizationId" ColumnEditorID="GridDropDownListColumnEditor1" HeaderText="Organization" ListTextField="OrganizationName" ListValueField="OrganizationId" 
                    UniqueName="OrganizationId" Display="false" /> 
                <telerik:GridDropDownColumn DataField="CategoryId" ColumnEditorID="GridDropDownListColumnEditor2" HeaderText="Category" ListTextField="CategoryName" ListValueField="CategoryId" 
                    UniqueName="CategoryId" Display="false" /> 
                <telerik:GridDropDownColumn DataField="GoalNumber" ColumnEditorID="GridDropDownListColumnEditor3" Visible="false" HeaderText="Goal #" ListTextField="Goal" 
                    ListValueField="Goal" UniqueName="GoalNumber" /> 
                <telerik:GridNumericColumn DataField="CompletionHours" Visible="false" HeaderText="Completion Hours (in Minutes)" ColumnEditorID="GridNumericColumnEditor1" SortExpression="CompletionHours" 
                    UniqueName="CompletionHours" /> 
                <telerik:GridTemplateColumn AllowFiltering="false" DataField="ActivityId" HeaderText="Details" UniqueName="viewActivity">  
                    <ItemTemplate> 
                        <div style="text-align: center">  
                            <asp:ImageButton ID="showItem" OnClick="showActivityDetails_Click" runat="server" ImageUrl="~/Images/Icons/magnifier.gif" CommandName="viewingActivity" CommandArgument='<%# Eval("ActivityID") %>' /> 
                        </div> 
                    </ItemTemplate> 
                </telerik:GridTemplateColumn> 
                <telerik:GridHTMLEditorColumn ColumnEditorID="GridHTMLEditorColumnEditor1" DataField="Notes" HeaderText="Notes" SortExpression="Notes" UniqueName="Notes" Visible="false" /> 
                <telerik:GridBoundColumn DataField="OrganizationId" ReadOnly="true" UniqueName="OrganizationId2" Visible="false" /> 
                <telerik:GridBoundColumn DataField="GoalNumber" ReadOnly="true" UniqueName="GoalNumber2" Visible="false" /> 
                <telerik:GridBoundColumn DataField="CategoryId" ReadOnly="true" UniqueName="CategoryId2" Visible="false" /> 
            </Columns> 
            <EditFormSettings CaptionDataField="ActivityName" CaptionFormatString="Edit properties of Activity: {0}" ColumnNumber="1">  
                <FormTableItemStyle Width="200px" Wrap="False" /> 
                <FormCaptionStyle CssClass="EditFormHeader" /> 
                <FormMainTableStyle BackColor="#b3ccc0" CellPadding="0" CellSpacing="0" GridLines="Horizontal" /> 
                <FormTableStyle CellPadding="10" CellSpacing="10" CssClass="module" Height="150px" /> 
                <FormTableAlternatingItemStyle Wrap="False" /> 
                <FormStyle Width="880px" /> 
                <EditColumn ButtonType="ImageButton" CancelImageUrl="~\Skins\DWDS\Grid\Cancel.gif" CancelText="Cancel edit" EditImageUrl="~\Skins\DWDS\Grid\Edit.gif"   
                    InsertImageUrl="~\Skins\DWDS\Grid\Insert.gif" InsertText="Insert Activity" UniqueName="EditCommandColumn1" UpdateImageUrl="~\Skins\DWDS\Grid\Update.gif" UpdateText="Update record">  
                </EditColumn> 
                <FormTableButtonRowStyle CssClass="EditFormButtonRow" HorizontalAlign="Right" /> 
                <PopUpSettings ScrollBars="None" /> 
            </EditFormSettings> 
        </MasterTableView> 
        <ClientSettings AllowColumnsReorder="True" AllowDragToGroup="True" ReorderColumnsOnClient="True"  /> 
    </telerik:RadGrid> 

Thanks for your help.
0
Curt
Top achievements
Rank 1
answered on 11 Jun 2008, 04:07 PM
Sorry, double post.
0
Accepted
Dimo
Telerik team
answered on 12 Jun 2008, 09:31 AM
Hello Brent,

Thank you for the code snippet. I can see that you are actually using RadGrid for ASP.NET AJAX, so I moved this forum thread to the correct forum category.

As for the group panel sort image - it is the so called "sprite button" (more information at http://www.telerik.com/help/aspnet-ajax/css-sprites.html ) When you don't have the proper styling for this type of button, it looks like an ordinary push button.

I suppose that your custom DWDS skin has been created based on an earlier version of RadGrid, which have not used sprite buttons and that's why you don't have styling for them. In order to style the group sort arrows, please add the following CSS code to your RadGrid DWDS skin:


.RadGrid_DWDS  .rgSortAsc,
.RadGrid_DWDS  .rgSortDesc
{
    width:14px;
    height:14px;
    border:0;
    padding:0;
    background-color:transparent;
    background-repeat:no-repeat;
    background-position:center center;
    vertical-align:middle;
    cursor:pointer;
}

.GroupPanel_DWDS  .rgSortAsc
{
    background-image:url(........../SortAsc.gif);
}

.GroupPanel_DWDS  .rgSortDesc
{
    background-image:url(........./SortDesc.gif);
}


Note that you need to adjust the images' path in the respective CSS declarations.

Let us know if you need further advice.


All the best,
Dimo
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center
0
Curt
Top achievements
Rank 1
answered on 12 Jun 2008, 02:19 PM
That did the trick.  I thought I had updated all of the new items in the grid stylesheet but apparently I hadn't.

Thanks

-Brent
0
Cartoon Head
Top achievements
Rank 1
answered on 26 May 2010, 05:40 PM
I know you fixed your issue, but mine was different.  In case anyone else runs into this...

I have my grid skins within the App_Themes\TelerikGrid folder.

My skins css had the following:
DIV.RadGrid_MySkin .rgSortAsc,  
DIV.RadGrid_MySkin .rgSortDesc  
{  
    width:14px;  
    height:14px;  
    border:0;  
    padding:0;  
    background-color:transparent;  
    background-repeat:no-repeat;  
    background-position:center center;  
    vertical-align:middle;  
    cursor:pointer;  
}  
 
DIV.GroupPanel_MySkin  .rgSortAsc  
{  
    BACKGROUND-IMAGE: URL('SortAsc.gif');  
}  
 
DIV.GroupPanel_MySkin  .rgSortDesc  
{  
    background-image:url('SortDesc.gif');  
}  

But it would not find the gif's UNTIL I added this to the RadGrid control declaration:
<telerik:RadGrid ID="grdMyGrid" runat="server" 
  DataSourceID="sqlMyData"   
      :  
      :  
  ImagesPath="App_Themes\TelerikGrid" 
  EnableEmbeddedSkins="false" 
  Skin="MySkin"   
> 

Once I set the ImagesPath, everything was golden!

Tags
Grid
Asked by
Curt
Top achievements
Rank 1
Answers by
Dimo
Telerik team
Curt
Top achievements
Rank 1
Cartoon Head
Top achievements
Rank 1
Share this question
or