I have a relatively simple page with a radgrid inserted in a table row. I have set the radgrid width to 100%, the table is set to 100% and body is set to max-width=925px.
When the radgrid renders it fills the table width, however, if the window is subsequently resized to a narrower width, the radgrid stays at the width it was originally displayed at. If I make the window larger, the grid widens to the new width and will not go smaller again.
I have narrowed down the problem to the column headers. I am displaying only one column, and the column header is sized with an inline width value. When the grid grows, the column header also grows because the inline value is updated, presumably through some client-side javascript. However, when the grid narrows, the inline width value never changes.
What happens is that the grid will always grow, but will never shrink.
This problem always happens when the vertical scroll bars are visible. It is intermittent when the scroll bars are not visible.
Adjusting this value through javascript does no good. As soon as the focus is placed on a different item, the headers resize once again.
ideas? workarounds?
I am at a loss for what to do.
When the radgrid renders it fills the table width, however, if the window is subsequently resized to a narrower width, the radgrid stays at the width it was originally displayed at. If I make the window larger, the grid widens to the new width and will not go smaller again.
I have narrowed down the problem to the column headers. I am displaying only one column, and the column header is sized with an inline width value. When the grid grows, the column header also grows because the inline value is updated, presumably through some client-side javascript. However, when the grid narrows, the inline width value never changes.
What happens is that the grid will always grow, but will never shrink.
This problem always happens when the vertical scroll bars are visible. It is intermittent when the scroll bars are not visible.
Adjusting this value through javascript does no good. As soon as the focus is placed on a different item, the headers resize once again.
ideas? workarounds?
I am at a loss for what to do.
6 Answers, 1 is accepted
0
Keith
Top achievements
Rank 2
Rank 2
answered on 12 Apr 2013, 07:04 PM
Another issue with the size of the radgrid cropped up today. The height is also inconsistent.
Same scenario as above except I have client-side code to set the height of the grid to fit the height of the page. The client-side javascript hard codes the height of the radgrid to fit inside the height of the display. Instead of scrolling the entire page, only the radgrid is scrolled. However, when clicking any control on the page (say a button or other item that has AutoPostBack="true") then the radgrid is resized in height. If I resize the window, the grid is updated to the correct height (still not the correct width). If I change tabs on the tab control and change back, the grid is resized properly (according to the values I hard coded with javascript). If I try to drag/drop a column header, the radgrid is resized properly.
This behavior is exhibited in IE7,8,9 Firefox v19, and Chrome. Using the latest telerik tools.
Same scenario as above except I have client-side code to set the height of the grid to fit the height of the page. The client-side javascript hard codes the height of the radgrid to fit inside the height of the display. Instead of scrolling the entire page, only the radgrid is scrolled. However, when clicking any control on the page (say a button or other item that has AutoPostBack="true") then the radgrid is resized in height. If I resize the window, the grid is updated to the correct height (still not the correct width). If I change tabs on the tab control and change back, the grid is resized properly (according to the values I hard coded with javascript). If I try to drag/drop a column header, the radgrid is resized properly.
This behavior is exhibited in IE7,8,9 Firefox v19, and Chrome. Using the latest telerik tools.
0
Hello Keith,
When you are making the window larger, the body gets larger, and the grid resizes, to fit the 100%. However when you make the window smaller, the body does not get smaller (because of it's content). And since the body does not get smaller, the grid does not resize itself.
The grid can't handle directly the window resize, because in your page you can have lots of other different controls that to depend on the window size.
All the best,
Vasil
the Telerik team
When you are making the window larger, the body gets larger, and the grid resizes, to fit the 100%. However when you make the window smaller, the body does not get smaller (because of it's content). And since the body does not get smaller, the grid does not resize itself.
The grid can't handle directly the window resize, because in your page you can have lots of other different controls that to depend on the window size.
All the best,
Vasil
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
Keith
Top achievements
Rank 2
Rank 2
answered on 16 Apr 2013, 09:31 PM
This makes no sense. If the grid is set to be 100% and the body is 925px, the grid should be 925px (or very close depending upon margins and padding) If the body then resizes to 800px, the grid should resize to 100% of 800px, but it remains 100% of 925px.
If I open the page with a width of 800px, the grid is 100% of 800px, if I then maximize the window and the body is resized to 925px, the grid is sized to 100% of 925px. If I restore the 800px window, the grid remains at 925px.
It makes no sense to have a control (in this case the grid) set to 100% and not have it be 100% of the container. In many instances, it is over 100% of the width.
Incidently, this is the behavior of the grid as long as there is no data in the grid. As soon as data is added to the grid, the grid begins exhibiting this strange behavior. Also, my test data consists of only a single column, yet when I try to set the column width, with a static value, (lets say 100px) the column does not adhere to this value. Furthermore, when I try to set the width programmatically using javascript, the width is overridden by individual widths set on the column data. Again, this is counter-intuitive.
What I need to be able to do is set the width and height of the grid, whether a percentage of the parent or a static value (using client-side scripting) and have the grid adhere to this value. Currently it does not. Even setting a static width, the grid grows with the width of the parent container.
If I open the page with a width of 800px, the grid is 100% of 800px, if I then maximize the window and the body is resized to 925px, the grid is sized to 100% of 925px. If I restore the 800px window, the grid remains at 925px.
It makes no sense to have a control (in this case the grid) set to 100% and not have it be 100% of the container. In many instances, it is over 100% of the width.
Incidently, this is the behavior of the grid as long as there is no data in the grid. As soon as data is added to the grid, the grid begins exhibiting this strange behavior. Also, my test data consists of only a single column, yet when I try to set the column width, with a static value, (lets say 100px) the column does not adhere to this value. Furthermore, when I try to set the width programmatically using javascript, the width is overridden by individual widths set on the column data. Again, this is counter-intuitive.
What I need to be able to do is set the width and height of the grid, whether a percentage of the parent or a static value (using client-side scripting) and have the grid adhere to this value. Currently it does not. Even setting a static width, the grid grows with the width of the parent container.
0
Accepted
Hello Keith,
This happens because in IE7 for fixing some issues we are calculating the width client side, and making the window smaller does not resize the body, since inside it the grid has width in pixels.
You can override this using such CSS:
Greetings,
Vasil
the Telerik team
This happens because in IE7 for fixing some issues we are calculating the width client side, and making the window smaller does not resize the body, since inside it the grid has width in pixels.
You can override this using such CSS:
<style type="text/css"> .rgDataDiv .rgMasterTable { width: 100% !important; }</style>Greetings,
Vasil
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
Keith
Top achievements
Rank 2
Rank 2
answered on 19 Apr 2013, 03:05 PM
Very good, that resolves my grid width resizing peoblems. Along with setting the HeaderStyle-Width for each of the columns, the grid now displays the width as it should.
However, when I use a similar approach to set the height of the grid (and force vertical scrollbars), it seems the width settings set previously are ignored and horizontal scrollbars are used despite the single column only being set to 100px wide.
Is there a resolution to this?
However, when I use a similar approach to set the height of the grid (and force vertical scrollbars), it seems the width settings set previously are ignored and horizontal scrollbars are used despite the single column only being set to 100px wide.
Is there a resolution to this?
0
Keith
Top achievements
Rank 2
Rank 2
answered on 19 Apr 2013, 09:56 PM
I was finally able to resolve my problem by using this:
I have also managed to get the DataDiv client-side and adjust the height dynamically as the page resizes.
As a side note, if this sort of thing were documented, it would make manipulation of the controls much easier. Particularly now that more true web applications are being developed and all aren't merely displaying data for casual viewers.
<style type="text/css"> .rgHeaderDiv { width: 100% !important; } .rgDataDiv .rgMasterTable { width: 100% !important; } </style>I have also managed to get the DataDiv client-side and adjust the height dynamically as the page resizes.
As a side note, if this sort of thing were documented, it would make manipulation of the controls much easier. Particularly now that more true web applications are being developed and all aren't merely displaying data for casual viewers.