TonyReba
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; }
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;
}
.GridViewStyle{font-family
font-size:small;
table-layout: auto;
border-collapse: collapse;
border: #1d1d1d 1px solid;
width: 300px;
}
ASKER
I dont see any chnage on the css you provided?
ASKER
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
<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
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
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