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

[Solved] auto horizontal scroll and prevent word wrap?

1 Answer 262 Views

Grid

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

Mike asked on 30 Jul 2009, 02:22 PM

I have 2 questions

1) We are using a grid where users can pick the columns that display. As a result the grid width can get very wide and break out of the page. See http://www.creditbootcamp.com/grid_problem.png

Is there a way we can have a horizontal scroll bar automatically appear if it breaks the container? The layout is liquid and uses percentages so we cannot assign any fixed width values. The grid is in a table <TD></TD> which is set at 75% width.
Here is the top grid code (excluding the GridTemplateColumns):

    
            <ds:DisputeGrid ID="CustomerSearchResults" EnableAjaxSkinRendering="True" EnableRowHover="True" runat="server" Skin='<%#Me.TelerikSkin %>' OnNeedDataSource="CustomerSearchResults_NeedDataSource" AllowSorting="true" EnableViewState="true" AllowCustomPaging="true" OnItemDataBound="CustomerSearchResults_ItemDataBound" OnInit="CustomerSearchResults_Init">

What I would like is for a horizontal scroll bar to automatically appear if it breaks the container.

2) My second question is how do you prevent wrapping of items in the grid. When the grid has lots of columns it causes the icons to wrap.
See http://www.creditbootcamp.com/grid_tools.png

We tried:
<rad:GridTemplateColumn UniqueName="Tools" HeaderText="Tools" ItemStyle-Width="150">
But it did not work. Putting the icons in a table did work but caused borders to show up around the table (which we dont want).

Thanks guys!!

1 Answer, 1 is accepted

answered on 05 Aug 2009, 07:07 AM

Hello Brett,

1)

You should enable RadGrid scrolling (with or without static headers). However, this will not be enough in IE, as there is a rendering bug related to scrollable containers inside table cells. If the scrollable container contains a table (as in RadGrid), the outer table is expanded incorrectly. In order to avoid this, you have to set style="table-layout:fixed" for the outer table and/or style="overflow:hidden" for the RadGrid control.

2)

First of all, column widths should be set with HeaderStyle-Width, not ItemStyle-Width.

In addition, the IE support for disabled text wrapping inside table cells is limited, so the following approach is required:

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

All the best,
Dimo
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.