[Solved] RadGrid Skin

[Sean Eby]

All, I am trying to upgrade my Prometheus build to the Q1 2008 ASP.NET Ajax controls.  In doing this, I need to customize the RadGrid.  Normally, I make a copy of the Vista skin, and modify it as needed.  However, with this new Q1 2008 version, not all the components of the skin seem to be present. 

For example, the latest Prometheus version had images in it's skin directory for: pagerBg.gif

The new ASP.NET Ajax version has no such gif file.

Any ideas?

[Dimo]

Hello Sean,

As of Q1 2008, RadGrid skins have undergone a major rewrite and optimization. The skins now use CSS sprites for all their background images and image buttons. As a result, RadGrid skins load a lot faster with minimum number of HTTP requests to the server (1 for the CSS file and 1-2 for all images).

If you want to use a modified version of a RadGrid skin, you have two options:

1) Edit the sprite image and adjust the background-position style for the corresponding RadGrid element (for example header cells, pager, selected row, etc). The sprite image is located here:

[RadControls_for_ASP.NET_AJAX_installation_folder] / Skins / [Skin_Name] / Grid / sprite.gif

2) Add a new custom image to the skin and set it as a background image to the desired RadGrid element.

Further information about RadGrid CSS sprites is available here:

RadGrid CSS Sprites

Let us know if you need more information or assistance.


Regards,
Dimo
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center

[Sean Eby]

Ok, I can see that the elements are in the Sprite.gif file.  Thanks.  However, I am having a few other issues.

First, when I modify the Sprite.gif, making it gray scale for example, the Filter Hover Menu's dissapear, as though they have no style at all.  How do I now style the Filter Menu?

Second, not all the images are pointing to the sprite.gif.  For example, Filter.gif, sortDesc.gif, etc... Is there a reason for this?

Thanks

[Sean Eby]

In fact, as soon as I set the grid's

Me

.EnableEmbeddedSkins = False

The filter menu dissapears, even if I am pointing to the same sprite.gif that it's supposed to use internally. 

Any ideas?

[Dimo]

Hello Sean,

As of Q1 2008, RadGrid uses RadMenu for its FilterMenu, instead of its old custom menu. So when you set EnableEmbeddedSkins="False", RadMenu will expect you to register a custom skin for it too, not just for RadGrid. If you don't want to create a custom skin for RadMenu, you can use the embedded Vista by setting in code-behind:

RadGrid_ID.FilterMenu.EnableEmbeddedSkins = true
RadGrid_ID.FilterMenu.Skin = "Vista"


As for the .gif images - it is possible that some images are not pointing to the sprite image. Probably you have set somewhere ImageType="ImageButton", instead of "SpriteButton", is that correct? In addition, some images, e.g. Edit and Delete are ImageButtons by default.

If the above doesn't help, please copy/paste your RadGrid declaration, so that we can trace where the image buttons come from.


All the best,
Dimo
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center

[Sean Eby]

FilterMenu:
Ok, I'll try customizing that.  However, I use the RadMenu for my overall site, and for the RadGrid.  I do NOT want the same style for both.  How can I seperate them?

Another thing I noticed is that when I set the Me.EnableEmbeddedSkins = False on the Grid, the Class (cssclass) settings that used to point to rgFilter is now missing.  Any ideas?

Sprite Images:
Just look in the CSS for where it points to the Sprites, they're pointed to areas in the sprite that have no images.

For example, in teh Grid.Vista.css file, you have:

.RadGrid_Vista .rgFilter{background-position:2px -1597px;}

However, there is no image at that location.  Perhaps it should be:

RadGrid_Vista .rgFilter{background-position:0px -1600px;}

[Sean Eby]

I noticed yet another thing with the FilterMenu.  The Prometheus version had an indicator for which FilterMenuItem was selected, but the new AJAX version does not.

Is there a way we can get this back?

[Dimo]

Hello Sean,

If you want your Vista RadMenus and RadGrid Vista FilterMenus to look different, it is best to create a custom RadMenu skin for the FilterMenu (it should have the same name as the RadGrid custom skin). Overriding some RadMenu Vista styles for the FilterMenu is also an option, but I recommend the first approach as more straightforward and bulletproof.

If you set EnableEmbeddedSkins="False" and ImagesPath="....", RadGrid starts using image buttons instead of sprite buttons. That is why the CSS class rgFilter is lost - it is responsible for supplying a sprite background image. If you want to use a sprite image with a custom skin, please remove the ImagesPath property from RadGrid.

As for the sprite image and the background-position coordinates, which seem to point to location where there is no image - the coordinates are not the ones you think they should be, because the sprite button is a little larger than the filter background image and the image has to be centered inside the sprite button.

With regard to the FilterMenu and the selected filter indicator - you can set a CSS class or ImageUrl to the selected filter. Here is an example setting both:

private void Page_Init(object sender, EventArgs e)
{
    RadGrid2.FilterMenu.ItemClick += new RadMenuEventHandler(FilterMenu_ItemClick);
}

void FilterMenu_ItemClick(object sender, RadMenuEventArgs e)
{
   foreach (RadMenuItem item1 in RadGrid2.FilterMenu.GetAllItems())
   {
      item1.ImageUrl = "";
      item1.CssClass = "";
   }
   e.Item.ImageUrl = ".....";
   e.Item.CssClass = "rmExpanded";
}

Best wishes,
Dimo
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center

[Sean Eby]

Thanks for the guidance.  I understand what you're saying about the FilterMenu and Menu, but I'm not sure how to specify them differently.

Right now I have

In my MasterPage: 
<link type="text/css" rel="stylesheet" href="./Themes/Telerik/Vista/Menu.Vista.css" />

In my RadGrid: 
Me.FilterMenu.Skin = "Vista"
Me.FilterMenu.EnableEmbeddedSkins = False

I need both the FilterMenu and the Menu to have custom styles, and I need many styles for the Menu (as they are themed per site type).

How would I specify the custom filtermenu skin and cutom menu skin in my MasterPage vs the me.Skin= directive?

[Dimo]

Hello Sean,

You need to have skins for RadMenu and FilterMenu with different names. In addition, it is recommended that the name of the FilterMenu skin is the same as the corresponding RadGrid skin name, things are a lot simpler that way.

Regards,
Dimo
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center

[Sean Eby]

That's where I'm a bit confused.  Are you saying to do something like this?

in MasterPage
<link type="text/css" rel="stylesheet" href="./Themes/Telerik/Vista/FilterMenu.Vista.css" />
<link type="text/css" rel="stylesheet" href="./Themes/Telerik/Vista/Menu.Vista.css" />


In Grid
Me.FilterMenu.Skin = "Vista"

In Menu
Me.Skin = "Vista"

[Sean Eby]

Doh, I think I understand.  Literally make a custom skin, like "MySkin".  Use that for the FilterMenu, keeping all the names and references the same under MySkin.

Make a "MyMenuSkin" for the menu.

Thanks!