ASP.NET Thiết lập chiều rộng cột DataBound trong GridView

Question

Tôi có GridView sử dụng BoundField cho các cột. Tôi đang cố gắng thiết lập một maxwidth cho cột UserInfo của tôi.

Tôi đã thử nhiều cách nhưng không có cách nào khác. Dưới đây là mã cho tôi GridView:

<asp:GridView ID="GridView1" AutoGenerateEditButton="True" 
ondatabound="gv_DataBound" runat="server" DataSourceID="SqlDataSource1" 
AutoGenerateColumns="False"> 

<Columns> 
       <asp:BoundField HeaderText="UserId" 
       DataField="UserId" 
       SortExpression="UserId"></asp:BoundField> 

       <asp:BoundField HeaderText="Username" 
       DataField="Username" 
       SortExpression="Username"></asp:BoundField> 

       <asp:BoundField HeaderText="UserInfo" 
       DataField="UserInfo" 
       SortExpression="UserInfo"></asp:BoundField> 

       </Columns> 
</asp:GridView> 

Looking for gợi ý về làm thế nào tôi có thể thiết lập độ rộng của một cột cụ thể, đó là cột UserInfo tôi.

Answer 1

Tôi đã làm một bản demo nhỏ cho bạn. Thể hiện cách hiển thị văn bản dài.

Trong ví dụ này, có một tên cột có thể chứa văn bản rất dài. Các BoundField sẽ hiển thị tất cả nội dung trong một ô trong bảng và do đó các tế bào sẽ mở rộng khi cần thiết (vì nội dung)

các TemplateField cũng sẽ được trả lại như một tế bào NHƯNG nó chứa một div trong đó giới hạn các chiều rộng của bất kỳ đường viền nào ví dụ: 40px. Vì vậy, cột này sẽ có một số loại chiều rộng tối đa!

<asp:GridView ID="gvPersons" runat="server" AutoGenerateColumns="False" Width="100px"> 
     <Columns> 
      <asp:BoundField HeaderText="ID" DataField="ID" /> 
      <asp:BoundField HeaderText="Name (long)" DataField="Name"> 
       <ItemStyle Width="40px"></ItemStyle> 
      </asp:BoundField> 
      <asp:TemplateField HeaderText="Name (short)"> 
       <ItemTemplate> 
        <div style="width: 40px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis"> 
         <%# Eval("Name") %> 
        </div> 
       </ItemTemplate> 
      </asp:TemplateField> 
     </Columns> 
    </asp:GridView> 

Đây là codebehind demo của tôi

public partial class gridViewLongText : System.Web.UI.Page 
{ 
    protected void Page_Load(object sender, EventArgs e) 
    { 
     #region init and bind data 
     List<Person> list = new List<Person>(); 
     list.Add(new Person(1, "Sam")); 
     list.Add(new Person(2, "Max")); 
     list.Add(new Person(3, "Dave")); 
     list.Add(new Person(4, "TabularasaVeryLongName")); 
     gvPersons.DataSource = list; 
     gvPersons.DataBind(); 
     #endregion 
    } 
} 

public class Person 
{ 
    public int ID { get; set; } 
    public string Name { get; set; } 

    public Person(int _ID, string _Name) 
    { 
     ID = _ID; 
     Name = _Name; 
    } 
} 

Answer 2

thêm HeaderStyle trong lĩnh vực giới hạn của bạn:

<asp:BoundField HeaderText="UserId" 
       DataField="UserId" 
       SortExpression="UserId"> 

       <HeaderStyle Width="200px" /> 

</asp:BoundField> 

Answer 3

Chiều rộng có thể được thiết lập để cột cụ thể như sau: Bằng tỷ lệ phần trăm:

<asp:BoundField HeaderText="UserInfo" DataField="UserInfo" 
SortExpression="UserInfo" ItemStyle-Width="100%"></asp:BoundField> 

HOẶC

By Pixel:

<asp:BoundField HeaderText="UserInfo" DataField="UserInfo" 
SortExpression="UserInfo" ItemStyle-Width="500px"></asp:BoundField> 

Answer 4

<asp:GridView ID="GridView1" AutoGenerateEditButton="True" 
ondatabound="gv_DataBound" runat="server" DataSourceID="SqlDataSource1" 
AutoGenerateColumns="False" width="600px"> 

<Columns> 
       <asp:BoundField HeaderText="UserId" 
       DataField="UserId" 
       SortExpression="UserId" ItemStyle-Width="400px"></asp:BoundField> 
    </Columns> 
</asp:GridView> 

Answer 5

Điều này sẽ làm việc cho tất cả các tình huống khi làm việc với chiều rộng.

`<asp:TemplateField HeaderText="DATE"> 
    <ItemTemplate> 
    <asp:Label ID="Label1" runat="server" Text='<%# Bind("date") %>' Width="100px"></asp:Label> 
    </ItemTemplate> 
    </asp:TemplateField>` 

Answer 6

hey thời gian gần đây tôi figured it out làm thế nào để thiết lập chiều rộng nếu databound GridView của bạn với sql dataset.first thiết lập các kiểm soát RowStyle-Wrap="false" HeaderStyle-Wrap="false" và sau đó bạn có thể thiết lập độ rộng cột như nhiều như bạn muốn. ví dụ: ItemStyle-Width="150px" HeaderStyle-Width="150px"