I have a grid that has lots of columns. When I was using GridView, I could make it easily fit on the screen without horizontal scrolling by setting CssClass for each column and setting widths (and visibility via display:none or display: table-cell) so from site to site we could adjust what columns the customer wants to see and their default width via the stylesheet.
So now I am trying to retrofit UltraWebGrid in as the means of evaluating whether or not to move to this product, and I have yet to find a way to be able to manage the widths of the columns so that they all fit wihout horizontal scrolling. I have Wrap="true" in both the header and item rows and that works, so that if I resize a column I get the necessary wrapping, but my initial column widths are coming out al one width - too wide for most columns) and I get a long horizontal scrollbar.
My DisplayLayout section is below.
<DisplayLayout AllowColSizingDefault="Free" AllowColumnMovingDefault="OnServer" AllowDeleteDefault="No"
AllowSortingDefault="OnClient" AllowUpdateDefault="No" BorderCollapseDefault="Separate"
HeaderClickActionDefault="SortMulti" Name="WLGrid" RowHeightDefault="15px"
RowSelectorsDefault="Yes" SelectTypeRowDefault="Extended" StationaryMargins="No"
ViewType="OutlookGroupBy" UseFixedHeaders="False" >
<GroupByBox>
<BoxStyle BackColor="ActiveBorder" BorderColor="Window">
</BoxStyle>
</GroupByBox>
<GroupByRowStyleDefault BackColor="Control" BorderColor="Window">
</GroupByRowStyleDefault>
<ActivationObject BorderColor="" BorderWidth="">
</ActivationObject>
<FooterStyleDefault BackColor="LightGray" BorderStyle="Solid" BorderWidth="1px">
<BorderDetails ColorLeft="White" ColorTop="White" WidthLeft="1px" WidthTop="1px" />
</FooterStyleDefault>
<RowStyleDefault CssClass="GridRow" Wrap="True" >
<BorderDetails ColorLeft="Window" ColorTop="Window" />
<Padding Left="3px" />
</RowStyleDefault>
<FilterOptionsDefault>
<FilterOperandDropDownStyle BackColor="White" BorderColor="Silver" BorderStyle="Solid"
BorderWidth="1px" CustomRules="overflow:auto;" Font-Names="Verdana,Arial,Helvetica,sans-serif"
Font-Size="11px">
<Padding Left="2px" />
</FilterOperandDropDownStyle>
<FilterHighlightRowStyle BackColor="#151C55" ForeColor="White">
</FilterHighlightRowStyle>
<FilterDropDownStyle BackColor="White" BorderColor="Silver" BorderStyle="Solid" BorderWidth="1px"
CustomRules="overflow:auto;" Font-Names="Verdana,Arial,Helvetica,sans-serif"
Font-Size="11px" Height="300px" Width="200px">
</FilterDropDownStyle>
</FilterOptionsDefault>
<HeaderStyleDefault CssClass="GridHeader" Wrap="True" Height="30px" />
<FrameStyle BackColor="Window" BorderColor="InactiveCaption" BorderStyle="Solid"
BorderWidth="1px" Font-Names="Microsoft Sans Serif" Font-Size="8.25pt" Height="275px"
Width="930px">
</FrameStyle>
<Pager MinimumPagesForDisplay="2" AllowPaging="True" PageSize="12" >
<PagerStyle CssClass="GridPager" >
</PagerStyle>
</Pager>
</DisplayLayout>
As you can see, I tried following another post that indicated how to get as-wide-as-it-takes type behavior, but that didn't work (unless as-wide-as-it-takes means setting all columns to the width that the widest column needs), but then as-wide-as-it-takes, even if it differs column to column, still isn;t what I want anyway, though better than what I am getting. Of course, ideally, I'd like to stil be able to use the CSS stylesheet classes to control it all, but any approach that allows me to have column widths each be set appropriately so I avoid horizontal scrolling is fine.
Down to one day to finish my eval and report back to my boss.
Thanks.
You should be able to set Grid.DisplayLayout.ColumnWidthDefault to "0px", and then set each column's width to a specific "<N>px".
This can be done either in the designer, or programmatically.
Setting ColumnWidthDefault to "0px" does not allow the columns to automatically size to whatever is needed, but now the user cannot manipulate the width further. That is, I now no longer have a horizontal scrollbar when I load the page, but when the user hovers the mouse over the header, I see the little <--> icon to resize a column and can drag it, but when I let go of the mouse button no column resizing occurs. The only change I made was setting ColumnWidthDefault to "0px" in the DisplayLayout section of my ascx. I still need to go and set widths of individual columns, but I don;t see how that would impact what i am now seeing. Is it not possible to control the widths as they initially appear while allowing the user to also resize the coluymns?
Oh, and thanks for the quick reply on the first step of this, anyway. This is one of only a couple areas left that I need to reach a favorable result on to be able to complete the eval with a recommendation to go with this grid. It's one of the things GridView can't do (user column resize) so it's one of the things that without which, I can;t justify moving away from GridView.
typo in my response - first sentence. Setting ColumnWidthDefault to "0px" does now allow...
other than that, still need to allow user resize while controlling column width.