1

I have a asp:GridView that binding to SQL data, how can i adjust gridview columns width after binding data?

        myConnect = new MySqlConnection(conStr);
        myConnect.Open();

        try
        {
            string strSQL = "SELECT * FROM report_data WHERE user = @user";

            MySqlDataAdapter mySqlDataAdapter = new MySqlDataAdapter(strSQL, myConnect);
            mySqlDataAdapter.SelectCommand.Parameters.AddWithValue("@user", userName);

            DataTable dt = new DataTable();
            mySqlDataAdapter.Fill(dt);
            gvRecords.DataSource = dt;
            gvRecords.DataBind();

        }
        catch (Exception ex)
        {
            Console.WriteLine(ex);
        }
        finally
        {
            myConnect.Close();
        }

Below is the code in aspx

    <div>
        <asp:GridView CssClass="gridview" ID="gvRecords" runat="server" OnDataBound="gvRecords_DataBound">
        </asp:GridView>
    </div>

And my css data

.gridview tr td {
padding: 5px;
border: 1px solid #ddd;
}
.gridview tr th {
padding: 5px;}

I have also try this way but not working

    protected void gvRecords_DataBound(object sender, EventArgs e)
    {
        gvRecords.Columns[0].ItemStyle.Width = Unit.Pixel(150);
        gvRecords.Columns[1].ItemStyle.Width = Unit.Pixel(50);
        gvRecords.Columns[2].ItemStyle.Width = Unit.Pixel(100);
        gvRecords.Columns[3].ItemStyle.Width = Unit.Pixel(200);
        gvRecords.Columns[4].ItemStyle.Width = Unit.Pixel(50);
    }

the columns width generate by AutoGenerateColumns can't fit the data. enter image description here

After i add width in css, the columns width change. look better then before.

.gridview tr td {
padding: 5px;
border: 1px solid #ddd;
width: 100px;}

enter image description here

But is there anyway to adjust column width individual?

TYS
  • 29
  • 8
  • What do you see in the browser. The css rule which you are creating is applied or not? – शेखर Mar 23 '21 at 05:42
  • Above image is what I got in chrome browser and css file work good. – TYS Mar 23 '21 at 07:39
  • You may take reference from this [question](https://stackoverflow.com/questions/5048762/change-gridview-row-color-based-on-condition) or type to use `! important` in css. Not sure but you can also try `gvRecords.Columns[0].Attributes.add("style","150px !important");` – शेखर Mar 23 '21 at 07:55
  • I try gvRecords.Columns[0].Attributes.add("style","150px !important"). but got error on Attributes property. – TYS Mar 23 '21 at 08:19
  • not sure about the syntax but there should be a way to add style to the column. – शेखर Mar 23 '21 at 08:31

2 Answers2

1

I think rather then setting it at runtime you can use the css as below

.gridview tr td {
  padding: 5px;
  border: 1px solid #ddd;
}


// second td
.gridview tr td+td {
   width:50px !important;
}
शेखर
  • 17,412
  • 13
  • 61
  • 117
  • Yes. It's work. Although the code looks very heavy. I make a lot tr td+td+td+td...etc. – TYS Mar 24 '21 at 00:40
  • @TYS if you are using CSS 3 here is a reference which can help you to optimize the css a bit. https://support.awesome-table.com/hc/en-us/articles/115001393209-Add-style-to-specific-columns-or-rows-in-your-Table-app – शेखर Mar 24 '21 at 04:56
0

Add a .cs file to your head-section

<link rel="stylesheet" type="text/css" href="stylesheet1.css" />

with the style :

.mytable { width: 100%; }

And on your component:

asp:GridView ID="GridView1" runat="server" CssClass="mytable"
Gabriel Manzini
  • 97
  • 5