Link to home
Start Free TrialLog in
Avatar of fischermx
fischermxFlag for Mexico

asked on

How to set the column width of a Gridview ?

(asp.net 2.0)

How do I set the column width of a gridview?
I don't see any "width" property in the columns collection (?)
ASKER CERTIFIED SOLUTION
Avatar of bsdotnet
bsdotnet

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
Hi  Dear Programmer,
go through this lines it may help .

Private Sub setMyDataGridTableStyleProperties (ByRef myDG as DataGrid)
' Use a table style object to apply custom formatting
‘ to the DataGrid.

Dim mydgTableStyle As New DataGridTableStyle()
Dim mygrdColStyle1, mygrdColStyle2, mygrdColStyle3,
mygrdColStyle4, mygrdColStyle5 As New & _
DataGridTextBoxColumn()

With mydgTableStyle
.AlternatingBackColor = Color.LightCoral
.BackColor = Color.LawnGreen
.ForeColor = Color.LightGray
.GridLineColor = Color.LightGreenrodYellow
.GridLineStyle = System.Windows.Forms.DataGridLineStyle.
.HeaderBackColor = Color. LightGray
.HeaderFont = New Font("Courier", 10.0!, FontStyle.Bold)
.HeaderForeColor = Color. LawnGreen
.LinkColor = Color.Teal

' Do not forget to set the MappingName property.
' Without this, the DataGridTableStyle properties
' and any associated DataGridColumnStyle objects
' will have no effect.

.MappingName = "Customers"

.SelectionBackColor = Color. LawnGreen
.SelectionForeColor = Color. LightGray
End With

' Use column style objects to apply formatting specific
‘ to each column of customer table.

With mygrdColStyle1
.HeaderText = "ID#"
.MappingName = "CustomerID"
.Width = 50
End With

With mygrdColStyle2
.HeaderText = "Last Name"
.MappingName = "NameLast"
.Width = 140
End With

With mygrdColStyle3
.HeaderText = "Address"
.MappingName = "Address1"
.Width = 180
End With

With mygrdColStyle4
.HeaderText = "State"
.MappingName = "State"
.Width = 30
End With

With mygrdColStyle5
.HeaderText = "Phone"
.MappingName = "Phone"
.Width = 70
End With

' Add the column style objects to the tables style's
‘ column styles collection. If you fail to do this the column
‘ styles will not apply.

mydgTableStyle.GridColumnStyles.AddRange _
(New DataGridColumnStyle() _
{ mygrdColStyle1, mygrdColStyle2,
mygrdColStyle3, mygrdColStyle4, mygrdColStyle5})

' Add the table style object to the DataGrid's table styles
' collection. Again, failure to add the style to the collection
' will cause the style to not take effect.

myDG.TableStyles.Add(mydgTableStyle)

End Sub

Thanks
Avatar of fischermx

ASKER

Is there a way to set the colum width during design ? I mean not in code for run time.
Using something like :

            GridView1.Columns[4].ItemStyle.Width = 1000;

Somehow increases the width of the column, but for absolutely not to the total pixels expected.
It seems like the GridView is denying to stretch beyond certain point for some unknown reasons, may be I'm missing a global property for the grid ?

Avatar of bsdotnet
bsdotnet

you can set in <asp:BoundField> tag.

 <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" DataSourceID="AccessDataSource1">
            <Columns>
                <asp:BoundField DataField="customer" ItemStyle-Width="100" HeaderText="customer" SortExpression="customer" />
                <asp:BoundField DataField="products" ItemStyle-Width="200" HeaderText="products" SortExpression="products" />
            </Columns>
        </asp:GridView>
There is some more that can be said about this particular issue especially when working with horizontally large grids where the browser does a lot of squishing of columns.  Setting the ItemStyle-Width field (or the HeaderStyle-Width field) creates <td style="width:100px;"> in the resulting html output (the 100px is just an example width).  This means that the rendering of the table is still up to the browser which means that this is only a "suggestion" to the browser.  It can still squish the widths if it thinks its necessary.  

Most times when people are using large grids, they are fine with the automatic column squishing but want one or two columns to be a fixed size.  This can not be accomplished with the ItemStyle-Width, etc. settings.  Instead, you have to take a page out of the liquid table handbook (google it for more on the subject) and do it ugly.

There are two ways that I have tried that work (there are probably more).  Each has its positives and negatives.  Both involve making changes to the HeaderText field.  The first one is trivial and probably has the least side effects:

Say your column header is "Description", you can use the following:
<asp:BoundField DataField="description" HeaderText="Description&nbsp;&nbsp;&nbsp;" SortExpression="description"/>

Use as many &nbsp; as you like to create the width that you want.  

If that's to unpleasant to deal with you could go for option 2 which uses a transparent .gif file to force the width of the column (again see discussions on liquid table design).  This works because you can imbed html in the HeaderText field.  Note that you MUST set HtmlEncode="False" to get this to work so it does have a small but potentially real dark downside - can you say injection.  However, if you are not programmatically changing the header text based on user input this should really not be an issue.   Also note that you need to use single quotes for string delimiters within the HeaderText value (this is just standard HTML quoting rules but just mentioning it in case you are asleep).

<asp:BoundField DataField="description" HeaderText="Description<br><img src='spacer.gif' width='500px' height='1'>" HtmlEncode="False" SortExpression="description/">

The downside of option 2 comes when you go to do a cut and paste from the output page.  The <br> gets interpreted as a newline and can give you a split header in the paste.
Finally someone who actually understands the problem. - Thank you.