2
votes

I have set a fixed width to my grid view.Now the next thing which I would want to do is set fixed width for all the columns in my grid view.I have tried all the below options but none of them work.Would be great if this gets solved.

1) Set the ItemStyle-Width of all BoundFields to 100px

<asp:BoundField DataField="Customer_Name" HeaderText="Customer"    SortExpression="Customer_Name" ItemStyle-HorizontalAlign="Center" ItemStyle-Width="100px"/>

2) Define the column width in the RowDataBound event

protected void RPMData_RowDataBound(object sender, GridViewRowEventArgs e) {
    if (e.Row.RowType == DataControlRowType.DataRow) {
        RPMData.Columns[0].ItemStyle.Width = 150;
        RPMData.Columns[1].ItemStyle.Width = 150;
        RPMData.Columns[2].ItemStyle.Width = 150;
        RPMData.Columns[3].ItemStyle.Width = 150;
        RPMData.Columns[4].ItemStyle.Width = 150;
        RPMData.Columns[5].ItemStyle.Width = 150;
        RPMData.Columns[6].ItemStyle.Width = 150;
        RPMData.Columns[7].ItemStyle.Width = 150;
        RPMData.Columns[8].ItemStyle.Width = 150;
        RPMData.Columns[9].ItemStyle.Width = 150;        
    }
}

3) Define the css and call the css in the RowDataBound Event

Source code:-

.columnwidth {
    width: 150px;
}

Code Behind:

protected void RPMData_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 = "columnwidth";
        }
    }
}

CSS defined for gridview:

.infoTable {
            font-size: 11px;
            border: #ccc 1px solid;
            -moz-border-radius: 3px;
            -webkit-border-radius: 3px;
            border-radius: 3px;
            font-family:Arial;
            width:50% !important;

        }
3

3 Answers

0
votes

Try css with important;

<style type="text/css">
.columnwidth
{
    width: 150px!important;
}
</style>
0
votes

The problem is probably that long words are wider that 150px and will increase the width. Use word-break: break-all;

<style>
    #<%= RPMData.ClientID %> td {
        width: 150px;
        word-break: break-all;
    }
</style>

And don't set the width of the GridView to 100% (if you have done so)

0
votes

The issue got resolved.I was mainly trying to restrict my grid view width and that was causing the issue.Thanks to @VDWWD for partly solving my issue.I just removed the restriction for my grid view width and added the simple ItemStyle-Width tag for my bound fields and this solved it... :)