How to modify the width of the GridView?

Question

I am using a GridView inside a Repeater control to generate three GridViews with 3 similar columns and different number of different columns between them. Everything works fine and well. I am just facing one probelm with the width of GridView. The porblem is the following:

The second GridView has many columns and this is why its width goes outside the border of the page and this is also happened with the third gridview. I solved this prblem by making the headers of each column to be displayed virtcally but the customer did not like it. Then, I tried to minimize the size of font and I reached to 7px and they said its too small. Now, I wondered what the solution to this problem. Any help please?

By the way, I don't have a problem to use the scroller from left to right, but if I can set the first four columns to be fixed. I don't know how to do that, too:). So how to do it if it is this the only solution to this problem

See the image below that shows the first GridView and the second one:

Answer 1

If you're using a div you could do this:

<div style="overflow:auto">
</div>

It will put horizontal scroll bars if the data in the gridview overflows

Answer 2

I've run into similar problems before and I've used varying solutions:

1) Wrap your GridView in a div with an explicit width and ensure horizontal scrolling:

<div style="width:700px; overflow:auto; overflow-y:hidden;">

2) Increase the width of your actual page. I've used multiple masterpages with differing widths for normal and wider content and inherited accordingly.

3) For appropriate columns, set the widths to something small (like 20-30px) and hide cell text content in your GridView's RowDataBound event. Next, add a ToolTip containing the cell text on to the cell itself, optionally setting BackColor to indicate content and converting <br/> to Environment.NewLine or vice versa:

protected void gv_RowDataBound(object sender, GridViewRowEventArgs e)
{
    if (e.Row.RowType == DataControlRowType.DataRow && e.Row.RowState != DataControlRowState.Edit)
    {
        if (e.Row.Cells[0].Text != "")
        {
            e.Row.Cells[0].ToolTip = e.Row.Cells[0].Text.Replace(Environment.NewLine, "<br/>");
            e.Row.Cells[0].Text = "";
            e.Row.Cells[0].BackColor = Color.Lavender;
        }
    }
}

I appreciate this method may not help you as the column headers are also an issue.

Regarding the fixed columns, the GridView control doesn't have inbuilt functionality for this but you can somewhat pull it off with CSS. I've used a class named 'locked' that I apply to GridView cells during RowDataBound, but the effects vary between browsers and it seems very hacky.

CSS

td.locked, th.locked
{
    position:relative;
    left:expression(this.offsetParent.scrollLeft-3);
}

C#

e.Rows.Cells[0].CssClass = "locked";

I suggest starting here http://forums.asp.net/t/1120278.aspx or Google 'freezing gridview columns in asp.net', then try to customise the method for your requirements.