Question: Changing datagrid's column width

  • Thread starter Thread starter VB Programmer
  • Start date Start date
V

VB Programmer

I have a simple datagrid on a webform. (I'm using VB.NET.)

In the page load I get some data, set the .DataSource property of the dg,
then do a .DataBind. The columns are automatically created.

Question: How can I dynamically change the width's of these columns?

Thanks in advance.
 
Hi,
you'd need to set autogeneratecolumns to false and then add a column for
each you want, you'll then be able to specify the width for each column -
either directly or throught CSS, eg
<asp:datagrid id="whatever" AutoGenerateColumns="False" runat="server">
<Columns>
<asp:BoundColumn DataField="somecolumn" Header-Style-Width="60" />
etc...

Jon
 
As you suggested I set the autogenerate to false and added my columns. I
went to the property builder and specified a width for each column (in
Properties/Format/Columns). I checked in HTML and it added the Width
variable. But, when I run the page it seems to ignore the width.
Everything is really snug and tight. Also, when I go into edit mode (I have
an Edit, Update, Cancel button), all the columns get equally (very) wide.
I'm not sure how this width is set, but I would like to set this one as
well.

Any ideas?
 
Hi,
the way I tend to do this is to set a CSS class for the tables and cells -
this way you dont end up with inline styles all over the place. Start by
setting a style for the table itself, eg
..theTable{
width:80%;
font:12px verdana,arial,helvetica,sans-serif;
border: 1px solid black; }
then set a couple of styles for columns
..theHeader{width:20%; }
..wideColumn{ width:60%;}
now build up the grid
<asp:DataGrid ID="TheGrid" Runat="server" AutoGenerateColumns="False"
CssClass="theTable" GridLines="None">
<Columns>
<asp:BoundColumn DataField="field1" HeaderStyle-CssClass="wideColumn"
HeaderText="Text" />
<asp:BoundColumn DataField="field2" HeaderStyle-CssClass="theHeader"
HeaderText="Text1" />
<asp:BoundColumn DataField="field3" HeaderStyle-CssClass="theHeader"
HeaderText="Text2" />
</Columns>

You can also set seperate classes for the table rows if you want - although
obviously you only need to set width for the headers.

Jon
 
I messed with this for a while. It was not very friendly. Sorry for
the sloppy code but it works.


Dim ColNameLen As Integer, x As Integer, DGColLen As Integer,
ColNewWidth(50) As Integer

'Looping through the number of cols in the grid
For x = 0 To DgTableEditor.Columns.Count - 1

'Capturing the column heading length
iColNameLen = Len(DgTableEditor.Columns.Item(x).DataField)
'temp variable to store max length
TmpNewWidth = iColNameLen
'Get length of text
DGColLen = Len(RTrim(DgTableEditor.Columns.Item(x).Text))
'Compare text length to col name length
If DGColLen > TmpNewWidth Then TmpNewWidth = DGColLen
'Put largest amount in array with corresponding column as
subscript
ColNewWidth(x) = TmpNewWidth

Next 'loop

'Loop through columns and set width accordingly.
For y = 0 To x - 1
DgTableEditor.Columns.Item(y).Width = ColNewWidth(y) * 125
Next
End Sub

Regards,
John W.
 
Back
Top