Headers and wrapping

14 replies. Last post: December 6, 2012 8:16 PM by Bernard Xiang
Tags :
  • (None)
  • New Discussion
  • New Question
  • New Product Feedback
John BoninMember

This is a copy of another post about this but I wanted to create a new topic as it is a little different.

Using WebGrid8, depending upon where the <HeaderStyle is located the style is different. If the <HeaderStyle in in the <LayoutSettings, the column headers don not wrap even though the wrap property is set to Yes. if the <HeaderStyle is in the <RootTable then the headers will warp. It was suggested in another post to use <br /> in the caption but that only works for the first time the grid is displayed, if you sort a column then the header shows the <br /> tag and doesn't wrap.

Using the FirstExperience.aspx sample replace the exisiting<Layout Setting with this one:

<LayoutSettings AllowFilter="Yes" AllowGrouping="Yes" AllowSorting="Yes" PagingMode="None"
                                GroupByBoxVisible="False" AllowColumnFreezing="No" AllowColumnMove="Yes" AllowExport="No" AlwaysShowHelpButton="false"  
                                AllowSelectColumns="Yes" RowLostFocusAction="NeverUpdate" AutoFilterSuggestion="True" FilterBarVisible="false"  
                                HideColumnsWhenGrouped="No" InProgressUIBehavior="ChangeCursorToHourGlass" PagingSize="50"  
                                ShowFilterStatus="True" RestoreRowSelection="RootTableOnly" VirtualPageSize="50" PagingExportMode="ExportAllData" 
                                AllowMultipleSelection="No" GroupRowInfoFormatDefault="[caption] : [value] ([count])" ColumnFooters="Yes" 
                                HeaderClickAction="SortSingle" ShowColumnAction="true" RowHeaders="No" CellClickAction="CellSelect">                                                        
                                <HeaderStyle BackColor="#2b5584" BorderColor="#2b5584" BorderStyle="Solid" BorderWidth="1px" Cursor="Hand" Wrap="true" 
                                    Font-Names="Verdana" Font-Size="8pt" ForeColor="White" Font-Bold="true" HorizontalAlign="Center" CustomRules="height:30px">
                                    <BorderSettings>
                                        <Left Color="#2b5584" />
                                        <Top Color="#2b5584" />
                                    </BorderSettings>
                                </HeaderStyle>
                                <FreezePaneSettings ShowInContextMenu="True" MaxFrozenColumns="3" AbsoluteScrolling="True" />
                                <TextSettings>
                                    <TextItems>
                                        <ISWebGrid:WebGridTextItem TextItem="CommonText/Refresh" TextValue="Refreshing RDRs" />
                                        <ISWebGrid:WebGridTextItem TextItem="CommonText/NoData" TextValue="There are no RDRs to display, modify the filters above to view RDRs" />
                                    </TextItems>
                                </TextSettings>
                                <AlternatingRowStyle Font-Names="Verdana" BackColor="#ECE9D8" Font-Size="8pt" HorizontalAlign="Center" />
                                <RowStyle Font-Names="Verdana" Font-Size="8pt" HorizontalAlign="Center" BackColor="#c9c9c9" />
                                <FooterStyle Font-Names="Verdana" BorderSettings-Left-Color="White" BorderSettings-Top-Color="White" />
                                <StatusBarStyle BaseStyle="Normal" Font-Bold="True" Font-Size="9pt">
                                </StatusBarStyle>
                            </LayoutSettings> 

Then On the Customer ID column change the <Caption to <caption="Customter<br />ID". Then run the page, see that Customer ID is on 2 lines, now click on a header to sort a column, the Customer ID column header now looks like "Customer<br />ID" it is not wrapped.

Now remove the following code form the <LayoutSetting and add it right below the <RootTable...> tag.

<HeaderStyle BackColor="#2b5584" BorderColor="#2b5584" BorderStyle="Solid" BorderWidth="1px" Cursor="Hand" Wrap="true" 
                                    Font-Names="Verdana" Font-Size="8pt" ForeColor="White" Font-Bold="true" HorizontalAlign="Center" CustomRules="height:30px">
                                    <BorderSettings>
                                        <Left Color="#2b5584" />
                                        <Top Color="#2b5584" />
                                    </BorderSettings>
                                </HeaderStyle>

Remove the break tag from the Customer ID and reduce the column width to 75px. Now view the page and notice that the header is wrapped and clicking on a column to sort the header stays wrapped.

I need to have the HeaderStyle in the Layout setting and the header to wrap. Any ideas on how to do this?

thanks

All times are GMT -5. The time now is 1:35 AM.
Previous Next