Grid Custom Skin Grouping images

[Curt]

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

[Dimo]

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

[Curt]

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.

[Curt]

Sorry, double post.

[Dimo]

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

[Curt]

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

[Cartoon Head]

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!