Introduction
I faced a lot of problems when I asked to set the width of a
gridview
dynamically, that is the property
AutoGenerateColumns
set to
AutoGenerateColumns="true"
and the
gridview
was directly bounded from a
dataset
in codebehind. Thus, we don't have boundfields to set the width of columns individually. I tried a lot of methods found over the internet but sadly anyone could not help me. But I have overcome the problem using some tricks and am now sharing this article with all of you so that if anyone has a problem like me, he will not get more frustrated.
Background
I used many methods found over the internet, but they could not work for me. Then I used both methods - that is one for bound field and another for setting the
AutoGenerateColumns="true"
- individually in two projects and then when page got rendered in browser, I used "View Source" functionality of browser and then realized what is the main difference in both types.
Using the Code
First, I created a sample webpage in ASP.NET 3.5. I also attached the source code in a zipped file.
Below is the aspx page:
<%@ Page Language="vb" AutoEventWireup="false" CodeBehind="Default.aspx.vb" Inherits="GridViewWidth._Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="true"
style="table-layout:fixed;" Width="1000px">
</asp:GridView>
</div>
</form>
</body>
</html>
Code behind file:
Imports System.Data.SqlClient
Partial Public Class _Default
Inherits System.Web.UI.Page
Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
Dim strCon As New SqlConnection("Data Source=myDataSource;Initial Catalog=myDataBaseName;Persist Security Info=True;User ID=GKRANJAN;Password=abcdef")
Dim da As New SqlDataAdapter("Select * from myTableName", strCon)
Dim ds As New DataSet
da.Fill(ds)
GridView1.DataSource = ds
GridView1.DataBind()
End Sub
Private Sub GridView1_RowDataBound(ByVal sender As Object, ByVal e As System.Web.UI.WebControls.GridViewRowEventArgs) Handles GridView1.RowDataBound
If e.Row.RowType = DataControlRowType.Header Then
Dim cell As TableCell = e.Row.Cells(0)
cell.Width = New Unit("200px")
For i = 1 To e.Row.Cells.Count - 1
Dim cell2 As TableCell = e.Row.Cells(i)
cell2.Width = New Unit("10px")
Next
End If
End Sub
End Class
Please mind two things in
.aspx:
style="table-layout:fixed;"
Width="1000px"
Actually, when we use boundfields then
gridview
columns width renders in browser as we set the widths of each and every columns until overflow condition occurs. In overflow condition, browser uses its mind and sets it to some values so that it can be readable to user.
In my scenario, I saw that if I am using bound field for
gridview
, it adds the following in rendered source:
style="table-layout:fixed;"
Then I understood the actual problem that even I am using the code written below, it was not working. Then I added the lines defined in "Please mind two things in
.aspx"
Points of Interest
What I used in code behind, you can get it if you will give some time in searching the same over the internet, but it's tough to find the factor by which I fixed my bug. Because I could not get anything like that over the internet, I am sharing my trick with all of you. I used in
.aspx page to fix the layout of table. Hence gridview renders as table in browser.
Thanks!!
History
Added source code