Group Header Settings

[Marc]

I have a few questions about setting the group header items when not using a built-in skin (setting Skin="").
1. The sort button image shows up, but not the ungroup button image. How can I set this?
2. How can I set the format of the field name and the set of field name, sort button and ungroup button? For example, set a box around the three items?

Thanks,
Marc

[Venelin]

Hi Marc,

I would suggest you to go through these help articles:

1. Modifying existing skins/creating new skins

2. Skins

3. CSS sprites

There you can find the following information:
"If you have a grid that is already customized and you want to keep all your settings, you should set Skin property to an empty string (Skin="").In case you haven't defined any appearance options (styles), you will have a bare (not skinned) grid. Note, however, that in this case you will still have the default grid images (shown below)."  The ungroup button image is not part of the images enumerated in the documentation. Moreover, by setting Skin="" the CSS classes like .rgUngroup which are needed for styling are no longer rendered. See the documentation above to resolve the issue.

I am no sure if I understand correctly your second question but if you want to customize the formatting of the group header you can use the approach demonstrated in this help topic: Customizing GridGroupHeaderItem. Please clarify what do you mean exactly by "For example, set a box around the three items?".

Regards,
Venelin
Telerik

[Marc]

Venelin,

I misspoke on what I was trying to do. It is not in the group header, but rather the group panel.

The second question refers to how the group panel items are grouped as in the image (group panel.png) attached, which is from this sample:
http://demos.telerik.com/aspnet-ajax/grid/examples/groupby/outlookstyle/defaultcs.aspx

When setting the skin and applying a CSS class to the Group Panel, the result is in the other image (modified group panel.png) attached. The image that is missing is for the ungroup function. How can I make my modified group panel have the features of the other (grouping box around the items, and ungroup button image).

Thanks,
Marc

[Venelin]

Hi Marc,

Please verify if you are not using Skin="". It is not recommended for the reasons mentioned in the previous post. To use different image for the ungroup button you can use the following CSS rule:

div.RadGrid .rgUngroup {
    background: url("sprite.gif") no-repeat 0 0;
}

Here the values for the background position depends on your specific case. I attach a sample project that is illustrating the approach.

I hope this helps.

Regards,
Venelin
Telerik