Search code examples
asp.netteleriktelerik-grid

Image in Telerik Radgrid EditCommandColumn doesn't match EditImageUrl


I have a detail table within a Telerik Radgrid that needs to allow inline editing. Everything in the grid works, except for the images displayed for Edit, Update, and Cancel operations aren't displaying. Instead they appear to be generic images.

The only link I was able to find regarding this issue is here but the instructions didn't resolve my issue. This is the grid displaying the incorrect images:

                    <radG:GridTableView runat="server" AllowSorting="true" AllowFilteringByColumn="true" AutoGenerateColumns="false"
                        ShowFooter="false" DataKeyNames="sysId" HierarchyLoadMode="ServerOnDemand"
                        GridLines="None" Name="RadGrid1" EditMode="InPlace" Width="100%" Height="75%" >
                        <EditFormSettings>
                            <EditColumn UniqueName="EditCommandColumn1" ButtonType="ImageButton" EditImageUrl="~/APP_THEMES/MASTERPAGE/btnEdit.gif"
                                UpdateImageUrl="~/APP_THEMES/MASTERPAGE/btnSaveSM.gif" CancelImageUrl="~/APP_THEMES/MASTERPAGE/btnCancelSM.gif"
                                UpdateText="Save" InsertText="Save" InsertImageUrl="~/APP_THEMES/MASTERPAGE/btnSaveSM.gif">
                            </EditColumn>
                        </EditFormSettings>
                        <Columns>
                            <radG:GridEditCommandColumn UniqueName="EditCommandColumn"
                                ButtonType="ImageButton" EditImageUrl="~/APP_THEMES/MASTERPAGE/btnEdit.gif">
                                <ItemStyle Width="5%" />
                            </radG:GridEditCommandColumn>

The correct icons should look like this: correct grid icons

But the generic ones that appear show this: incorrect grid icons

I know the paths are correct, because they are the same as the images used in other non-detail grids I have in the site. It's not a huge issue as it functions correctly, but it is definitely ugly and pretty frustrating.

What am I missing here?

Edit

I should have clarified that I tried using the same work present in the owner table's GridEditCommandColumn for the DetailTable which I'm showing now:

                   <radG:GridEditCommandColumn UniqueName="EditCommandColumn" UpdateText="Save" InsertText="Save"
                        ButtonType="ImageButton" InsertImageUrl="~/APP_THEMES/MASTERPAGE/btnSaveSM.gif"
                        UpdateImageUrl="~/APP_THEMES/MASTERPAGE/btnSaveSM.gif" CancelImageUrl="~/APP_THEMES/MASTERPAGE/btnCancelSM.gif"
                        EditImageUrl="~/APP_THEMES/MASTERPAGE/btnEdit.gif">
                        <ItemStyle Width="5%" />
                    </radG:GridEditCommandColumn>

Solution

  • Apply your images to the GridEditCommandColumn:

                        <telerik:GridEditCommandColumn UniqueName="EditCommandColumn"
                            ButtonType="ImageButton" EditImageUrl="~/images/icon_16x16.png" 
                            UpdateImageUrl="~/images/icon_16x16.png" CancelImageUrl="~/images/icon_16x16.png"
                            UpdateText="Save" InsertText="Save" InsertImageUrl="~/images/icon_16x16.png">
                            <ItemStyle Width="5%" />
                        </telerik:GridEditCommandColumn>