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

Excel Cell Like Text Overflow Capability

3 Answers 265 Views

Grid

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

3 Answers, 1 is accepted

Accepted

answered on 09 Jul 2010, 09:41 AM

Hello Jamil,

You can achieve overflowing text in RadGrid as demonstrated below. However, I am curious to find out how you intend to paste text inside RadGrid cells.

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

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

<!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 runat="server">

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

<title>RadControls</title>

<style type="text/css">

.RadGrid table,

.RadGrid td

{

overflow:visible !important;

}

</style>

</head>

<body>

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

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

<telerik:RadGrid

ID="RadGrid1"

runat="server"

Width="600px"

AutoGenerateColumns="false"

DataSourceID="XmlDataSource1">

<MasterTableView TableLayout="Fixed">

<Columns>

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

<telerik:GridBoundColumn DataField="Text" HeaderText="Text" DataFormatString="<nobr>{0}</nobr>" />

<telerik:GridBoundColumn DataField="Column3" HeaderText="Column 3" />

</Columns>

</MasterTableView>

<ClientSettings EnableAlternatingItems="false">

<Scrolling AllowScroll="true" UseStaticHeaders="true" />

</ClientSettings>

</telerik:RadGrid>

<asp:XmlDataSource ID="XmlDataSource1" runat="server">

<Data>

<nodes>

<node ID="1" Text="Some Long Text Here Some Long Text Here Some Long Text Here" Column3="Col 3" />

<node ID="2" Text="Some Long Text Here Some Long Text Here Some Long Text Here" Column3="Col 3" />

<node ID="3" Text="Some Long Text Here Some Long Text Here Some Long Text Here" Column3="Col 3" />

<node ID="4" Text="Some Long Text Here Some Long Text Here Some Long Text Here" Column3="Col 3" />

</nodes>

</Data>

</asp:XmlDataSource>

</form>

</body>

</html>

All the best,
Dimo
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items

answered on 09 Jul 2010, 03:30 PM

Thanks Dimo.
I almost got what i was looking for. I would like to tweak your solution if possible; the text should not overflow to next column if it has already text in it which meansi wana flow the text to next column if and only if the next column is empty.

i can try to find a workarond for it through grid events but was wondering if the RadGrid has some built in funtionality to support such behavior.

Well, i've not yet finalized about the copy paste workflow but i've few ideas to implement it. For example, i can put whole grid in Edit mode, can capture keyboard keys to facilitate the user. When i got final specs from my client then i will be in a better psition to decide what suits in my case.

Thanks,
Jamil

answered on 09 Jul 2010, 03:46 PM

Hi Jamil,

>> "the text should not overflow to next column if it has already text in it which meansi wana flow the text to next column if and only if the next column is empty."

This can be achieved only if you inspect all cells' content in the ItemDataBound event and apply the overflow CSS styles separately for each cell instead of globally.

http://www.telerik.com/help/aspnet-ajax/grdaccessingcellsandrows.html

However, there is no way to tell on the server if the cell content will overflow to the next empty cell and also to the second cell to the right. There is also no way to clip the cell content in such a way that it overflows to the adjacent cell only, but not to the second one.

All the best,
Dimo
the Telerik team