Change image for save and cancel changes

[davortsan]

Hi everyone,

I'm using a radGrid in a test web page. The EditMode is set to Batch and the "Add new row", "Save changes", and "Cancel changes" are visible. I changed the "Add new row" image using MasterTableView-CommandItemSettings-AddNewRecordImageUrl. I would like to change the image for "Save changes" and "Cancel changes". I have been looking for information about this but I didn't find it. If this is not posible, I would like to know how I could invoke the RadGrid1_BatchEditCommand function from a CommandItemTemplate in the radGrid.

Thanks a lot in advance.

Cheers.

David Ortega.

[davortsan]

Wow! I never thought this issue was so difficult to resolve....

[Eyup]

Hello David,

You can use the following approach to change the Save icon:

<style type="text/css">
    div.RadGrid .rgSave {
        background: url(icon.png) no-repeat 0 0;
    }
</style>

Hope this helps.

Regards,
Eyup
Telerik

 

 

[davortsan]

Thanks Eyup!. That worked for me.

[Borja]

Hi Eyup,

I have the same problem David had. I used your css code and worked fine for Save Changes button, but not for Cancel Changes button. This is the css code im trying:

div.RadGrid .rgCancel {
        background: url(Images/Cancel.png) no-repeat 0 0;
    }

Thanks in advance,

Carlos

[davortsan]

Hi Carlos,

I changed the image of "Cancel changes" too, and this is my code:

div.RadGrid .rgCancel {
    background: url(../../img/buttons/undo.png) no-repeat 0 0;
}

I think your issue could be the path of Cancel.png. Could you check it, please?

Thanks a lot.

Cheers.

David Ortega.

[davortsan]

Another test will be to press Ctrl+F5 to avoid using the browser cache. I have to do it in several pages to check the changes had been applied successfully.

Cheers.

David Ortega

[Borja]

Hi David,

Thanks for your answer but I think the path of Cancel.png its Ok, and the browser cache was just cleaned and didnt work. I attach some screenshots. Both images have same path, but only Update.png its working, as you can see in the grid screenshot, in Chrome console i can see Style is beeing applied. If i hardcode the path in the browser i can see the image., so i cant realize what im missing.

Thanks for your help,

Carlos

[Borja]

Hi all,

I just solved my problem by adding " !important " to .rgCancel css code. Also needed to change vertical-align to middle for the image to be displayed correctly.

Thanks a lot,

Carlos

[davortsan]

Great! I write it down in case...

Thanks a lot, Carlos!

David Ortega

[Eyup]

Hi Guys,

David, thank you for sharing your ideas and experience with this case.

Carlos, I'm glad you've managed to resolve the issue. Generally, the !important directive shouldn't be necessary in this case, but perhaps you have some different theme or custom styling which may alter the default CSS specificity.

Regards,
Eyup
Telerik