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

Can't make the text to wrap in a grid cell

9 Answers 828 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Nicolae
Top achievements
Rank 1
Nicolae asked on 22 Aug 2008, 05:23 PM
Hello,

It seems that I got a trivial issue that is related to the wrap text property for a bound column. I.e. I set the columns width to 20px, and the text in the cell is like that "text sldjkask tesxt  adf sfg sdf dlkjwrwe sfglhwetr sdgfwer sdgsdfg wtr bdfs er y cv,d gieu werf.gm iergy i4 ".

My expectation is that in the cell this text will be in few lines - however, this is not so - and it is one line anyway.

Please advice what I'm doing wrong?

Many thanks,

9 Answers, 1 is accepted

Sort by
0
Nicolae
Top achievements
Rank 1
answered on 22 Aug 2008, 06:23 PM
Just wanted to mention that this is for teh Details tables columns -  not for the master view
0
Daniel
Telerik team
answered on 22 Aug 2008, 06:29 PM
Hello Nicolae,

Please examine the following online demo:
Column/Row/Grid resize/reorder

Kind Regards,
Daniel
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.
0
Nicolae
Top achievements
Rank 1
answered on 22 Aug 2008, 06:58 PM
Thanks Daniel for you quick reply,

Unfortunately, the demos didn't help  - I saw there the wrapped text in the cells - but it just does not work on my side.
to enable wrapping it look that we should simply do
  <ItemStyle Width="100px"  />

Any thoughts?

Thanks
0
Nicolae
Top achievements
Rank 1
answered on 22 Aug 2008, 07:59 PM
I pointed it out that it is an issue for FF3 - in II it work pretty good.
Are there any know issues in your issue tracking system with that?

Any advices are very welcome.

Thanks a lot.
0
Bruno
Top achievements
Rank 2
answered on 24 Aug 2008, 04:19 PM
Show us your RadGrid declaration.
0
Nicolae
Top achievements
Rank 1
answered on 24 Aug 2008, 05:05 PM
Here it goes:

   <telerik:RadGrid ID="RadGrid1" runat="server" GridLines="None" Skin="Outlook" Width="100%"
                         OnDetailTableDataBind="RadGrid1_DetailTableDataBind" BorderWidth="0px" CellPadding="1"
                         CellSpacing="1" ShowStatusBar="True" OnItemCreated="RadGrid1_ItemCreated">
                         <MasterTableView AutoGenerateColumns="False" DataKeyNames="ItemNumber" BorderWidth="0px"
                             CellPadding="1" CellSpacing="1" Frame="Void" AllowPaging="True" PageSize="25">
                             <ExpandCollapseColumn Visible="True">
                                 <HeaderStyle Width="20px" />
                             </ExpandCollapseColumn>
                             <RowIndicatorColumn>
                                 <HeaderStyle Width="20px" />
                             </RowIndicatorColumn>
                             <AlternatingItemStyle BackColor="#E0E0E0" />
                             <Columns>
                                 <telerik:GridBoundColumn DataField="ItemNumber" HeaderText="Part Number" UniqueName="column1">
                                     <FooterStyle HorizontalAlign="Center" VerticalAlign="Middle" />
                                     <HeaderStyle HorizontalAlign="Center" VerticalAlign="Middle" />
                                     <ItemStyle Width="90px" />
                                 </telerik:GridBoundColumn>
                                 <telerik:GridBoundColumn DataField="Description" HeaderText="Part Description" UniqueName="column2">
                                     <HeaderStyle HorizontalAlign="Center" VerticalAlign="Middle" />
                                 </telerik:GridBoundColumn>
                                 <telerik:GridTemplateColumn UniqueName="TemplateEditColumn" DataField="ItemNumber">
                                     <ItemTemplate>
                                         <asp:HyperLink ID="EditLink" runat="server" Text="Add to Cart"></asp:HyperLink>
                                     </ItemTemplate>
                                     <ItemStyle Width="90px" />
                                 </telerik:GridTemplateColumn>
                             </Columns>
                             <CommandItemTemplate>
                                 <a href="#" onclick="return ShowAddToCartForm('{0}');">Add to Cart</a>
                             </CommandItemTemplate>
                             <DetailTables>
                                 <telerik:GridTableView runat="server" DataMember="ItemNumber" AutoGenerateColumns="False"
                                     GridLines="None" DataKeyNames="ItemNumber" Width="100%">
                                     <ExpandCollapseColumn Visible="True">
                                         <HeaderStyle Width="20px" />
                                     </ExpandCollapseColumn>
                                     <RowIndicatorColumn>
                                         <HeaderStyle Width="20px" />
                                     </RowIndicatorColumn>
                                     <DetailTables>
                                         <telerik:GridTableView Name="StaffDetails" runat="server" DataMember="StafDetails"
                                             GridLines="None" Width="100%" AutoGenerateColumns="False">
                                             <ExpandCollapseColumn>
                                                 <HeaderStyle Width="20px" />
                                             </ExpandCollapseColumn>
                                             <RowIndicatorColumn>
                                                 <HeaderStyle Width="20px" />
                                             </RowIndicatorColumn>
                                             <HeaderStyle BackColor="PaleTurquoise" Font-Bold="False" Font-Italic="False" Font-Overline="False"
                                                 Font-Strikeout="False" Font-Underline="False" ForeColor="Black" Wrap="True" />
                                             <Columns>
                                                 <telerik:GridBoundColumn DataField="Warehouse" HeaderText="Warehouse" UniqueName="column1">
                                                     <ItemStyle Width="100px" />
                                                 </telerik:GridBoundColumn>
                                                 <telerik:GridBoundColumn DataField="Qty" HeaderText="Qty" UniqueName="column2">
                                                     <ItemStyle Width="40px" />
                                                 </telerik:GridBoundColumn>
                                                 <telerik:GridBoundColumn DataField="Type" HeaderText="Type" UniqueName="column3">
                                                     <ItemStyle Width="100px" />
                                                 </telerik:GridBoundColumn>
                                                 <telerik:GridBoundColumn DataField="Pricing" HeaderText="Pricing" UniqueName="column4">
                                                     <ItemStyle Width="60px" />
                                                 </telerik:GridBoundColumn>
                                                 <telerik:GridBoundColumn DataField="Status" HeaderText="Status" UniqueName="column5">
                                                     <ItemStyle Width="60px" />
                                                 </telerik:GridBoundColumn>
                                                 <telerik:GridBoundColumn DataField="Technician" HeaderText="Technician" UniqueName="column">
                                                 </telerik:GridBoundColumn>
                                             </Columns>
                                         </telerik:GridTableView>
                                     </DetailTables>
                                     <Columns>
                                         <telerik:GridBoundColumn DataField="Manufactur" HeaderText="Manufacturer" UniqueName="columnManufacturer">
                                             <ItemStyle Width="90px" />
                                         </telerik:GridBoundColumn>
                                         <telerik:GridBoundColumn DataField="Category" HeaderText="Category" UniqueName="column">
                                             <ItemStyle Width="90px" />
                                         </telerik:GridBoundColumn>
                                         <telerik:GridBoundColumn DataField="Model" HeaderText="Model" UniqueName="columnModel">
                                             <ItemStyle Width="90px" />
                                         </telerik:GridBoundColumn>
                                         <telerik:GridBoundColumn DataField="CustNotes" HeaderText="Notes" UniqueName="columnNotes">
                                         </telerik:GridBoundColumn>
                                     </Columns>
                                     <HeaderStyle BackColor="LightBlue" Font-Bold="False" Font-Italic="False" Font-Overline="False"
                                         Font-Strikeout="False" Font-Underline="False" ForeColor="Black" Wrap="True" />
                                 </telerik:GridTableView>
                             </DetailTables>
                             <HeaderStyle BackColor="CornflowerBlue" Font-Bold="False" Font-Italic="False" Font-Overline="False"
                                 Font-Strikeout="False" Font-Underline="False" ForeColor="White" Wrap="True" />
                             <PagerStyle Mode="NextPrevAndNumeric" />
                         </MasterTableView>
                         <FilterMenu EnableTheming="True" Skin="Outlook">
                             <CollapseAnimation Duration="200" Type="OutQuint" />
                         </FilterMenu>
                         <AlternatingItemStyle BackColor="#E0E0E0" BorderStyle="None" />
                     </telerik:RadGrid>

Again, this works well in IE6 for example (text wrapping in teh cell) = but it does not work at all in FF 3,.

Any advices will be much appreciated.

Thanks in advance,
0
Daniel
Telerik team
answered on 25 Aug 2008, 04:51 PM
Hello Nicolae,

I made an simple example based on your RadGrid declaration. You can use the code below in order to check the wrap behavior on real-time.
<ClientSettings> 
<Resizing AllowColumnResize="true" ClipCellContentOnResize="false"
EnableRealTimeResize="true" /> 
</ClientSettings> 
 

Additionally you can set your table layout to fixed.
<MasterTableView AutoGenerateColumns="False" BorderWidth="0px"
CellPadding
="1" CellSpacing="1" 
    Frame="Void" AllowPaging="True" PageSize="25"
DataSourceID
="SqlDataSource1" TableLayout="Fixed"

Regards,
Daniel
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.
0
Nicolae
Top achievements
Rank 1
answered on 25 Aug 2008, 07:26 PM
Thanks Daniel for your quick response.

I have tried the sample you prepared and if indeed worked - resize and wrapping of the text in a cell, but it's not what I need to have in the grid. If I just put TableLayout="Fixed" - then the text wrap in the cell does not happen.

I mean, resizing is OK - but it's not required in my grid (more that that it is require to have the columns fixed). More that that what I need is the text to get wrapped in a cell if it is longer that the cell width.Again, in  FF3.0  (in FF3.0) text wrapping does not work for me when the grid is opened with data from the data source.
I would be very glad if you can give some further guidance if there are more settings to set for a grid or an work around to make it working.

Many thanks,

0
Daniel
Telerik team
answered on 28 Aug 2008, 12:49 PM
Hello Nicolae,

I added Grid resizing options just for your convenience - they are not needed to wrap the text in RadGrid.
Indeed it is possible the cell content to break the borders if your text have no empty spaces in it. The mentioned spaces are mandatory in order to prevent this behavior (text breaking the cell) when using TableLayout="Auto".

Only Internet Explorer is able to properly wrap the text if there are no spaces - this is browser behavior.

Basically the code shown below is enough to achieve text wrapping (this is default functionality):

aspx:
<div> 
    <telerik:RadGrid ID="RadGrid1" runat="server" GridLines="None" Skin="Vista"
        <MasterTableView TableLayout="Fixed" /> 
    </telerik:RadGrid> 
    <asp:XmlDataSource ID="XmlDataSource1" runat="server" DataFile="~/App_Data/TestDB.xml"
    </asp:XmlDataSource> 
</div> 

code-behind:
protected void Page_Load(object sender, EventArgs e) 
    RadGrid1.DataSource = XmlDataSource1; 

I attached this website to the thread for testing purposes.

Regards,
Daniel
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.
Tags
Grid
Asked by
Nicolae
Top achievements
Rank 1
Answers by
Nicolae
Top achievements
Rank 1
Daniel
Telerik team
Bruno
Top achievements
Rank 2
Share this question
or