[Solved] CSS Sprites in Grid

[bob ter]

Hi,

I would like to use sprites in my grid to help it load faster. I have had a look at the previous topics but no one seems to be able to answer the question properly.

If I add a button column to my grid how do I pick out my own image from a sprite. I do not want to use the new, edit or delete columns, I want to use my own columns which I've added myself. I've seen people mention sprite buttons but this isn't an option in the drop down.

I have also read the articles but they dont talk about using sprites in user generated columns only the new.edit, delete ones.

Can anyone help?

[Dimo]

Hello Bob,

What we call a "sprite button" is actually a push button with:

- specific width and height applied
- transparent background color
- no borders
- background image applied
- only a space as button text

So if you want to have a button column with your custom sprites, use something like this:

<telerik:GridButtonColumn ButtonType="PushButton" ButtonCssClass="MySpriteButtonClass" Text=" " />

Set all required CSS styles to the custom CSS class, including the background image style. Since there is no text, in order to increase accessibility, it is good to set a tooltip at runtime in ItemCreated.

Lots of general information about creating and using sprites can be found in the Internet and also here:

http://www.telerik.com/help/aspnet-ajax/css-sprites.html

All the best,
Dimo
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.

[bob ter]

Hi,

I tried what you suggested but got the following error -

Type 'Telerik.Web.UI.GridButtonColumn' does not have a public property named 'ButtonCssClass'.

Do you have an example project as I can work from as I think it would be easier, there doesn't seem to be a straight answer to this problem.

Thks

[Dimo]

Hi,

You seem to be using an old RadGrid version. Please consider upgrading or alternatively, you will have to set the CSS class of the button at runtime by using the RadGrid's ItemCreated event and the buttons column's UniqueName.

http://www.telerik.com/help/aspnet-ajax/grdaccessingcellsandrows.html

http://demos.telerik.com/aspnet-ajax/grid/examples/programming/accessingcellsandrows/defaultcs.aspx

Sincerely yours,
Dimo
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.