locked
Gridview Long Text Issue RRS feed

  • 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

    Saturday, May 17, 2014 5:54 PM

Answers

  • 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

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Saturday, May 17, 2014 6:14 PM
  • 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:

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Saturday, May 17, 2014 6:26 PM

All replies

  • 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

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Saturday, May 17, 2014 6:14 PM
  • 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:

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Saturday, May 17, 2014 6:26 PM
  • User-1716253493 posted
    Set TemplateField ItemStyle to allow wrapping
    Saturday, May 17, 2014 6:51 PM