dynamically set width of a column in Gridview

Question

0.00/5 (No votes)

See more:

I am trying to dynamically set width of a gridview column but when I apply the following code, I see no change in the browser.

.aspx code is:

C#

<asp:GridView ID="GridView1" runat="server" AllowPaging="True" PageSize="5" CellSpacing="4" AutoGenerateDeleteButton="True" AutoGenerateEditButton="True" CellPadding="4" DataKeyNames="File_Name" GridLines="None" OnRowEditing="GridView1_RowEditing" OnRowDeleting="GridView1_RowDeleting" OnRowUpdated="GridView1_RowUpdated" OnRowUpdating="GridView1_RowUpdating" ForeColor="#333333" OnRowCancelingEdit="GridView1_RowCancelingEdit" OnPageIndexChanging="GridView1_PageIndexChanging" AllowSorting="True" OnSorting="GridView1_Sorting" OnRowCommand="GridView1_RowCommand" OnRowDataBound="GridView1_OnRowDataBound" >
                <PagerSettings Mode="NumericFirstLast" FirstPageText="First" LastPageText="Last" PageButtonCount="10" Position="Bottom" />
                    <AlternatingRowStyle BackColor="White" />
                    <Columns >
                        <asp:TemplateField HeaderText="File">
                            <ItemTemplate>
                                <asp:LinkButton ID="lnkbtnFileName" runat="server" CommandArgument='<%# Eval("File_Name") %>' CommandName="Download" Text='<%# Eval("File_Name") %>'></asp:LinkButton>
                            </ItemTemplate>
                        </asp:TemplateField>
                    </Columns>
                <EditRowStyle BackColor="#2461BF" />
                <FooterStyle BackColor="#507CD1" Font-Bold="True" ForeColor="White" />
                <HeaderStyle BackColor="#507CD1" Font-Bold="True" ForeColor="White" />
                <PagerStyle BackColor="#2461BF" ForeColor="White" HorizontalAlign="Center" />
                <RowStyle BackColor="#EFF3FB" />
                <SelectedRowStyle BackColor="#D1DDF1" Font-Bold="True" ForeColor="#333333" />
                <SortedAscendingCellStyle BackColor="#F5F7FB" />
                <SortedAscendingHeaderStyle BackColor="#6D95E1" />
                <SortedDescendingCellStyle BackColor="#E9EBEF" />
                <SortedDescendingHeaderStyle BackColor="#4870BE" />


            </asp:GridView>

.cs code is:

C#

protected void GridView1_RowDataBound1(object sender, GridViewRowEventArgs e)
{
    //SET WIDTH OF THE COLUMNS
    if (e.Row.RowType == DataControlRowType.Header)
    {
        e.Row.Cells[0].Width = Unit.Pixel(500); //DATE
        e.Row.Cells[1].Width = Unit.Pixel(100); //CUSTOMER
        e.Row.Cells[2].Width = Unit.Pixel(100); //DESTINATION


    }
}

Can someone please help?

Posted 23-Aug-14 1:56am

rf_libra

Updated 23-Aug-14 3:41am

v3

Add a Solution

Comments

Surendra0x2 23-Aug-14 9:38am

Instead of DataControlRowTYpe.Header use if (e.Row.RowType == DataControlRowType.DataRow)
{

[no name] 23-Aug-14 10:32am

@Surendra0x2 using that giving, `Index was out of range. Must be non-negative and less than the size of the collection` error.

Surendra0x2 23-Aug-14 14:38pm

May be your Giving Wrong Indexing to column.
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;
}
}

This code is not wroking?

Surendra0x2 23-Aug-14 14:41pm

As you posted your code there is only one Column. then why r u Indexing 1 and 2 just simply
write
protected void GrdView_RowDataBound(object sender, GridViewRowEventArgs e)
{

if (e.Row.RowType == DataControlRowType.DataRow)
{
grdListings.Columns[0].ItemStyle.Width = 50;
}
}

2 solutions

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Dilan Shaminda · Answer 1 · 2014-08-23T03:50:00

Solution 2

You can set it like this

C#

GridView1.Columns[0].ItemStyle.Width = 50;

Refer these links too
How to: Set GridView Web Server Control Column Width Dynamically
Asp.net Set Gridview Column Width Dynamically in C#, VB.NET

Posted 23-Aug-14 3:50am

Dilan Shaminda

Comments

[no name] 23-Aug-14 10:35am

@Dilan Shaminda , Code running without any error with your suggestion but desired output is not seen.

Dilan Shaminda 23-Aug-14 12:44pm

i tried it and it works fine.Try setting AutoGenerateColumns="False"

[no name] 24-Aug-14 13:38pm

@Dilan Shaminda , I'm binding data dynamically from sql server. Did you do the same thing? Do you want me to paste binding data function here for you to see?

Dilan Shaminda 25-Aug-14 0:31am

i created a datatable and add some values to it and then bind it to the gridview.

[no name] 25-Aug-14 3:41am

@Dilan Shaminda, Unfortunately, no desired change to the width of the column gained through both our snippets. It is strange to see when I apply background color to the column as:

if (e.Row.RowType == DataControlRowType.DataRow)
{
e.Row.Cells[0].Width = 100;
e.Row.Cells[0].Style["border-right"] = "2px solid #666666";
e.Row.Cells[0].BackColor = System.Drawing.Color.CornflowerBlue;

e.Row.Cells[1].Width = 200;
e.Row.Cells[1].Style["border-right"] = "2px solid #666666";
e.Row.Cells[1].BackColor = System.Drawing.Color.Lime;

e.Row.Cells[2].Width = 400;
e.Row.Cells[2].Style["border-right"] = "2px solid #666666";
e.Row.Cells[2].BackColor = System.Drawing.Color.Red;

e.Row.Cells[3].Width = 800;
e.Row.Cells[3].Style["border-right"] = "2px solid #666666";
e.Row.Cells[3].BackColor = System.Drawing.Color.Yellow;
}

i see the desired results as: (http://tinypic.com/r/x35zc3/8)

But specifically with the width, this code is not working. If you notice, I deliberately set width of the first column 100px, second column 200px. third column 400px, and fourth column 800px which means columns width should double as they go from 1 to 2 to 3 to 4 in number. But thats not the case with the output.

Dilan Shaminda 25-Aug-14 3:51am

i checked it again and code works fine.Your style is also works fine.

[no name] 25-Aug-14 4:15am

Can you please take a prntScr of your output and show? Thanks

[no name] 25-Aug-14 4:17am

Also, I'm not setting AutoGenerateColumn = "False" , since edit and update record functions in my program require it to be "True".

Dilan Shaminda 25-Aug-14 4:25am

http://oi60.tinypic.com/2mfhqmo.jpg
I tried it with AutoGenerateColumn = "True" But didn't work

[no name] 25-Aug-14 4:40am

Thats the thing @Dilan. My problem is that I need to keep AutoGenerateColumn = "True" because I'm binding data from sql source as:

public void BindGrid()
{
SqlConnection con = new SqlConnection("Data Source=MEHDI-PC\\SQLEXPRESS; Initial Catalog=PIMS; Integrated Security=true;");
{
using (SqlCommand cmd = new SqlCommand())
{
String sql = "select [DocumentsID],[Ref],[Subject],[Src],[Dst],[Medium],[Date_Printed],[Date_Received],[Document_Type],[Action_Required],[Due_Date],[Actual_Date],[Content],[Tag],[Issue_No],[Notes],[Assigned_To],[Reply_Ref],[Priority],[Status],[Response],[Physical_File_No],[Physical_Rack_Location],[File_Name] from dbo.Documents";
cmd.Connection = con;
cmd.CommandText = sql;

con.Open();

DataSet ds = new DataSet();

using (SqlDataAdapter adp = new SqlDataAdapter(cmd))
{
adp.Fill(ds);

}

GridView1.DataSource = ds.Tables[0];
GridView1.DataBind();
}

if (con.State == ConnectionState.Open)
{
con.Close();
}

}
}

Dilan Shaminda 25-Aug-14 5:33am

set AutoGenerateColumns="False" and add asp:BoundFileds like this.
<columns>
<asp:BoundField DataField="empid" HeaderText="empid" SortExpression="empid" />
<asp:BoundField DataField="empname" HeaderText="empname" SortExpression="empname" />
<asp:BoundField DataField="salary" HeaderText="salary" SortExpression="salary" />

set DataField names according to your filednames.This should work for you :-)

Surendra0x2 · Answer 2 · 2014-08-23T03:37:00

Solution 1

Refer this Link---
http://www.aspdotnet-suresh.com/2013/01/aspnet-set-gridview-column-width.html[^]

Posted 23-Aug-14 3:37am

Surendra0x2

Comments

[no name] 23-Aug-14 10:17am

@Surendra0x2 , Did following modification as guided by the article you pasted:

protected void GridView1_OnRowDataBound(object sender, GridViewRowEventArgs e)
{
//SET WIDTH OF THE COLUMNS
if (e.Row.RowType == DataControlRowType.Header)
{

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

}
}
and getting following error:

`Index was out of range. Must be non-negative and less than the size of the collection.`