How to set Gridview Column Width Dynamically in Asp.net( C#, VB.NET)

Introduction:

In this article I will explain n how to set gridview column width in Asp.Net dynamically using c# and vb.net. There are many methods by using them we can set width dynamically.

I have discussed three methods:

Method 1:

In case we are using Bound Fields (set  AutoGenerateColumns="false")  then we can set the columns width by using ItemStyle-Width property like as shown below

<asp:GridView runat="server" ID="gvrecords"  AutoGenerateColumns="false"

HeaderStyle-BackColor="#7779AF" HeaderStyle-ForeColor="White" >

<Columns>

<asp:BoundField DataField="UserName" HeaderText="UserName" ItemStyle-Width="50px" />

<asp:BoundField DataField="FirstName" HeaderText="FirstName" ItemStyle-Width="50px" />

<asp:BoundField DataField="LastName" HeaderText="LastName"  ItemStyle-Width="50px" />

<asp:BoundField DataField="Location" HeaderText="Location" ItemStyle-Width="50px" />

</Columns>

</asp:GridView>

Method 2:

If we binding columns dynamically then we can set width of columns dynamically by using following code:

C# Code

protected void GrdView_RowDataBound(object sender, GridViewRowEventArgs e)

{

if (e.Row.RowType == DataControlRowType.DataRow)

{

grdListings.Columns[1].ItemStyle.Width = 50;

grdListings.Columns[2].ItemStyle.Width = 150;

}

}

VB.NET Code

Protected Sub GrdView_RowDataBound(sender As Object, e As GridViewRowEventArgs)

If e.Row.RowType = DataControlRowType.DataRow Then

grdListings.Columns(1).ItemStyle.Width = 50

grdListings.Columns(2).ItemStyle.Width = 150

End If

End Sub

Method 3:

Third method is using CSS. Using CSS we can set width of the columns:

<style type="text/css">

.columnscss

{

width:150px;

font-weight:bold;

font-family:Verdana;

}

</style>

Once we create css class in aspx then we need to write the following code in code behind

C# Code

protected void GrdView_RowDataBound(object sender, GridViewRowEventArgs e)

{

if (e.Row.RowType == DataControlRowType.DataRow)

{

for (int i = 0; i > e.Row.Cells.Count; i++)

{

e.Row.Cells[i].CssClass = "columnscss";

}

}

}

VB.NET Code

Protected Sub GrdView_RowDataBound(sender As Object, e As GridViewRowEventArgs)

If e.Row.RowType = DataControlRowType.DataRow Then

Dim i As Integer = 0

While i > e.Row.Cells.Count

e.Row.Cells(i).CssClass = "columnscss"

i += 1

End While

End If

End Sub