Link to home
Start Free TrialLog in
Avatar of TonyReba
TonyRebaFlag for United States of America

asked on

Gridview columns width

I am trying to increase the width size of the columns on my gridview, but  iam having troubles having it done, can you please review my code and see if I am doing anything wrong?
asp.net part

  <asp:gridview ID="Gridview1" runat="server" ShowFooter="True" 
            AutoGenerateColumns="False" onrowcreated="Gridview1_RowCreated" 
            EnableModelValidation="True" CssClass = "GridViewStyle" HeaderStyle-CssClass ="HeaderStyle" 
            RowStyle-CssClass ="RowStyle" AlternatingRowStyle-CssClass = "AltRowStyle"  >
            
            <Columns>
         
            <asp:BoundField DataField="RowNumber" HeaderText="Row Number" ControlStyle-CssClass="wide" />
            <asp:TemplateField ControlStyle-CssClass="wide" >
               <HeaderTemplate  >
               <asp:Label runat="server">NT-1</asp:Label>
            
            <asp:TextBox ID="txt_Census1" runat="server" Width="30px" ></asp:TextBox>
            </HeaderTemplate>


                <ItemTemplate>
                    Bed:
                    <asp:TextBox ID="txt_Bed1" runat="server" Width="30px"></asp:TextBox>
                    Status:
                    <asp:DropDownList ID="txt_Comment1" runat="server" AppendDataBoundItems="True" 
                    style="text-align: left" >
                    <asp:ListItem value="0" text="Select">  </asp:ListItem>
                    <asp:ListItem>Assigned</asp:ListItem>
                    <asp:ListItem>BR</asp:ListItem>
                    <asp:ListItem>Open NS</asp:ListItem>
                                      
                </asp:DropDownList>

                </ItemTemplate>
            </asp:TemplateField>





css


/**  * GRIDVIEW STYLES  **/

/* Css Class - Whole Table */ 

.GridViewStyle{font-family: Arial, Sans-Serif; 
font-size:small; 
table-layout: auto; 
border-collapse: collapse; 
border: #1d1d1d 1px solid; 
width: 300px;

} 

.HeaderStyle th{ 
Padding : 5px; 
Color : #C0C0C0;
width: 300px;
} 


/*Apply padding and color to header of <th> in table */
.HeaderStyle 
{ 
background-image: url(Images/HeaderChromeBlack.jpg); 
background-position:center; 
background-repeat:repeat-x; 
background-color:#1d1d1d; 
    width: 300px;

} 


.RowStyle td
{
    background-color: #c9c9c9;
    width: 300px;
} 

/*Alternate rows will be shaded */

.AltRowStyle td 
{ 
padding: 5px; 
border-right :solid 1px #1d1d1d; 
width: 300px;
} 


input.wide { width: 100px; }

Open in new window

Avatar of gdupadhyay
gdupadhyay
Flag of United States of America image


You need to update the CSS.

See this URL to set the GV columns width

https://www.experts-exchange.com/questions/21767971/How-to-set-the-column-width-of-a-Gridview.html

Or you can set the dynamic columns width

http://msdn.microsoft.com/en-us/library/ms178296.aspx
In CSS, update below according to your requirement.:

.GridViewStyle{font-family: Arial, Sans-Serif;
font-size:small;
table-layout: auto;
border-collapse: collapse;
border: #1d1d1d 1px solid;
width: 300px;

}

Avatar of TonyReba

ASKER

I dont see any chnage on the css you provided?
I just need to width for the entire column be increased,  no matter if is a static width
pls try this


<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False">
            <Columns>
                <asp:BoundField HeaderText="Name">
                    <ItemStyle Width="500px" />
                </asp:BoundField>
                <asp:BoundField HeaderText="Description">
                    <ItemStyle Width="1000px" />
                </asp:BoundField>
            </Columns>
 </asp:GridView>

and refer to gridview column width
ASKER CERTIFIED SOLUTION
Avatar of gdupadhyay
gdupadhyay
Flag of United States of America image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial