Edit/Update/Cancel image - Inline Editing

[pradip]

Hi 

I am using inline edit inside grid. I want to change the default images for Edit/Update/Cancel. I am using sprite css and not exactly image. So please guide how to achieve this

I tried this - 
<telerik:GridEditCommandColumn ItemStyle-Width="60px" HeaderStyle-Width="60px" ButtonType="ImageButton"
   UpdateText="Update" CancelText="Cancel" EditText="Edit"  ></telerik:GridEditCommandColumn> 

This shows telerik default images only.... As dont have image so I cannot give ImageUrl.

I tried giving cssClass like this.....
<telerik:GridEditCommandColumn ItemStyle-Width="60px" HeaderStyle-Width="60px" ButtonType="LinkButton"  ItemStyle-CssClass="buttonEdit"  UpdateText="Update" CancelText="Cancel" EditText="Edit" ></telerik:GridEditCommandColumn>

It is only showing me - Text as Edit/Update/Cancel.

Please guide me on this. 

Thanks,
Pradip

[Jayesh Goyani]

Hello pradip,

Please set image url in below code snippet.

<telerik:GridEditCommandColumn EditImageUrl="" UpdateImageUrl="" CancelImageUrl=""></telerik:GridEditCommandColumn>

Thanks,
Jayesh Goyani

[pradip]

Is there a way to achieve this by using css Sprites Class? 

IN my app - all buttons are actually links and i am giving css class which makes it look like button. This is helpful for me in localization, as I just localize text otherwise i need to keep copy of images for different languages. I am having 8 languages in my app.

Please suggest.

Thanks,
Pradip

[Galin]

Hi Pradip,

You can achieve this with the following CSS rule:

.buttonEdit
{
    background: url("images/image/gif") no-repeat 1px 1px transparent;
    border-width: 0;
    display: inline-block;
    height: 12px;
    width: 12px;
}

All the best,
Galin
the Telerik team