ASP.NET Ancho de configuración de la columna DataBound en GridView

Question

Tengo un GridView que usa BoundField para columnas. Estoy tratando de establecer un maxwidth para mi columna UserInfo.

He intentado de muchas maneras pero ninguna de ellas funciona. A continuación se muestra el código de mi 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> 

en busca de sugerencias sobre cómo puedo ajustar el ancho de una columna específica, que es mi columna UserInfo.

Answer 1

Hice una pequeña demostración para usted. Demostrando cómo mostrar texto largo.

En este ejemplo, hay un Nombre de columna que puede contener texto muy largo. El BoundField mostrará todo el contenido de una celda de tabla y por lo tanto la célula ampliará según sea necesario (debido al contenido)

la TemplateField también será mostrado como una célula pero contiene un div que limita el ancho de cualquier contenido, por ejemplo, 40px. ¡Entonces esta columna tendrá algún tipo de ancho máximo!

<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> 

Aquí es mi demo Codebehind

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

añadir HeaderStyle en su campo enlazado:

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

       <HeaderStyle Width="200px" /> 

</asp:BoundField> 

Answer 3

anchura se puede ajustar a la columna específica de la siguiente manera: Por porcentajes:

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

O

Por píxel:

<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

Esto va a trabajar para todas las situaciones mientras se trabaja con la anchura.

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

Answer 6

oye recientemente he descubierto cómo configurar el ancho si su enlace de datos con SQL gridview DataSet.first fijen tales RowStyle-Wrap="false" HeaderStyle-Wrap="false" de control y entonces se puede establecer el ancho de columna tanto como te gusta. ex: ItemStyle-Width="150px" HeaderStyle-Width="150px"