This is a migrated thread and some comments may be shown as answers.

GroupHeaderItemStyle-Wrap not working in RadGrid.

3 Answers 213 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Shantnu Chaturvedi
Top achievements
Rank 1
Shantnu Chaturvedi asked on 12 Nov 2008, 03:26 PM
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> 

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

 

3 Answers, 1 is accepted

Sort by
0
Dimo
Telerik team
answered on 13 Nov 2008, 09:21 AM
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.
0
Shantnu Chaturvedi
Top achievements
Rank 1
answered on 13 Nov 2008, 02:14 PM
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

0
Dimo
Telerik team
answered on 13 Nov 2008, 04:39 PM
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.
Tags
Grid
Asked by
Shantnu Chaturvedi
Top achievements
Rank 1
Answers by
Dimo
Telerik team
Shantnu Chaturvedi
Top achievements
Rank 1
Share this question
or