Your Privacy Matters: We use our own and third-party cookies to improve your experience on our website. By continuing to use the website we understand that you accept their use. Cookie Policy
75
Setting Grid Column widths when lots of columns
posted

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"

StationaryMarginsOutlookGroupBy="True" TableLayout="Auto" Version="4.00"

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">

<Padding Left="2px" />

</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" >

<BorderDetails ColorLeft="White" ColorTop="White" WidthLeft="1px" WidthTop="1px" />

</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.

  • 8680
    posted

    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.