在rowdatabound事件内设置Gridview的列宽。

Question

I have the following piece of code. I did not define any boundfields in my gridview. I am retrieving data using sql queries in my aspx.cs file instead. Is it possible to adjust the width of each column 0, 1, 2? Are there any ways that I can look into? I have tried a lot of ways but it is still not working. Please help!

<asp:GridView ID="surgicalGridView" runat="server"
    CaptionAlign="Top" HorizontalAlign="Justify" 
    DataKeyNames="id" onselectedindexchanged="surgicalGridView_SelectedIndexChanged"
    ToolTip="Excel File Download Tool" CellPadding="4" ForeColor="#333333" 
    GridLines="None" Width="854px">

     <RowStyle BackColor="#E3EAEB" />
       <Columns>
       <asp:CommandField ShowSelectButton="True" SelectText="Download" 
               ControlStyle-ForeColor="Blue">
<ControlStyle ForeColor="Blue"></ControlStyle>
           </asp:CommandField>
       </Columns>
     <FooterStyle BackColor="#1C5E55" Font-Bold="True" ForeColor="White" />
     <PagerStyle BackColor="#666666" ForeColor="White" HorizontalAlign="Center" />
     <SelectedRowStyle BackColor="#C5BBAF" Font-Bold="True" ForeColor="#333333" />
     <HeaderStyle   BackColor="#1C5E55" Font-Bold="True" ForeColor="White" />
     <EditRowStyle BackColor="#7C6F57" />
     <AlternatingRowStyle BackColor="White" />
        <SortedAscendingCellStyle BackColor="#F8FAFA" />
        <SortedAscendingHeaderStyle BackColor="#246B61" />
        <SortedDescendingCellStyle BackColor="#D4DFE1" />
        <SortedDescendingHeaderStyle BackColor="#15524A" />
    </asp:GridView>
    <br />

Answer 1

You can do that on the OnRowDataBound event of the gridview .

protected void surgicalGridView_RowDataBound(object o, GridViewRowEventArgs e)
{           
    if (e.Row.RowType == DataControlRowType.DataRow)
    {
         e.Row.Cells[0].Width = new Unit("200px");
         e.Row.Cells[1].Width = new Unit("400px");
         // and so on
    } 
}

Add this to your Gridview Markup

<asp:GridView ...............................
        onrowdatabound="surgicalGridView_RowDataBound">    // just add this event and execute the above code
 </asp:GridView>

Answer 2

As grid is rendered as table tr and dt so you can use the css class for the grid.
There you can set the width of your columns.
In classes your can use like td , td+td , td+td+td etc

According to the post
.NET Gridview themes examples

Check out these links.

http://icant.co.uk/csstablegallery/index.php?css=69#r69

http://mattberseth2.com/demo/ has lot of gridview customizations with code download.

Paging

Paging With Slider

Sorting with sort icons

Some more themes

http://mattberseth2.com/demo/Default.aspx?Name=A+YUI+DataTable+Styled+GridView&Filter=All http://mattberseth.com/blog/2007/11/5_gridview_themes_based_on_goo.html

_{(source: mattberseth.com )}

Answer 3

My solution is below. I have a grid that has 2 defined columns and the rest are bound dynamically. I don't know why setting the column with (e.Row.Cells[0].Width = new Unit("200px");) didn't work, but I found an alternative. Also, my grid has sorting enabled, therefore the linkbutton code.

const int FirstControl = 0;
const int GriDefinedFieldsCount = 2;

protected void grd_RowDataBound(object sender, GridViewRowEventArgs e)
{
     if (e.Row.RowType == DataControlRowType.Header)
     {
         int col = 0;
         foreach (DataColumn dc in SiteManager.Reports.ReportData.Columns)
         {
             if (dc.ColumnName == "Notes")
             {
                 LinkButton lnk = (e.Row.Cells[col + GriDefinedFieldsCount].Controls[FirstControl] as LinkButton);
                 lnk.Width = Unit.Pixel(300);
             }
             col += 1;
         }
     }