How to resize the table cell to fit the contents

Question

I have a GridView that I am using to display some contents:

<asp:GridView ID="GridView1" AllowSorting="True" OnSorting="GridView1_Sorting" ClientIDMode="Static" runat="server" AutoGenerateColumns="False" EmptyDataText="No PDF was generated" OnRowCreated="GridView1_RowCreated">
        <Columns>
            <asp:BoundField DataField="Text" HeaderText="File Name" SortExpression="FileName" >
            <HeaderStyle Width="15%" />
            </asp:BoundField>
            <asp:BoundField DataField="Value" HeaderText="File Modified Date" SortExpression="FileDate" >
            <HeaderStyle Width="25%" />
            </asp:BoundField>
            <asp:TemplateField>
                <ItemTemplate>
                    <asp:LinkButton ID="lnkDownload" Text="Download" runat="server" CommandArgument='<%# Container.DataItemIndex %>' OnClick="DownloadFile" />
                </ItemTemplate>
                <HeaderStyle Width="15%" />
            </asp:TemplateField>
            <asp:TemplateField>
                <ItemTemplate>
                    <asp:LinkButton ID="lnkView" Text="View in Browser" CommandArgument='<%# Container.DataItemIndex %>' OnClientClick="window.document.forms[0].target='blank';" runat="server" OnClick="ViewFile" />
                </ItemTemplate>
                <HeaderStyle Width="35%" />
            </asp:TemplateField>
            <asp:TemplateField>
                <ItemTemplate>
                    <asp:ImageButton runat="server" ToolTip="Delete File" ID="lnkDelete" OnClientClick="confirmUser()" OnClick="DeleteFile" CommandArgument='<%# Container.DataItemIndex %>' ImageUrl="~/delete.png" Width="50px" Height="50px" />
                </ItemTemplate>
                <HeaderStyle Width="15%" />
            </asp:TemplateField>
        </Columns>
    </asp:GridView>

Which displays the following:

As you can see the second and the fourth column is too small. So I added the following code-behind to solve the issue:

protected void GridView1_RowDataBound(object sender, System.Web.UI.WebControls.GridViewRowEventArgs e)
    {
        if (e.Row.RowType == DataControlRowType.Header)
        {
            TableCell cell0 = e.Row.Cells[0];
            cell0.Width = new Unit("35%");

            TableCell cell1 = e.Row.Cells[1];
            cell1.Width = new Unit("20%");

            TableCell cell2 = e.Row.Cells[2];
            cell2.Width = new Unit("15%");

            TableCell cell3 = e.Row.Cells[3];
            cell3.Width = new Unit("15%");

            TableCell cell4 = e.Row.Cells[4];
            cell4.Width = new Unit("15%");
        }
    }

But the result is still the same. How can I modify/add to my code so that the first column is smaller and the second and the fourth column is stretched out to ensure the contents are shown correctly?

Answer 1

I was able to solve it this way:

I changed my first <asp:BoundField /> to this:

<asp:BoundField DataField="Text" HeaderText="File Name" SortExpression="FileName" ItemStyle-CssClass="checkIt"></asp:BoundField>

And added the following CSS:

.checkIt {
     width: 30%;
     word-break: break-all;
     word-wrap: break-word;
}