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

[Solved] Can't Get A Simple Width=100% Style Grid To Work

5 Answers 250 Views

Grid

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

Scott Smith asked on 18 Mar 2010, 04:07 PM

All I want is a grid where the columns and headers line up and fill the entire space, width=100%. No matter what combination of widths I put on any of the columns, on the MasterTableView, or on the RadGrid as a whole, it never evens out and spreads across the whole width of the RadGrid. Here is what I currently have:

    
                <rad:RadGrid ID="radgUnprocessedOrders" runat="server" RadControlsDir="../RadControls/" Skin="WebBlue" AllowSorting="True" GridLines="None" GroupingEnabled="False" AutoGenerateColumns="False" SkinsPath="../RadControls/Grid/Skins" Width="92%">  
        
                    <MasterTableView EnableTheming="True" Width="100%">  
        
                        <ExpandCollapseColumn Resizable="False" Visible="False">  
        
                        </ExpandCollapseColumn> 
        
                        <RowIndicatorColumn Visible="False">  
        
                        </RowIndicatorColumn> 
        
                        <Columns> 
        
                            <rad:GridBoundColumn DataField="OrderID" HeaderText="OrderID" UniqueName="OrderID" Visible="False">  
        
                            </rad:GridBoundColumn> 
        
                            <rad:GridBoundColumn DataField="DateOrdered" HeaderText="Date" UniqueName="DateOrdered" ItemStyle-Width="10%">  
        
                                <HeaderStyle Width="10%" /> 
        
                                <ItemStyle Width="10%" /> 
        
                            </rad:GridBoundColumn> 
        
                            <rad:GridBoundColumn DataField="MemberName" HeaderText="Member" UniqueName="MemberName" ItemStyle-Width="20%">  
        
                                <HeaderStyle Width="20%" /> 
        
                                <ItemStyle Width="20%" /> 
        
                            </rad:GridBoundColumn> 
        
                            <rad:GridBoundColumn DataField="OrderPoints" HeaderText="Order Points" UniqueName="OrderPoints" ItemStyle-Width="10%">  
        
                                <HeaderStyle Width="10%"/>  
        
                                <ItemStyle Width="10%" /> 
        
                            </rad:GridBoundColumn> 
        
                            <rad:GridBoundColumn DataField="OrderStatus" HeaderText="Status" UniqueName="OrderStatus" ItemStyle-Width="20%">  
        
                                <HeaderStyle Width="20%"/>  
        
                                <ItemStyle Width="20%" /> 
        
                            </rad:GridBoundColumn> 
        
                            <rad:GridTemplateColumn UniqueName="ViewOrderButton" HeaderText="View Order" Reorderable="False" ItemStyle-Width="10%">  
        
                                <HeaderStyle HorizontalAlign="Center" Width="10%" /> 
        
                                <ItemStyle HorizontalAlign="Center" Width="10%" /> 
        
                                <ItemTemplate> 
        
                                    <asp:LinkButton ID="lbtnViewOrder" runat="server" CommandName="ViewOrder" CommandArgument='<%# DataBinder.Eval(Container, "DataItem.OrderID") %>'><img src='../RadControls/Grid/Skins/Edit.gif' border='0' /></asp:LinkButton><br /> 
        
                                </ItemTemplate> 
        
                            </rad:GridTemplateColumn>                  
        
                        </Columns> 
        
                    </MasterTableView> 
        
                    <ClientSettings> 
        
                        <Selecting AllowRowSelect="True" /> 
        
                        <Scrolling AllowScroll="True" UseStaticHeaders="True" /> 
        
                    </ClientSettings> 
        
                </rad:RadGrid>

And here is what that looks like: http://i39.tinypic.com/21wmrs.jpg

I just want the columns headers and rows to line up and stretch out the full width of the RadGrid, but I can't seem to get that to happen no matter what I try, and believe me I have tried a LOT. Any suggestions?? I'm new to RadControls and am still learning. Thanks!

5 Answers, 1 is accepted

answered on 18 Mar 2010, 04:45 PM

Hi Scott ,

Using ItemStyle-Width is not recommended. Please use HeaderStyle-Width in order to specify column widths.

The easiest way to have equally sized columns is to set TableLayout="Fixed" for the MasterTableView and nothing more (no width for the MasterTableView or any column).

All the best,
Pavlina
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.

answered on 18 Mar 2010, 05:00 PM

I added TableLayout="Fixed" to the MasterTableView and removed all of the ItemStyle-Width instances and it still didn't line up. Then I removed all width tags and kept TableLayout="Fixed" in and this is what it looks like: http://i40.tinypic.com/jrr52x.jpg

I also tried keeping tablelayout=fixed and adding just header widths to the columns, like this (as an example of one column):

    
                            <rad:GridBoundColumn DataField="DateOrdered" HeaderText="Date" UniqueName="DateOrdered">  
        
                                <HeaderStyle Width="10%" /> 
        
                            </rad:GridBoundColumn>

Still didn't help. It seems like no matter what I do, i can't just have even column/item widths that line up and a grid that stretches the full 100%. The RadGrid outline is always far bigger than the grid itself, as you can see in the picture. Thanks for the help so far, any help in resolving this would be great.

answered on 19 Mar 2010, 09:15 AM

Hello Scott,

When table-layout is fixed all columns are displayed with equal widths by default and the sum of all widths is equal to the width of RadGrid. If you want to change this behavior, you should provide a valid width for the columns (using the HeaderStyle-Width property). Please have in mind that the sum of all widths must match the RadGrid width.

Best wishes,
Pavlina
the Telerik team