Radgrid custom skin

[Jeroen Eikmans]

Hello,

I'm trying to create a custom skin for our RadGrids.
I would like to have the entire Vista skin except for the selected row, that needs to be orange like in the Office2007 skin.

What i do is create a new custom skin based on the Vista template, select the DataItem, then choose the Selected tab and change the background color to the orange color i looked up in the Office2007 skin. At this point i only get a small orange line at the bottom of the row. I removed the sprite.gif and downloaded the sprite.gif from the Office2007 skin. Uploaded it into the Vista skin and the entire row orange instead of only the bottom part.

My question is that we use a hierarchial grid and with the skin i made the expand/collapse button disappears when i select a row. The whole width of the row is orange but i would like the column where you see the expand/collapse button to keeps it's original color.
I've played around in the VSB but i can't seem to find the right property i need to set for this.

Anyone any advice on how to do this?

[Dimo]

Hello Roel,

The table cell, which contains the hierarchy expand/collapse button has a CSS class of rgExpandCol. You can use this CSS class to set a background color of your preference.

If the expand/collapse button disappears when you select a row, then there is something wrong with the custom skin. Please send it (including the CSS file and images) if you need further assistance.

Generally, the Visual Style Builder does not offer "design time" means to set every possible style in a skin. Sometimes you have to edit the CSS code itself. In such cases you need to know the control's CSS classes:

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

Kind regards,
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.

[Jeroen Eikmans]

Hello Dimo,

Thanks for the reply. I modified the skin now as described in the link you provided and this works perfectly.

I've tried to add a support ticket so i can upload the custom skin (in a zip) but i keep getting a server error at the time the upload is 70% done.
Is there some other way i can send this file to you?

[Dimo]

Hello Roel,

The ZIP file size should be no more than 20MB. You mean you want to share your skin with us or you have a question?

Kind regards,
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.

[Peter]

I've downloaded a custom skin from the Visual Style Builder... where do I place the files? There doesn't seem to be much help on the physical location of the folders/css files... just says to set the EnableEmbeddedSkins property to false and set the skin name.

And why do I have some many other folders? I only need to skin the Grid, why do I have folders (with images) for:

• Calendar
• Common
• FormDecorator
• Grid (assume I need this)
• Input
• Menu
• Slider
• CSS files for above

Also, the help article here suggests I might need images that aren't included in the downloaded skin ZIP file... do I need them?


Thanks.

[Galin]

Hi Peter,

In case you are using a custom skin for any RadControl, you should style all integrated RadControls. Therefore you need this folder for:

Calendar - filtering for date type columns

Common (necessary)

FormDecorator - only in case you are using form decorator

Grid (necessary)

Input - filtering

Menu - context menu

Slider - PagerStyle Mode="Slider"

ComboBox - PagerStyle Mode="NextPrevNumericAndAdvanced"

So, if you are not using one of the above feature you do not need the same folder too.

I hope this helps.

All the best,
Galin
the Telerik team

[Peter]

Thanks.

Where can I find help on where to physically place the skin files in my solution?

[Galin]

Hello Peter,

You can check out the following help topics
http://www.telerik.com/help/aspnet-ajax/introduction-skin-registration.html
http://www.telerik.com/help/aspnet-ajax/introduction-themes-how-to.html

Additionally, this demo page.

Regards,
Galin
the Telerik team