Ok, here's a general question for everyone, including the Telerikians! :)
I have a grid, that does horizontal scrolling. It does not do vertical scrolling because since it is inside a sitefinity portal, auto resizing the height is just no fun at all. Therefore, I expand the grid depending on the number of columns per page, which gives me horizontal scrolling, and the vertical scrolling is taken care of by the browser.
Here's the problem. If I am showing 100 rows per page, the grid is rather long, and the scrollbar for horizontal scrolling is WAY down at the bottom. What I am looking for is a trick to scroll horizontally without scrolling down to use the horizontal scrollbar.
Tabbing is out, as the grid doesn't have keyboard navigation enabled, for reasons I won't go into here. Using the left and right arrow keys work, but it is woefully slow.
Anyone have any tricks up their sleeve in this regard?
Thanks,
Kuba
I have a grid, that does horizontal scrolling. It does not do vertical scrolling because since it is inside a sitefinity portal, auto resizing the height is just no fun at all. Therefore, I expand the grid depending on the number of columns per page, which gives me horizontal scrolling, and the vertical scrolling is taken care of by the browser.
Here's the problem. If I am showing 100 rows per page, the grid is rather long, and the scrollbar for horizontal scrolling is WAY down at the bottom. What I am looking for is a trick to scroll horizontally without scrolling down to use the horizontal scrollbar.
Tabbing is out, as the grid doesn't have keyboard navigation enabled, for reasons I won't go into here. Using the left and right arrow keys work, but it is woefully slow.
Anyone have any tricks up their sleeve in this regard?
Thanks,
Kuba
3 Answers, 1 is accepted
0
Hello Kuba,
Theoretically, you can place some scrollable <div> above the RadGrid control and force the RadGrid to scroll together with that <div>. However, this is a rather odd approach and involves some Javascript coding on your side.
You scenario screams for using vertical scrolling for the grid, but I am afraid I did not understand why you can't use it.
Sincerely yours,
Dimo
the Telerik team
Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.
Theoretically, you can place some scrollable <div> above the RadGrid control and force the RadGrid to scroll together with that <div>. However, this is a rather odd approach and involves some Javascript coding on your side.
You scenario screams for using vertical scrolling for the grid, but I am afraid I did not understand why you can't use it.
Sincerely yours,
Dimo
the Telerik team
Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.
0
George
Top achievements
Rank 1
Rank 1
answered on 28 Oct 2009, 05:46 PM
Hi Dimo,
The reason I can't use it is ideally, I would like the grid to shink/expand vertically along with the browser, however, the "tricks" out there to allow it to work, just don't work well. Setting a grid with a percentage height causes all sorts of problems. Even more if the grid is contained within another object (like a div or table), that has a percentage height specification. Which will always be the case in Sitefinity.
That being said, I don't want the grid to have a scrollbar vertically for itself AND a vertical scroll bar for the browser. Since I can't seem to get the grid to grow or shrink vertically with the browser (at least, in a way that doesn't look like crap), my alternative is to stretch the grid out based on the number of rows in the page. That way it will scrolls horizontally, but vertical scroll is taken care of by the browser.
The drawback here, is that to scroll horizontally, they first have to scroll vertically all the way to the bottom of the grid. I was hoping there was a way to increase the speed of the horizontal scroll using the arrow keys, or a way to have the horizontal scroll bar at the the top of the grid as well (with out an incredibly freaky hack to to it).
Now, without beating the dead horse to a pulp again, if you can show me an example of a grid within a sitefinity user control, placed in a sitefinity page, that can shrink and grow vertically with the browser, with paging, scrolling, and static headers on. I'd love to see it... Oh, and it work in all of the major browsers. But if all the past posts or blogs are any indication, I doubt it.
Thanks, Kuba
The reason I can't use it is ideally, I would like the grid to shink/expand vertically along with the browser, however, the "tricks" out there to allow it to work, just don't work well. Setting a grid with a percentage height causes all sorts of problems. Even more if the grid is contained within another object (like a div or table), that has a percentage height specification. Which will always be the case in Sitefinity.
That being said, I don't want the grid to have a scrollbar vertically for itself AND a vertical scroll bar for the browser. Since I can't seem to get the grid to grow or shrink vertically with the browser (at least, in a way that doesn't look like crap), my alternative is to stretch the grid out based on the number of rows in the page. That way it will scrolls horizontally, but vertical scroll is taken care of by the browser.
The drawback here, is that to scroll horizontally, they first have to scroll vertically all the way to the bottom of the grid. I was hoping there was a way to increase the speed of the horizontal scroll using the arrow keys, or a way to have the horizontal scroll bar at the the top of the grid as well (with out an incredibly freaky hack to to it).
Now, without beating the dead horse to a pulp again, if you can show me an example of a grid within a sitefinity user control, placed in a sitefinity page, that can shrink and grow vertically with the browser, with paging, scrolling, and static headers on. I'd love to see it... Oh, and it work in all of the major browsers. But if all the past posts or blogs are any indication, I doubt it.
Thanks, Kuba
0
Hello Kuba,
I understand the difficult situation you are in, but I don't think that it is caused by RadGrid or Sitefinity. Horizontal scrollbars reside at the bottom of the container and that's the way it is. Usually in such cases the container is set to be small enough, so the horizontal scrollbar is visible at all times. Alternatively, you can turn off all RadGrid scrolling and use only the browser scrolling. This is a perfectly viable solution in lots of cases.
Now to your question about RadGrid vertical resizing - the easier way to achieve that is to place the control inside a container that will resize together with the browser window. That can be any control or element - <div>, <table>, asp:Panel, telerik:RadSplitter, and so on. All this is a matter of CSS and setting up a correct layout. Since you have complete control over both things, I am not sure what does "Sitefinity user control" or "Sitefinity page" imply. The most important thing to know when dealing with percentage heights is that an element with a percentage height requires its parent to have an explicit height.
Here is an example with RadGrid resizing inside a RadSplitter:
http://www.telerik.com/community/code-library/aspnet-ajax/ajax/how-to-set-100-height-and-random-styles-to-a-radajaxmanager-update-panel.aspx
Here is an example with RadGrid resizing inside elements, which resize together with the browser window (these elements are the <html>, <body> and the <form>).
http://www.telerik.com/community/code-library/aspnet-ajax/grid/setting-100-height-and-resize-on-container-resize-for-grid-with-scrolling-and-static-headers.aspx
If the RadGrid is not placed inside an element, which resizes automatically with the browser window, you can subscribe to the window.onresize event and resize the RadGrid with Javascript. Here is how to do it:
http://www.telerik.com/community/code-library/aspnet-ajax/grid/how-to-set-radgrid-height-client-side-with-javascript.aspx
Let us know if you need more information.
Sincerely yours,
Dimo
the Telerik team
Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.
I understand the difficult situation you are in, but I don't think that it is caused by RadGrid or Sitefinity. Horizontal scrollbars reside at the bottom of the container and that's the way it is. Usually in such cases the container is set to be small enough, so the horizontal scrollbar is visible at all times. Alternatively, you can turn off all RadGrid scrolling and use only the browser scrolling. This is a perfectly viable solution in lots of cases.
Now to your question about RadGrid vertical resizing - the easier way to achieve that is to place the control inside a container that will resize together with the browser window. That can be any control or element - <div>, <table>, asp:Panel, telerik:RadSplitter, and so on. All this is a matter of CSS and setting up a correct layout. Since you have complete control over both things, I am not sure what does "Sitefinity user control" or "Sitefinity page" imply. The most important thing to know when dealing with percentage heights is that an element with a percentage height requires its parent to have an explicit height.
Here is an example with RadGrid resizing inside a RadSplitter:
http://www.telerik.com/community/code-library/aspnet-ajax/ajax/how-to-set-100-height-and-random-styles-to-a-radajaxmanager-update-panel.aspx
Here is an example with RadGrid resizing inside elements, which resize together with the browser window (these elements are the <html>, <body> and the <form>).
http://www.telerik.com/community/code-library/aspnet-ajax/grid/setting-100-height-and-resize-on-container-resize-for-grid-with-scrolling-and-static-headers.aspx
If the RadGrid is not placed inside an element, which resizes automatically with the browser window, you can subscribe to the window.onresize event and resize the RadGrid with Javascript. Here is how to do it:
http://www.telerik.com/community/code-library/aspnet-ajax/grid/how-to-set-radgrid-height-client-side-with-javascript.aspx
Let us know if you need more information.
Sincerely yours,
Dimo
the Telerik team
Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.