Control column width in an ASP.NET Datagrid

moondaddy 911 Reputation points
2022-10-11T02:45:45.487+00:00

Using VS 2022 in an older asp.net project that uses the .NET Framework 4.8 I have an aspx page which uses the asp Datagrid and a few of the columns have large text (500 to 1000 long). I want to force the text to wrap and restrict the column width to 400.

<asp:BoundColumn HeaderText="ExceptionData" DataField="ExceptionData" ItemStyle-Width="400">   
    <HeaderStyle  />  
    <itemstyle Wrap="true" Width="400"  />  
</asp:BoundColumn>  

I'm setting the datasource in the codebehind like this:

DataGrid1.DataSource = list;  
DataGrid1.DataBind();  

Thank you for any help you can offer.

ASP.NET
ASP.NET
A set of technologies in the .NET Framework for building web applications and XML web services.
3,324 questions
0 comments No comments
{count} votes

2 answers

Sort by: Most helpful
  1. Lan Huang-MSFT 26,686 Reputation points Microsoft Vendor
    2022-10-11T05:59:42.037+00:00

    Hi @moondaddy ,
    You can change BoundColumn to TemplateColumn to display each item in the column after the specified template. This allows you to provide custom controls in the column.
    Then use <asp:TextBox> in <asp:TemplateField> to allow multiple lines of text.

     <asp:TemplateColumn HeaderText="ExceptionData" >  
                       <ItemTemplate>  
                         <asp:TextBox ID="ExceptionData" BorderStyle="None" runat="server" Width="400" Rows="5"  TextMode="MultiLine"  Text='<%# Bind("ExceptionData") %>'></asp:TextBox>  
                          </ItemTemplate>  
    </asp:TemplateColumn>  
    

    Best regards,
    Lan Huang


    If the answer is the right solution, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".
    Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.

    1 person found this answer helpful.
    0 comments No comments

  2. SurferOnWww 2,076 Reputation points
    2022-10-12T01:01:11.547+00:00

    Using the TemplateColumn, how about putting a div element in it and apply CSS as follows:

    <style type="text/css">  
        div.style1  
        {  
            width: 400px;  
            overflow: hidden;  
            white-space: nowrap;  
            text-overflow: ellipsis;  
        }  
    </style>  
    
    0 comments No comments