Gridview Long Text Issue

Question

User1404447808 posted

I don't want to trim the data .. I just want that if text is too long for given width of that label then it auto split to second line

<asp:TemplateField HeaderText="Description" ItemStyle-Width="100px" HeaderStyle-CssClass="blue-top">
                            <ItemTemplate>
                                <asp:Label ID="lblDescription" runat="server" Text='<%#Eval("description") %>' Width="70px"></asp:Label>
                             </ItemTemplate>
                             <EditItemTemplate>
                                 <asp:TextBox ID="G_txtDescription" runat="server" Width="70px" Text='<%#Eval("description") %>'></asp:TextBox>
                                 <asp:RequiredFieldValidator ID="RequiredFieldValidator_inside1" runat="server" ErrorMessage="*" ForeColor="Red" ControlToValidate="G_txtDescription" ValidationGroup="inside"></asp:RequiredFieldValidator>
                             </EditItemTemplate>
                        </asp:TemplateField>

Thanks

Answer 1

User2103319870 posted

You need to subscribe to GridView RowDatabound event and then apply the css styles to your respective columns in GridView.

You can try with the below code

/// <summary>
        /// Handles the RowDataBound event of the GridView6 control.
        /// </summary>
        /// <param name="sender">The source of the event.</param>
        /// <param name="e">The <see cref="GridViewRowEventArgs"/> instance containing the event data.</param>
        protected void GridView6_RowDataBound(object sender, GridViewRowEventArgs e)
        {
            if (e.Row.RowType == DataControlRowType.DataRow)
            {
                //here change the column index as per your GridVIew Design
                e.Row.Cells[0].Attributes.Add("style", "word-break:break-all;word-wrap:break-word;");
            }
        }

Complete Sample Code:

HTML:

<asp:GridView ID="GridView6" runat="server" AutoGenerateColumns="False" DataKeyNames="description"
                ForeColor="#333333" GridLines="Both" Width="150px" 
                onrowdatabound="GridView6_RowDataBound">
                <Columns>
                    <asp:TemplateField HeaderText="Description" ItemStyle-Width="100px" HeaderStyle-CssClass="blue-top">
                        <ItemTemplate>
                            <asp:Label ID="lblDescription" runat="server" Text='<%#Eval("description") %>' Width="70px"></asp:Label>
                        </ItemTemplate>
                        <EditItemTemplate>
                            <asp:TextBox ID="G_txtDescription" runat="server" Width="70px" Text='<%#Eval("description") %>'></asp:TextBox>
                            <asp:RequiredFieldValidator ID="RequiredFieldValidator_inside1" runat="server" ErrorMessage="*"
                                ForeColor="Red" ControlToValidate="G_txtDescription" ValidationGroup="inside"></asp:RequiredFieldValidator>
                        </EditItemTemplate>
                    </asp:TemplateField>
                </Columns>
            </asp:GridView>

C#:

/// <summary>
        /// Handles the Load event of the Page control.
        /// </summary>
        /// <param name="sender">The source of the event.</param>
        /// <param name="e">The <see cref="EventArgs"/> instance containing the event data.</param>
        protected void Page_Load(object sender, EventArgs e)
        {
            if (!IsPostBack)
            {
                //Assign the data to GridView
                GridView6.DataSource = this.Get_FirstName();
                //Bind the Grid
                GridView6.DataBind();
            }
        }

        //Populate some dummy data
        public DataTable Get_FirstName()
        {

            DataTable dt = new DataTable();
            DataRow dr;
            string Item = "ThisisalongtextThisisalongtextThisisalongtextThisisalongtextThisisalongtextThisisalongtextThisisalongtextThisisalongtext,ThisisalongtextThisisalongtextThisisalongtextThisisalongtextThisisalongtextThisisalongtextThisisalongtextThisisalongtextThisisalongtextThisisalongtextThisisalongtext,Fruit2,Fruit3";
            string[] list = Item.Split(',');
            dt.Columns.Add("description", typeof(string));
            for (int i = 0; i < list.Length; i++)
            {
                dr = dt.NewRow();
                dr["description"] = list[i];
                dt.Rows.Add(dr);
            }
            return dt;
        }

        /// <summary>
        /// Handles the RowDataBound event of the GridView6 control.
        /// </summary>
        /// <param name="sender">The source of the event.</param>
        /// <param name="e">The <see cref="GridViewRowEventArgs"/> instance containing the event data.</param>
        protected void GridView6_RowDataBound(object sender, GridViewRowEventArgs e)
        {
            if (e.Row.RowType == DataControlRowType.DataRow)
            {
                //here change the column index as per your GridVIew Design
                e.Row.Cells[0].Attributes.Add("style", "word-break:break-all;word-wrap:break-word;");
            }
        }

Rendered OutPut:

EDIT: Added rendered output

Answer 2

User2103319870 posted

If you want to apply the changes to a GridBound column then you can this altenative solution too....

First add the below css style in your page

<style type="text/css">
        .WordWrap
        {
            width: 100%;
            word-break: break-all;
        }
        .WordBreak
        {
            width: 100px;
            overflow: hidden;
            text-overflow: ellipsis;
        }
    </style>

Then wrap your gridivew inside a div and then assign the css class to your div

 <div class="WordWrap">
            <%--Add your gridview here--%>
         </div>

Complete Code is provided below

 <div class="WordWrap">
            <asp:GridView ID="GridView6" runat="server" AutoGenerateColumns="False" DataKeyNames="FirstName"
               ForeColor="#333333" GridLines="Both" Width="100%">
                <AlternatingRowStyle BackColor="White" />
                <Columns>
                    <asp:BoundField HeaderText="FirstName" DataField="FirstName">
                        <ItemStyle Width="35%" />
                    </asp:BoundField>
                    <asp:BoundField HeaderText="LastName" DataField="LastName">
                        <ItemStyle Width="50%" />
                    </asp:BoundField>
                </Columns>
            </asp:GridView>
        </div>

C#:

/// <summary>
        /// Handles the Load event of the Page control.
        /// </summary>
        /// <param name="sender">The source of the event.</param>
        /// <param name="e">The <see cref="EventArgs"/> instance containing the event data.</param>
        protected void Page_Load(object sender, EventArgs e)
        {
            if (!IsPostBack)
            {
                //Assign the data to GridView
                GridView6.DataSource = this.Get_FirstName();
                //Bind the Grid
                GridView6.DataBind();
            }
        }

        //Populate some dummy data
        public DataTable Get_FirstName()
        {

            DataTable dt = new DataTable();
            DataRow dr;
            string Item = "ThisisalongtextThisisalongtextThisisalongtextThisisalongtextThisisalongtextThisisalongtextThisisalongtextThisisalongtext,ThisisalongtextThisisalongtextThisisalongtextThisisalongtextThisisalongtextThisisalongtextThisisalongtextThisisalongtextThisisalongtextThisisalongtextThisisalongtext,Fruit2,Fruit3";
            string[] list = Item.Split(',');
            string Item2 = "ThisisalongtextThisisalongtextThisisalongtextThisisalongtextThisisalongtextThisisalongtextThisisalongtextThisisalongtext,ThisisalongtextThisisalongtextThisisalongtextThisisalongtextThisisalongtextThisisalongtextThisisalongtextThisisalongtextThisisalongtextThisisalongtextThisisalongtext,Fruit2,Fruit3";
            string[] list2 = Item2.Split(',');
            dt.Columns.Add("FirstName", typeof(string));
            dt.Columns.Add("LastName", typeof(string));
            for (int i = 0; i < list.Length; i++)
            {
                dr = dt.NewRow();
                dr["FirstName"] = list[i];
                dr["LastName"] = list2[i];
                dt.Rows.Add(dr);
            }
            return dt;
        }

Output:

Answer 3

User-1716253493 posted
Set TemplateField ItemStyle to allow wrapping