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

[Solved] Standardize width of grids

2 Answers 132 Views

Grid

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

sircutbreaker asked on 14 Oct 2009, 12:23 AM

I have a site that is a series of grids.. i have a couple columns set for horizontal width, but more often than not the grids dont have many columns set to a certain size...

I want to make the grid always expand to 100% of its container... and on a few grids, even though i specified the width to be 100%, the grid does not go to the edge of the container...

what would cause this?

Here is the markup of the page... i want the grid to extend to the right edge...

rendered page image

    
            <%@ Page Title="" Language="C#" MasterPageFile="~/cm/cm.master" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="cm_Default" %> 
        
            <%@ Register assembly="Telerik.Web.UI" namespace="Telerik.Web.UI" tagprefix="telerik" %> 
        
            <asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server"> 
        
            </asp:Content> 
        
            <asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server"> 
        
                <telerik:RadGrid ID="rgPageBanners" runat="server" GridLines="None" Width="100%" 
        
                    AllowSorting="True" AllowPaging="True"  
        
                    onneeddatasource="rgPageBanners_NeedDataSource"  
        
                    onitemcommand="rgPageBanners_ItemCommand"> 
        
            <MasterTableView AutoGenerateColumns="False" DataKeyNames="PageBannersId"  
        
                        CommandItemDisplay="TopAndBottom"> 
        
            <RowIndicatorColumn> 
        
            <HeaderStyle Width="20px"></HeaderStyle> 
        
            </RowIndicatorColumn> 
        
            <ExpandCollapseColumn> 
        
            <HeaderStyle Width="20px"></HeaderStyle> 
        
            </ExpandCollapseColumn> 
        
                <CommandItemSettings AddNewRecordText="Add page banner" /> 
        
                <Columns> 
        
                    <telerik:GridBoundColumn DataField="PageBannersId" DataType="System.Int32"  
        
                        HeaderText="PageBannersId" ReadOnly="True" SortExpression="PageBannersId"  
        
                        UniqueName="PageBannersId"> 
        
                    </telerik:GridBoundColumn> 
        
                    <telerik:GridBoundColumn DataField="PagesId" DataType="System.Int32"  
        
                        HeaderText="PagesId" SortExpression="PagesId" UniqueName="PagesId"> 
        
                    </telerik:GridBoundColumn> 
        
                    <telerik:GridBoundColumn DataField="BannerName" HeaderText="BannerName"  
        
                        SortExpression="BannerName" UniqueName="BannerName"> 
        
                    </telerik:GridBoundColumn> 
        
                    <telerik:GridBoundColumn DataField="DateCreated" DataType="System.DateTime"  
        
                        HeaderText="DateCreated" SortExpression="DateCreated" UniqueName="DateCreated"> 
        
                    </telerik:GridBoundColumn> 
        
                    <telerik:GridBoundColumn DataField="DateModified" DataType="System.DateTime"  
        
                        HeaderText="DateModified" SortExpression="DateModified"  
        
                        UniqueName="DateModified"> 
        
                    </telerik:GridBoundColumn> 
        
                    <telerik:GridCheckBoxColumn DataField="Active" DataType="System.Boolean"  
        
                        HeaderText="Active" SortExpression="Active" UniqueName="Active"> 
        
                    </telerik:GridCheckBoxColumn> 
        
                              <telerik:GridEditCommandColumn> 
        
                                  <HeaderStyle Width="80px" /> 
        
                                 </telerik:GridEditCommandColumn>                 
        
                                 <telerik:GridButtonColumn CommandName="Delete" Text="Delete" ConfirmText="Are you sure?"  
        
                                     UniqueName="DeleteColumn"> 
        
                                     <HeaderStyle Width="100px" /> 
        
                                 </telerik:GridButtonColumn> 
        
                </Columns> 
        
            <EditFormSettings EditFormType="WebUserControl" UserControlName="~/cm/_uc/pagebanners.ascx" CaptionFormatString="<span class='PopupHeader'>Manage Banner</span>"> 
        
            <EditColumn UniqueName="EditCommandColumn1"></EditColumn> 
        
            </EditFormSettings> 
        
            </MasterTableView> 
        
                    <ClientSettings> 
        
                        <Selecting AllowRowSelect="True" /> 
        
                    </ClientSettings> 
        
                </telerik:RadGrid> 
        
                </asp:Content>

2 Answers, 1 is accepted

answered on 14 Oct 2009, 05:05 AM

Hello,

I was able to work out a solution by adding the ContentPlaceHolder to a div container and by setting the width in percentage. Do try it out and let me know if it works out for you too.

Masterpage:

    
            <div style="float: left; width: 15%;"> 
        
                <asp:Menu ID="Menu1" Width="100%" BackColor="LightGreen" runat="server"> 
        
                    <Items> 
        
                        <asp:MenuItem Text="Item1"></asp:MenuItem> 
        
                        <asp:MenuItem Text="Item2"></asp:MenuItem> 
        
                        <asp:MenuItem Text="Item3"></asp:MenuItem> 
        
                    </Items> 
        
                </asp:Menu> 
        
            </div> 
        
            <div style="float: right; width: 84%;"> 
        
                <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server"> 
        
                </asp:ContentPlaceHolder> 
        
            </div>

Content Page:

    
            <asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server"> 
        
            <telerik:RadGrid ID="RadGrid1" runat="server" DataSourceID="SqlDataSource1" GridLines="None" Width="100%" >

-Shinu.