在GridView AutoGenerateColumns中调整列的宽度以使文本适合页面

Question

我在尝试调整每行的列或单元格时遇到问题，以使文本不会像当前那样跨越水平或垂直：

正如您在照片中看到的那样，"Summary"列下的文本太长，使页面太宽，因此用户必须滚动才能看到其他列。我已经尝试了多种方法来调整单元格的宽度，因此文本会被限制，但我似乎无法让它工作。我在我的代码中尝试了以下内容：

e.Row.Cells[3].Wrap = false;  //Works but makes it so text spans horizontally as opposed to vertically
e.Row.Cells[3].Attributes.Add("style", "word-wrap:break-word;"); //Does not work
e.Row.Cells[3].Width = new Unit("50px"); //Does not work

我唯一可以工作的是将wrap属性调整为false，但这样做会使文本跨度过宽。如果我将其保留为true，我会在"Quick_Sum"列下面的文本出现问题，文本跨度太大，从而使每个单元格都不必要地变大。我想修复它们，这样可以使GridView看起来很漂亮。

C＃代码：

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Data;


public partial class Maintenance : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
        if (!Page.IsPostBack)
        {
            DataTable dt = new DataTable();
            ProductSetTableAdapters.Product_Table_AlphaTableAdapter productAdapter = new ProductSetTableAdapters.Product_Table_AlphaTableAdapter();
            ProductView.DataSource = productAdapter.GetData();
            ProductView.DataBind();
        }

        ProductView.RowDataBound += new GridViewRowEventHandler(ProductViewRowBound);
    }

    protected void ProductViewRowBound(object sender, GridViewRowEventArgs e)
    {
        if(e.Row.RowType == DataControlRowType.DataRow)
        {
            string hyperLink = e.Row.Cells[1].Text;
            e.Row.Cells[1].Text = "";
            string id = e.Row.Cells[0].Text;
            string navigationURL = "Product_Maintenance.aspx?product=" + id;
            HyperLink link = new HyperLink { NavigateUrl = navigationURL, Text=hyperLink };
            e.Row.Cells[1].Controls.Add(link);

        e.Row.Cells[3].Wrap = false;  //Works but makes it so text spans horizontally as opposed to vertically
        e.Row.Cells[3].Attributes.Add("style", "word-wrap:break-word;"); //Does not work
        e.Row.Cells[3].Attributes.Add("style", "white-space:normal;"); //Does not work - Acts the same as if wrap was true
        e.Row.Cells[3].Width = new Unit("500px"); //Does not work
        e.Row.Cells[2].Width = new Unit("500px"); //Does not work

        ProductView.Columns[3].ItemStyle.Width = 50; //Throws ArgumentOutOfRange exception
        }
    }
}

ASPX代码：

<%@ Page Title="" Language="C#" MasterPageFile="~/MasterPage.master" AutoEventWireup="true" CodeFile="Maintenance.aspx.cs" Inherits="Maintenance" %>

<asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
    <div style="margin-left:auto; margin-right:auto;">
        <asp:GridView ID="ProductView" runat="server" Height="299px" Width="863px" AllowPaging="True" HorizontalAlign="Center"
            OnRowDataBound="ProductViewRowBound">
        </asp:GridView>
    </div>
</asp:Content>

我正在使用TableAdapter与我的SQL Server 2017 Express数据库进行通信。此外，我正在使用自动生成列，据我所知，我不能指定样式，直到它们被创建。如何格式化列，以便文本可以很好地适应代码后面的"Quick_Sum"和"Summary"？

编辑 - 尝试了一些解决方案并更新了代码以反映相应的内容以及相应的结果。

编辑2 - 尝试了wazz的解决方案，它的工作原理。删除aspx文件中GridView的设置尺寸使得RowDataBound方法中的硬编码宽度调整发生了明显的变化。

更新了C＃代码：

protected void ProductViewRowBound(object sender, GridViewRowEventArgs e)
{

    if(e.Row.RowType == DataControlRowType.DataRow)
    {
        string hyperLink = e.Row.Cells[1].Text;
        e.Row.Cells[1].Text = "";
        string id = e.Row.Cells[0].Text;
        string navigationURL = "Product_Maintenance.aspx?product=" + id;
        HyperLink link = new HyperLink { NavigateUrl = navigationURL, Text=hyperLink };
        e.Row.Cells[1].Controls.Add(link);

        e.Row.Cells[3].Wrap = false; 
        e.Row.Cells[3].Attributes.Add("style", "white-space:normal;"); //Removing this strangely makes it so that it looks like when wrap is on
        e.Row.Cells[3].Width = new Unit("500px"); //Now works
        e.Row.Cells[2].Width = new Unit("500px"); //Now works

    }
}

更新ASPX：

<%@ Page Title="" Language="C#" MasterPageFile="~/MasterPage.master" AutoEventWireup="true" CodeFile="Maintenance.aspx.cs" Inherits="Maintenance" %>

<asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
    <div style="margin-left:auto; margin-right:auto;">
        <asp:GridView ID="ProductView" runat="server" AllowPaging="True" HorizontalAlign="Center"
            OnRowDataBound="ProductViewRowBound" AutoGenerateColumns="True">
        </asp:GridView>
    </div>
</asp:Content>

感谢您的帮助！

Answer 1

首先在GridView1.SomeProperties...和RowDataBound事件中提到GridView名称：

• 设置ItemStyle属性的Width属性。
• 将ItemStyle属性的Wrap属性设置为FALSE。 如果Wrap属性为FALSE，则会自动调整列的大小。

GridView1.Columns[2].ItemStyle.Width = 50;
GridView1.Columns[2].ItemStyle.Wrap = false;

继MSDN之后：How to: Set GridView Web Server Control Column Width Dynamically