asked on

Gridview column autofit

I have a gridview defined inside a div. But the column width is not autofit which results in some title string going to the second line or even the third line, or some cell values take multiple lines. I would like every row takes only one line.

How can I make column width auto fit?

<div id="Member" style="overflow:auto; left:20px; width:100%; height:200px">
<asp:LinkButton ID="lnkNewMem" runat="server" Text="Add Member" OnClientClick="return CheckNull();" /> 
<asp:LinkButton ID="LinkRefresh" runat="server" Text="Refresh List" OnClick="ReloadMember" />
<asp:GridView ID="MyGridView" runat="server"
AllowSorting="True" AlternatingRowStyle-BackColor="#FFFFFF"
AutoGenerateColumns="false" BorderStyle="Solid" ForeColor="#5078B3"
PageSize="4" RowStyle-CssClass="rowheight"
OnRowDataBound="MGridView_RowDataBound">
... ...
... ...
</asp:GridView>
</div>

column-autofit.JPG

ASKER CERTIFIED SOLUTION

Member_2_4913559

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

kovilpattiBalu

http://www.telerik.com/community/forums/aspnet/grid/export-excelml-autofit-columns.aspx
http://stackoverflow.com/questions/5788747/how-to-generate-auto-fit-cells-in-excel-using-filestreamresult

mr_nadger

have you got a header or item width set in the gridview, either in the gridview's properties, or an overriding CSS file?

mr_nadger

or the wrap option turned on somewhere? (forgot to write that before hitting submit)

minglelinch

ASKER

Thanks for all the comments. I don't have any CSS width setting. In C# DataBound, I have line like
MGridView.HeaderRow.Cells[9].Width = new Unit(140, UnitType.Pixel); the setting here is much wider than it appears. I don't have the wrap option turned on anywhere.

ddayx10:
I have added HeaderStyle-Wrap="false" RowStyle-Wrap="false" to the gridview, but it still does not help. It still shows two lines on the header.

There's no parent <div> of the gridview. The parent level is
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">

I changed "overflow:scroll" instead of auto, it still works the same way.
<div id="Member" style="overflow:scroll; left:20px; width:100%; height:200px">

If I display much less columns that makes scroll unecessary, the title shows in one line which is what I want. How can I make it work for more columns, more help please?

mr_nadger

can you post your code please?

minglelinch

ASKER

Thanks. Attached the file. The problem occurs on MGridView.

GridView-Width.aspx

mr_nadger

can't see anything obvious, do you have any CSS referenced in the master page?

minglelinch

ASKER

Attached the master one. CSS included but not really used.

Actually the other two gridview are working fine, only the MGridView has the problem.

minglelinch

ASKER

Sorry clicked a wrong button. The file is attached here. Thanks.
MstrPage.aspx

minglelinch

ASKER

I added HeaderStyle-Wrap="false" at asp:BoundField level the GridView, it worked.

Thank you all.

Member_2_4913559

Just for clarification and future:

<div id="Member" style="overflow:auto; left:20px; width:100%; height:200px">

This does have a parent, it may only be the body but that width set above this is key to how the 100% width is interpreted. Looking at this parent would have given you some clue as to what the 100% actually was and control over how it operated.

Inheritance of width, especially when using percentages makes things tricky. One has to know what is happening in the heirarchy to make a decision about how to resolve this type of issue.

minglelinch

ASKER

Thank you for the answer.