Aspdotnet-Suresh

aspdotnet-suresh offers C#.net articles and tutorials,csharp dot net,asp.net articles and tutorials,VB.NET Articles,Gridview articles,code examples of asp.net 2.0 /3.5,AJAX,SQL Server Articles,examples of .net technologies

Introduction:

Here I will explain how to set gridview column width in asp.net  or set gridview column width dynamically in asp.net using C# and VB.NET.

Description:

In previous articles I explained Asp.net Interview questions, Export Gridview data to PDF, Send values from one page to another page using QueryString, Joins in SQL Server, Highlight Gridview records based on search and many articles relating to Gridview, SQL ,jQuery,asp.net, C#,VB.NET. Now I will explain how to set gridview column width dynamically in asp.net using C# and VB.NET.

Method 1:

Suppose if our gridview property 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:

Suppose if we are binding columns dynamically to gridview then we need to write the code like as shown below to set width for required columns

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:

We can set the columns width by using CSS calss also for that first we need to write the css class in aspx page like shown below 

<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

If you enjoyed this post, please support the blog below. It's FREE!

Get the latest Asp.net, C#.net, VB.NET, jQuery, Plugins & Code Snippets for FREE by subscribing to our Facebook, Twitter, RSS feed, or by email.

subscribe by rss Subscribe by RSS subscribe by email Subscribe by Email

5 comments :

Anonymous said...

very easy to understand thanks a lot

Anonymous said...

thanks it is very helpful... very easy and format to show it is best....

rameejahmedali said...

thanks ..plz tell me how to create exam result like university's by using asp.net and (.mdb file)...

sachin joshi said...

When i set this width then "grdListings.Columns(2).ItemStyle.Width = 150 "
it gave this error .
"Index was out of range. Must be non-negative and less than the size of the collection."

PRATAP KUMAR said...

Hi mama its very useful for beginners you rocks....keep post like this thanks alot mama

Give your Valuable Comments

Other Related Posts

© 2010-2012 Aspdotnet-Suresh.com. All Rights Reserved.
The content is copyrighted to Suresh Dasari and may not be reproduced on other websites without permission from the owner.