This is a migrated thread and some comments may be shown as answers.

[Solved] Cell Wrapping in Chrome/Safari

1 Answer 151 Views

Grid

This is a migrated thread and some comments may be shown as answers.

1 Answer, 1 is accepted

answered on 08 Feb 2010, 07:40 AM

Hello masterK,

I am not quite sure whether you are talking about word wrapping or word splitting. Text is wrapped by default, but words are not splitted by default. Please take a look at the following example:

<%@ Page Language="C#" %>

<%@ Import Namespace="System.Data" %>

<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>

<script runat="server">

protected void RadGrid_NeedDataSource(object sender, GridNeedDataSourceEventArgs e)

{

DataTable dt = new DataTable();

DataRow dr;

int rowsNum = 1;

dt.Columns.Add("LongString");

dt.Columns.Add("LongWord");

for (int i = 1; i <= rowsNum; i++)

{

dr = dt.NewRow();

dr["LongString"] = String.Format("{0} Text, which will wrap. This is the default browser and RadGrid behavior.", i);

dr["LongWord"] = String.Format("{0}ThisIsALongWordWhichWillNotBeSplittedByDefault", i);

dt.Rows.Add(dr);

}

(sender as RadGrid).DataSource = dt;

}

protected void RadGrid4_ItemDataBound(object sender, GridItemEventArgs e)

{

if (e.Item is GridDataItem)

{

TableCell cell = (e.Item as GridDataItem)["LongWord"] as TableCell;

string oldText = cell.Text;

int wordLength = oldText.Length;

// implement your word breaking logic here

cell.Text = oldText.Substring(0, Convert.ToInt32(wordLength / 3)) + " " + oldText.Substring(Convert.ToInt32(wordLength * 1 / 3), Convert.ToInt32(wordLength / 3)) + " " + oldText.Substring(Convert.ToInt32(wordLength * 2 / 3));

}

</script>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head id="Head1" runat="server">

<meta http-equiv="content-type" content="text/html;charset=utf-8" />

<title>RadControls</title>

<style type="text/css">

.BreakWords

{

word-break:break-all;

}

</style>

</head>

<body>

<form id="form1" runat="server">

<asp:ScriptManager ID="ScriptManager1" runat="server" />

<p>TableLayout="Auto" (default) - the long word will overflow</p>

<telerik:RadGrid

ID="RadGrid1"

runat="server"

Width="300px"

Skin="Office2007"

OnNeedDataSource="RadGrid_NeedDataSource">

<MasterTableView TableLayout="Auto" />

</telerik:RadGrid>

<br />

<p>TableLayout="Fixed" - the long word will be clipped</p>

<telerik:RadGrid

ID="RadGrid2"

runat="server"

Width="300px"

Skin="Office2007"

OnNeedDataSource="RadGrid_NeedDataSource">

<MasterTableView TableLayout="Fixed" />

</telerik:RadGrid>

<br />

<p>TableLayout="Fixed", word breaking enabled for one column - the long word will be splitted, <strong>but not in all browsers</strong></p>

<telerik:RadGrid

ID="RadGrid3"

runat="server"

Width="300px"

Skin="Office2007"

AutoGenerateColumns="false"

OnNeedDataSource="RadGrid_NeedDataSource">

<MasterTableView TableLayout="Fixed">

<Columns>

<telerik:GridBoundColumn DataField="LongString" HeaderText="LongString" />

<telerik:GridBoundColumn DataField="LongWord" HeaderText="LongWord" ItemStyle-CssClass="BreakWords" />

</Columns>

</MasterTableView>

</telerik:RadGrid>

<br />

<p>Manual word breaking at runtime</p>

<telerik:RadGrid

ID="RadGrid4"

runat="server"

Width="300px"

Skin="Office2007"

OnNeedDataSource="RadGrid_NeedDataSource"

OnItemDataBound="RadGrid4_ItemDataBound">

</telerik:RadGrid>

</form>

</body>

</html>

Regards,
Dimo
the Telerik team

Watch a video on how to optimize your support resource searches and check out more tips on the blogs.
Follow the status of features or bugs in PITS and vote for them to affect their priority.