C# – Set gridview column width

asp.netccssgridviewhtml

In the following example, I fill a gridview with some data. Everything's working great, but I'm not sure how to set the column widths. The gridview doesn't have any set columns, so I cannot use ItemStyle-Width. I tried using GridViewClicks_RowDataBound, but e.Row.Cells[i].Width is not working even though e.Row.Cells[i].Height does work.

I've also tried setting column.ItemStyle.Width in page_load but doesn't work either.

Basically, I need to set the gridview's column width without adding columns in the markup.

Any help is appreciated.

Thanks.

Here's the markup:

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <style type="text/css">
        .GridDock
        {
            overflow-x: auto;
            width:  calc(100% - 480px);
            padding: 0 0 17px 0;
        }
    </style>
    <script type="text/javascript">

        $('#dvGridWidth').width($('#dvScreenWidth').width());

    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <div style="width: 300px; height: 300px; display:inline-block; vertical-align:top">
            <asp:Button ID="Button1" runat="server" Width="278px" Text="Button" />
        </div>
        <div style="width: 160px; height: 160px; display:inline-block;vertical-align:top">
            <asp:Button ID="Button2" runat="server" Width="140px" Text="Button" />
        </div>
        <div style="display:inline-block;" class="GridDock" id="dvGridWidth">
            <asp:GridView ID="GridView1" runat="server" OnRowDataBound="GridViewClicks_RowDataBound">
            </asp:GridView>
        </div>
    </div>
    </form>
</body>
</html>

And codebehind:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Data;

namespace ToErase
{
    public partial class Default : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            DataTable gridDataDataTable = new DataTable();
            gridDataDataTable.Columns.Add("ID");
            gridDataDataTable.Columns.Add("Name");
            gridDataDataTable.Columns.Add("Address1");
            gridDataDataTable.Columns.Add("Address2");
            gridDataDataTable.Columns.Add("Address3");
            gridDataDataTable.Columns.Add("City");
            gridDataDataTable.Columns.Add("Zip");
            gridDataDataTable.Columns.Add("Province");
            gridDataDataTable.Columns.Add("Country");
            gridDataDataTable.Columns.Add("Sex");
            gridDataDataTable.Columns.Add("SNo");
            gridDataDataTable.Columns.Add("TelNo");
            gridDataDataTable.Columns.Add("FaxNo");
            gridDataDataTable.Columns.Add("MobileNo");
            gridDataDataTable.Columns.Add("VehicleNo");
            gridDataDataTable.Columns.Add("Color");
            gridDataDataTable.Columns.Add("Height");
            gridDataDataTable.Columns.Add("Weight");
            gridDataDataTable.Columns.Add("Company");
            gridDataDataTable.Columns.Add("CompanyAddress");
            gridDataDataTable.Columns.Add("CompanyTelNo");
            gridDataDataTable.Columns.Add("CompanyFaxNo");

            gridDataDataTable.Rows.Add("1", "Ryan", "City Stree1", "City Stree2", "City Stree1", "Barcelona", "232232", "N/A", "Spain", "Male", "S23343", "2223-232323-22", "2223-232323-22", "2223-232323-22", "2223-232323-22", "Red", "80cm", "75kg", "Lockheed Martin", "City Street3", "800-536145", "800-142587");
            gridDataDataTable.Rows.Add("2", "Ryan", "City Stree1", "City Stree2", "City Stree1", "Barcelona", "232232", "N/A", "Spain", "Male", "S23343", "2223-232323-22", "2223-232323-22", "2223-232323-22", "2223-232323-22", "Red", "80cm", "75kg", "Lockheed Martin", "City Street3", "800-536145", "800-142587");
            gridDataDataTable.Rows.Add("3", "Ryan", "City Stree1", "City Stree2", "City Stree1", "Barcelona", "232232", "N/A", "Spain", "Male", "S23343", "2223-232323-22", "2223-232323-22", "2223-232323-22", "2223-232323-22", "Red", "80cm", "75kg", "Lockheed Martin", "City Street3", "800-536145", "800-142587");

            GridView1.DataSource = gridDataDataTable;
            GridView1.DataBind();    
            /* The following code does not affect grid columns */                  
            foreach (DataControlField column in GridView1.Columns)
            {
                column.ItemStyle.Width = Unit.Pixel(400);
            }

        }
        protected void GridViewClicks_RowDataBound(object sender, GridViewRowEventArgs e)
        {
            if (e.Row.RowType == DataControlRowType.DataRow)
            {
                DataRowView drv = e.Row.DataItem as DataRowView;

                for (int i = 0; i < drv.Row.ItemArray.Length; i++)
                {
                    e.Row.Cells[i].Width = 200;  // The width is not being set to 200px
                    e.Row.Cells[i].Height = 200; // This works, I can set the height
                }
            }
        }
    }
}

Best Answer

You could add a Css Class(Property) to your gridview and the gridview in the browser is rendered as a table you can design/specify the table as you want.

add a css styling say:

table{
    border: 1px solid black;
    table-layout: fixed;
    width: 200px;
}

th, td {
    border: 1px solid black;
    width: 100px;
}

@Runtime change the width by using the RowDataBound event of the GridView : EX:

protected void DataGrid_RowDataBound(object sender, GridViewRowEventArgs e)
{
     e.Row.Cells[0].Width = new Unit("width-in-px");
     e.Row.Cells[1].Width = new Unit("width-in-px");
     ......
}
  • you could also count the gridview columns and loop the above incase the width is same
Related Topic