...From a Microsoft document ("Top Questions about the DataGrid Web Server
Control" by Mike Pope and Nikhil Kothari
)...
Controlling Column Width, Height, and Alignment
By default, the DataGrid control sizes rows and columns to fit the overall
height and width that you have assigned to the grid. Within the overall grid
width, it sizes columns according to the width of the column heading text.
All data is displayed left-justified by default.
To control column characteristics, you should turn off auto column
generation by setting the AutoGenerateColumns property to false. In fact,
you should set this property to true only for short-term uses, such as quick
proof-of-concept pages or demonstrations. For production applications, you
should add columns explicitly. The individual columns can be bound columns
or template columns.
To set the column width, you create a style element for that column and then
set the element's Width property to standard units (say, pixels). The
following example shows you what the HTML syntax looks like for an ItemStyle
element with its Width property set.
<asp:BoundColumn DataField="title" SortExpression="title"
HeaderText="Title">
<ItemStyle Width="100px"></ItemStyle>
</asp:BoundColumn>Alternatively, you can do the same thing by setting the
ItemStyle property directly in the element, as in the following example:
<asp:BoundColumn ItemStyle-Width="100px" DataField="title"
SortExpression="title" HeaderText="Title">
</asp:BoundColumn>You can set alignment using the style element, setting it
to "Right," "Left," and other values defined in the HorizontalAlign
enumeration. (In Visual Studio, alignment is available for individual
columns in the Format tab of the grid's Property builder.) The following is
an example:
<asp:BoundColumn DataField="title" SortExpression="title"
HeaderText="Title">
<ItemStyle Width="100px" HorizontalAlign="Right"></ItemStyle>
</asp:BoundColumn>You can also set a column's height using the style element
(or the ItemStyle-Height property). You will probably find this less
flexible than setting the width, since setting the height for one column
sets it for all of them.
You can set the width in code at run time as well. One place to do so is in
an ItemCreated event handler. The following example sets the width of the
first two columns to 100 and 50 pixels, respectively:
' Visual Basic
Private Sub DataGrid1_ItemCreated(ByVal sender As Object, _
ByVal e As System.Web.UI.WebControls.DataGridItemEventArgs) _
Handles DataGrid1.ItemCreated
e.Item.Cells(0).Width = New Unit(100)
e.Item.Cells(1).Width = New Unit(50)
End Sub
// C#
private void DataGrid1_ItemCreated(object sender,
System.Web.UI.WebControls.DataGridItemEventArgs e)
{
e.Item.Cells[0].Width = new Unit(100);
e.Item.Cells[1].Width = new Unit(50);
}Of course, there is little sense in setting a fixed width in code that you
could set at design time. You would normally do this only if you wanted to
set the width based on a run-time value. You can set the width of a cell or
control in units (typically pixels), but it is not straightforward to
translate the length of data - which is simply a character count - into
pixels. But the data is available for you to examine when you are creating
the item.
djc said:
I set my datagrids width to 100% so it always fills the whole screen. But
depending on the amount of data in each field each of the columns resize
when I'm paging. How do I control the width of the grid and each column? I
need them to stay the same. I prefer CSS methods but any info is
appreciated.
Thanks!
