We have a grid with quite a few columns that we want to fit into a 1024x768 screen.
The grid is inside an html table cell (for certain reasons we have to do it using html tables). The table has 4 columns, and the grid is in the second column with a colspan of 3
The problem now is, the grid goes extra long (as in wide).
As seen in the attached images, when a fixed width is specified for the grid (width=895px;) then the grid width fits, but there is a horizontal scroll bar that we don't want.
When there is no fixed width specified for the grid, then the grid goes past the width of the table/cell/etc, requiring the user to horizontally scroll on the browser window.
Screenshots were taken using IE9.
I also note that when we remove the Client Settings Scrolling AllowScroll, then it fits fine without a width specified for the grid. But obviously it would not show a specific height for the grid. Basically we want the grid to have a specific height regardless of how many rows of data it has (0, 1, 2, 400, etc).
Is there a way to get this to work?
The grid is inside an html table cell (for certain reasons we have to do it using html tables). The table has 4 columns, and the grid is in the second column with a colspan of 3
<tr> <td> </td> <td colspan="3" style="max-width:895px;"> <telerik:RadGrid ID="RadGrid1" runat="server" AutoGenerateColumns="False" CellSpacing="0" GridLines="Vertical" Height="285"> <ClientSettings> <Scrolling AllowScroll="true" UseStaticHeaders="true"/> </ClientSettings> stuff ommitted for readability </td></tr>The problem now is, the grid goes extra long (as in wide).
As seen in the attached images, when a fixed width is specified for the grid (width=895px;) then the grid width fits, but there is a horizontal scroll bar that we don't want.
When there is no fixed width specified for the grid, then the grid goes past the width of the table/cell/etc, requiring the user to horizontally scroll on the browser window.
Screenshots were taken using IE9.
I also note that when we remove the Client Settings Scrolling AllowScroll, then it fits fine without a width specified for the grid. But obviously it would not show a specific height for the grid. Basically we want the grid to have a specific height regardless of how many rows of data it has (0, 1, 2, 400, etc).
Is there a way to get this to work?
4 Answers, 1 is accepted
0
Rem
Top achievements
Rank 1
Rank 1
answered on 19 Mar 2013, 08:15 PM
Some additional information regarding this: the issue only appears to occur when the grid has at least one edit item template column. If there are no template columns then it works fine.
0
Hi Rem,
When grid with scrolling enabled is wrapped inside a table cell (under IE only) you may need to set the layout of the corresponding table to fixed to avoid unwanted stretching of the scrolling area:
This is due to the specific IE box model. Give it a try and see if it helps to resolve the described problem.
All the best,
Pavlina
the Telerik team
When grid with scrolling enabled is wrapped inside a table cell (under IE only) you may need to set the layout of the corresponding table to fixed to avoid unwanted stretching of the scrolling area:
<table style="table-layout:fixed;"> grid definition</table>This is due to the specific IE box model. Give it a try and see if it helps to resolve the described problem.
All the best,
Pavlina
the Telerik team
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
0
Rem
Top achievements
Rank 1
Rank 1
answered on 21 Mar 2013, 02:21 AM
Hi Pavlina,
We have tried this as well (it was noted in one of your documentation pages) but it didn't work.
Adding the style to the table broke the layout of the whole page (the grid is on the later rows of the table).
If we added another table in the cell where the grid is, and had the grid as the sole content of this added table (1 row 1 column 1 cell), then the grid still ended up with a horizontal scrollbar like in the Grid-AllowScroll-FixedWidth.jpg image attached on the original post.
I note that the grid has 16 columns, 8 of which have an edit item template.
We have tried this as well (it was noted in one of your documentation pages) but it didn't work.
Adding the style to the table broke the layout of the whole page (the grid is on the later rows of the table).
If we added another table in the cell where the grid is, and had the grid as the sole content of this added table (1 row 1 column 1 cell), then the grid still ended up with a horizontal scrollbar like in the Grid-AllowScroll-FixedWidth.jpg image attached on the original post.
I note that the grid has 16 columns, 8 of which have an edit item template.
0
Hi Rem,
At this point it will be very useful if you can provide a live url of your project, so we can inspect it locally and advice you further.
Kind regards,
Pavlina
the Telerik team
At this point it will be very useful if you can provide a live url of your project, so we can inspect it locally and advice you further.
Kind regards,
Pavlina
the Telerik team
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.