Gridview column - Name is longer than the width of the column, it's breaking the name

Posted by Amulya.Arruru under ASP.NET on 4/21/2014 | Points: 10 | Views : 1179 | Status : [Member] | Replies : 4
On the Project Summary page, when the Scenario Name is longer than the width of the column, it's breaking the name of the scenario in the middle of words. This is happening throughout the application. Can we add a Wrap Text functionality to that column so that it preserve the structure of a word and only break to a new line on a space character.




Responses

Posted by: A2H on: 4/21/2014 [Member] [MVP] Bronze | Points: 25

Up
0
Down
You can try applying the below css to your gridview.
word-wrap:break-word;white-space: pre-line;

This will ensure that the words are wrapped properly at end of a word.
To apply the css to each column in grdview you can make use of GridViewRowDatabound event.
 /// <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)
{
e.Row.Cells[0].Attributes.Add("style", "word-wrap:break-word;white-space: pre-line;");
}
}


Complete Code:
HTML:

<asp:GridView ID="GridView6" runat="server" AutoGenerateColumns="False" DataKeyNames="Fruits" Width="150px"
ForeColor="#333333" GridLines="Both" OnRowDataBound="GridView6_RowDataBound" >
<AlternatingRowStyle BackColor="White" />
<Columns>
<asp:BoundField DataField="Fruits" HeaderText="Fruits">
<ItemStyle Width="30px" />
</asp:BoundField>
</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_Fruits();
//Bind the Grid
GridView6.DataBind();
}
}

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

DataTable dt = new DataTable();
DataRow dr;
string Item = "Orange Banana Orange Apple Orange Apple Chikku,Fruit1,Fruit2,Fruit3";
string[] list2 = Item.Split(',');
dt.Columns.Add("Fruits", typeof(string));
for (int i = 0; i < list2.Length; i++)
{
dr = dt.NewRow();
dr["Fruits"] = list2[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)
{
e.Row.Cells[0].Attributes.Add("style", "word-wrap:break-word;white-space: pre-line;");
}
}

Hope this helps.

Thanks,
A2H
My Blog

Amulya.Arruru, if this helps please login to Mark As Answer. | Alert Moderator

Posted by: Oswaldlily on: 4/22/2014 [Member] Starter | Points: 25

Up
0
Down
Hi add like this Style="word-break: break-all;word-wrap: break-word;"

<ItemTemplate>
<asp:Label ID="lblId" runat="server" Text='<%# Eval("AD_Literal_ID") %>' Style="word-break: break-all;
word-wrap: break-word;" Width="300px"></asp:Label>
</ItemTemplate>

Amulya.Arruru, if this helps please login to Mark As Answer. | Alert Moderator

Posted by: Amulya.Arruru on: 5/8/2014 [Member] Starter | Points: 25

Up
0
Down
protected void GridView6_RowDataBound(object sender, GridViewRowEventArgs e)
{
if (e.Row.RowType == DataControlRowType.DataRow)
{
e.Row.Cells[0].Attributes.Add("style", "word-wrap:break-word;white-space: pre-line;");
}
}


Without this code also working in ur Fruits code ... but when i configure RowDataBound code in my project summary page code.word again breaking..

Amulya.Arruru, if this helps please login to Mark As Answer. | Alert Moderator

Posted by: Amulya.Arruru on: 5/8/2014 [Member] Starter | Points: 25

Up
0
Down
plz once verify code and word should not break code is required
 Download source file

Amulya.Arruru, if this helps please login to Mark As Answer. | Alert Moderator

Login to post response