Question

I have a gridview that imports data from a remote database, this is working fine. The data populates and I can manipulate it easily enough. There seems to be issues with the spacing of the columns. They are not giving enough space for all the text to fit in one line of each cell (the width of the column seems to stop at a certain point which isn’t the same for every column). This also has the effect of adding a lot of extra space in each cell in which the text only does take up one line.

When i click on the edit button, all auto-sizing works absolutely perfectly and the text is all line up in one cell, with no forced line breaks. Once I hit ‘cancel’ and go back to the standard grid view display (ie. ‘edit’ not clicked) the sizing/space issues comes back.

Here is my code:

<asp:SqlDataSource ID="coverAllDataSource" runat="server"
                ConnectionString="Data Source=blah; Initial Catalog=blah; User Id=blah;              Password=blah"
                SelectCommand="SELECT * FROM blah"
                />
                Search by -&nbsp;
                <asp:DropDownList ID="ddlCoverAll" runat="server" Width="148px">
                </asp:DropDownList>
                <br /><br />
                <div style="overflow:auto;max-width:650px; max-height: 400px; border: 1px solid black">
                    <asp:GridView ID="coverAllGV" DataSourceID="coverAllDataSource" runat="server" 
                        BorderStyle="None" AllowSorting="True" 
                        AutoGenerateEditButton="True" CellPadding="0" DataMember="DefaultView" 
                        ShowFooter="True">
                        <AlternatingRowStyle BackColor="#FF9900" />
                        <EditRowStyle Wrap="False" />
                    </asp:GridView>
                </div>

So I am not entirely sure why this is happening, it is my understanding that the gridview will automatically size the column width to accommodate the specific columns largest body of text, but this does not seem to be working correctly. To make things even more confusing, sometimes the auto-sizing chooses to set its width based on a column header, but other times it decides to set its width based on the cell with the largest amount of text within it.

Such a simple thing to get stuck on, alas I cannot resolve this and I’ve spent way too much time trying to (trying to build a gridview on an empty page without divs or manipulation from an external css file, etc)….it’s probably something way too simple.

Anyways, if someone could guide me in the rite direction it would be rather appreciated.

Thanks in advance!

Answer 1

all line up in one cell, with no forced line breaks

If you just want the text to stop wrapping you can achieve this with some CSS. Give your GridView a class name like CssClass="gridview" and then add a CSS rule to your stylesheet, something like:

.gridview td { white-space : nowrap; }

This will tell the table to not wrap any of the text in the table cells. If you are still having problems you want want try try removing the max-width from your wrapping div or decreasing the text size.

If you want to be able to set the width of each column manually set AutoGenerateColumns to false and add the columns with a specified width (you can do this either using the GUI or manually on the aspx page).