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

Need Grid width/column width to size w/horizontal scrollbar

1 Answer 190 Views
Grid
This is a migrated thread and some comments may be shown as answers.
LANCE NECKAR
Top achievements
Rank 1
LANCE NECKAR asked on 08 Mar 2009, 08:01 PM
I have a Grid within a table cell <td></td> that I am having difficulty getting to render the way I want.  The Grid has too many columns to show in the table cell so I want the Grid to automatically size down and provide a scrollbar and still give me fully sized columns (for the data in that column.) 

1) In my original try, the entire Grid rendered and the table cell was too large and caused the entire table row to extend beyond all the other rows in the table.  All the columns were sized to the maximum data item size for that column.

2) In my next try, I set TABLELAYOUT="FIXED" for the MasterTableView.  The Grid then rendered within the table cell at the size I had set for the table cell. (The table row was also the same size as the other table rows.)  However, in this rendering, all the columns showed up similarly sized and too small - the text was cut off.  I can manually size the columns on the page and a horizontal scrollbar will appear for columns that get pushed out of the table cell. (I don't want the user to have to do this though.)

3) If I explicitly size each column's HEADERSTYLE WIDTH, I get what happens in #1 above, the entire Grid will render and the table cell will be too large and cause the entire table row to extend beyond all the other rows in the table - again.  I do not get a horizontal scrollbar for the Grid.

Is there a setting I'm missing or something I'm not taking into consideration?  Thanks, Lance

This is the code for #2, which is where I am so far:

<td colspan="2" width="60%">  
 
<telerik:RadGrid ID="trcrgFlightList" runat="server" AllowSorting="True" AutoGenerateColumns="False" GridLines="Horizontal" Height="180px" Skin="Vista" Width="100%" BorderStyle="Solid" ShowStatusBar="True" EnableHeaderContextMenu="True">  
 
<HeaderContextMenu Skin="Vista">  
 
<CollapseAnimation Type="OutQuint" Duration="200"></CollapseAnimation> 
 
</HeaderContextMenu> 
 
<MasterTableView Font-Names="Tahoma" Font-Size="10pt" TableLayout="Fixed">  
 
<Columns> 
 
<telerik:GridBoundColumn HeaderText="ACID" ReadOnly="True" UniqueName="ACID" DataField="ACID" Groupable="False" SortedBackColor="192, 255, 192">  
 
<ItemStyle HorizontalAlign="Center" VerticalAlign="Middle" Wrap="False" /> 
 
</telerik:GridBoundColumn> 
 
<telerik:GridBoundColumn HeaderText="Origin" ReadOnly="True" UniqueName="Origin" DataField="Origin" Groupable="False" SortedBackColor="192, 255, 192">  
 
<ItemStyle HorizontalAlign="Center" VerticalAlign="Middle" Wrap="False" /> 
 
</telerik:GridBoundColumn> 
 
<telerik:GridBoundColumn HeaderText="Dest." ReadOnly="True" UniqueName="Destination" DataField="Destination" Groupable="False" SortedBackColor="192, 255, 192">  
 
<ItemStyle HorizontalAlign="Center" VerticalAlign="Middle" Wrap="False" /> 
 
</telerik:GridBoundColumn> 
 
<telerik:GridBoundColumn HeaderText="OETD" ReadOnly="True" UniqueName="OETD" DataField="OETD" DataFormatString="{0:MM/dd/yyyy HH:mmZ}" DataType="System.DateTime" Groupable="False" SortedBackColor="192, 255, 192">  
 
<ItemStyle HorizontalAlign="Center" VerticalAlign="Middle" Wrap="False" /> 
 
</telerik:GridBoundColumn> 
 
<telerik:GridBoundColumn HeaderText="OETA" ReadOnly="True" UniqueName="OETA" DataField="OETA" DataFormatString="{0:MM/dd/yyyy HH:mmZ}" DataType="System.DateTime" Groupable="False" SortedBackColor="192, 255, 192">  
 
<ItemStyle HorizontalAlign="Center" VerticalAlign="Middle" Wrap="False" /> 
 
</telerik:GridBoundColumn> 
 
<telerik:GridBoundColumn HeaderText="ETD" ReadOnly="True" UniqueName="ETD" DataField="ETD" DataFormatString="{0:MM/dd/yyyy HH:mmZ}" DataType="System.DateTime" Groupable="False" SortedBackColor="192, 255, 192">  
 
<ItemStyle HorizontalAlign="Center" VerticalAlign="Middle" Wrap="False" /> 
 
</telerik:GridBoundColumn> 
 
<telerik:GridBoundColumn HeaderText="ETA" ReadOnly="True" UniqueName="ETA" DataField="ETA" DataFormatString="{0:MM/dd/yyyy HH:mmZ}" DataType="System.DateTime" Groupable="False" SortedBackColor="192, 255, 192">  
 
<ItemStyle HorizontalAlign="Center" VerticalAlign="Middle" Wrap="False" /> 
 
</telerik:GridBoundColumn> 
 
<telerik:GridBoundColumn HeaderText="CTD" ReadOnly="True" UniqueName="CTD" DataField="CTD" DataFormatString="{0:MM/dd/yyyy HH:mmZ}" DataType="System.DateTime" Groupable="False" SortedBackColor="192, 255, 192">  
 
<ItemStyle HorizontalAlign="Center" VerticalAlign="Middle" Wrap="False" /> 
 
</telerik:GridBoundColumn> 
 
<telerik:GridBoundColumn HeaderText="CTA" ReadOnly="True" UniqueName="CTA" DataField="CTA" DataFormatString="{0:MM/dd/yyyy HH:mmZ}" DataType="System.DateTime" Groupable="False" SortedBackColor="192, 255, 192">  
 
<ItemStyle HorizontalAlign="Center" VerticalAlign="Middle" Wrap="False" /> 
 
</telerik:GridBoundColumn> 
 
<telerik:GridBoundColumn HeaderText="ASLT" ReadOnly="True" UniqueName="ASLT" DataField="ASLT" Groupable="False" SortedBackColor="192, 255, 192">  
 
<ItemStyle HorizontalAlign="Center" VerticalAlign="Middle" Wrap="False" /> 
 
</telerik:GridBoundColumn> 
 
<telerik:GridBoundColumn HeaderText="Delay" ReadOnly="True" UniqueName="Delay" DataField="Delay" DataType="System.Int32" Groupable="False" SortedBackColor="192, 255, 192">  
 
<ItemStyle HorizontalAlign="Center" VerticalAlign="Middle" Wrap="False" /> 
 
</telerik:GridBoundColumn> 
 
</Columns> 
 
</MasterTableView> 
 
<ClientSettings AllowColumnsReorder="True" ReorderColumnsOnClient="True" ColumnsReorderMethod="Reorder">  
 
<Selecting AllowRowSelect="True" /> 
 
<Scrolling AllowScroll="True" UseStaticHeaders="True" /> 
 
<Resizing AllowColumnResize="True" /> 
 
</ClientSettings> 
 
<FilterMenu Skin="Vista">  
 
<CollapseAnimation Type="OutQuint" Duration="200"></CollapseAnimation> 
 
</FilterMenu> 
 
<HeaderStyle Font-Bold="True" /> 
 
</telerik:RadGrid> 
 
</td> 
 

1 Answer, 1 is accepted

Sort by
0
LANCE NECKAR
Top achievements
Rank 1
answered on 09 Mar 2009, 05:08 PM
I believe I found the solution:

<table style="table-layout:fixed;">
  grid definition
</table>

I read all the way down on the "basic scrolling" page.
Tags
Grid
Asked by
LANCE NECKAR
Top achievements
Rank 1
Answers by
LANCE NECKAR
Top achievements
Rank 1
Share this question
or