GroupHeaderItemStyle-Wrap not working in RadGrid.

[Shantnu Chaturvedi]

Hi,

I have the following code for my RadGrid
 
The text Wrap in the Property "GroupHeaderItemStyle-Wrap" does not seem to work.

I tried 
<GroupHeaderItemStyle Wrap="true" />
and also
<MasterTableView ..... GroupHeaderItemStyle-Wrap="true".........>

But both these do not seem to work.

The grouping column header using the column "QUESTION" is not wrapping.
But the item column "ANSWER" under the grouped column "QUESTION" wraps fine.
Cannot figure out what might be the issue.

Can you help me out.

------------------------------------------------------------------------------------------------------------------------------------------------------
------------------------------------------------------------------------------------------------------------------------------------------------------ 

 

<telerik:RadGrid ID="RadGrid1" runat="server" Width="98%" Skin="Hay" PageSize="08" AllowSorting="True"

 

 

AllowMultiRowSelection="True" AllowPaging="True" ShowGroupPanel="false" GridLines="None"

 

 

AutoGenerateColumns="False" Height="360px" ItemStyle-Height="8" BorderWidth="4"

 

 

BorderColor="#5A8D4A" ShowStatusBar="true" ShowFooter="false" >

 

 

 

<PagerStyle Mode ="NextPrevNumericAndAdvanced" />

 

 

<HeaderStyle Font-Bold="true" />

 

 

<MasterTableView DataKeyNames="ID" DataMember="MyRegistration" AllowMultiColumnSorting="True"

 

 

Width="99%" TableLayout="Fixed" ShowFooter="false"

 

 

GroupHeaderItemStyle-Wrap="true" PagerStyle-Wrap="true"

 

 

GroupHeaderItemStyle-HorizontalAlign="Left" GroupHeaderItemStyle-Font-Bold="true"

 

 

GroupHeaderItemStyle-ForeColor="Black" GroupHeaderItemStyle-Font-Size="Small"

 

 

ItemStyle-ForeColor="Black" AlternatingItemStyle-ForeColor ="Black"

 

 

AutoGenerateColumns ="false"

 

 

HeaderStyle-Font-Size="Larger" HeaderStyle-Font-Bold="true" HeaderStyle-ForeColor="White"

 

 

HeaderStyle-BackColor="#5A8D4A" HeaderStyle-Height="20" HeaderStyle-VerticalAlign="Top"

 

 

HeaderStyle-HorizontalAlign="center" >

 

 

<GroupByExpressions>

 

 

<telerik:GridGroupByExpression>

 

 

<SelectFields>

 

 

<telerik:GridGroupByField FieldAlias="Question" FieldName="QUESTION" FormatString="" HeaderText="">

 

 

</telerik:GridGroupByField>

 

 

</SelectFields>

 

 

<GroupByFields>

 

 

<telerik:GridGroupByField FieldAlias="QUESTION" SortOrder="Ascending" FieldName="QUESTION" FormatString="" HeaderText="">

 

 

</telerik:GridGroupByField>

 

 

</GroupByFields>

 

 

</telerik:GridGroupByExpression>

 

 

</GroupByExpressions>

 

 

<Columns>

 

 

<telerik:GridBoundColumn UniqueName="QUESTION" SortExpression="QUESTION" HeaderText="Question"

 

 

DataField="QUESTION" ItemStyle-HorizontalAlign ="Left" Visible ="false"

 

 

ItemStyle-Font-Size="Small" ItemStyle-Font-Bold="true"

 

 

ItemStyle-Width="0px">

 

 

</telerik:GridBoundColumn>

 

 

<telerik:GridBoundColumn UniqueName="ANSWER" SortExpression="ANSWER" HeaderText="Questions / Answers"

 

 

DataField="ANSWER" ItemStyle-HorizontalAlign ="Left" Visible ="true"

 

 

ItemStyle-Font-Size="Small" ItemStyle-Font-Bold="false"

 

 

ItemStyle-Width="94%">

 

 

</telerik:GridBoundColumn>

 

 

 

 

<telerik:GridHyperLinkColumn UniqueName="EditCurrentQA" HeaderText=" " target="_blank"

 

 

DataNavigateUrlFields="ID"

 

 

ItemStyle-HorizontalAlign="Center"

 

 

ItemStyle-ForeColor ="#5A8D4A" Text ="Edit"

 

 

DataNavigateUrlFormatString ="./page.aspx?questionAnswerID={0}"

 

 

ItemStyle-Width="4%"

 

 

Visible ="false" >

 

 

</telerik:GridHyperLinkColumn>

 

 

</Columns>

 

 

</MasterTableView>

 

 

 

<GroupHeaderItemStyle Wrap="true" />

 

 

<ClientSettings AllowDragToGroup="True">

 

 

<Selecting AllowRowSelect="True"></Selecting>

 

 

<Scrolling AllowScroll="True" UseStaticHeaders="True"></Scrolling>

 

 

<ClientMessages DragToGroupOrReorder="Drag to group" />

 

 

</ClientSettings>

 

 

</telerik:RadGrid> 

------------------------------------------------------------------------------------------------------------------------------------------------------
------------------------------------------------------------------------------------------------------------------------------------------------------

 

[Dimo]

Hi Shantnu,

Please refrain from posting a forum post and a support ticket for the same thing at the same time. Or if you do post a support ticket after posting in the forums, mention this in the support ticket.

Now to your question:

If you are NOT using static headers, group headers in RadGrid are able to wrap without the need to set anything additional.

If you are using scrolling with static headers, group headers are rendered in a somewhat special way in order to span across several cells in the group header item. The text in the group header has an inline style applied, which prevents wrapping. You can override this style by adding the following CSS rule to your web application, however, this is more likely to break the layout, than wrap the group header text as you expect. Anyway, please try adding

.GroupHeader_Skin  div
{
     white-space: normal !important ;
}


Best wishes,
Dimo
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.

[Shantnu Chaturvedi]

Hi dimo,

As anticipated by you, this worked but not as expected.
The Group header wraps now, but it also overlaps on the Item it is displaying.
This spoils the view in the Grid.

Is there a way to make the GroupHeader wrap around but not overlap on the GroupItem below it ?

I don't know how to attach images to this post or else I would have done so.

Thank You,
Shantnu

[Dimo]

Hi Shantnu,

Here is the solution for you. Note that you must set width in pixels:

.GroupHeader_Skin  div
{
    position:relative !important;
    top:0 !important;
    width:400px !important;
    white-space: normal !important ;
}


Regards,
Dimo
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.