调整列的宽度以使文本适合 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，但这样做会使文本跨度过宽。如果我将其保留为真，我会在"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"？

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

EDIT 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