This isn't so much a RadControls question but I'm not sure if there is anything special in the RadGrid which will help here, and other RadGrid developers might find this helpful, so....
I have a huge grid that's about 1600px wide, and can contain around 1000 rows which the user does not want to page.
When displayed in the browser we get both horizontal and vertical scrolls for the browser.
To allow for a fixed header I have to assign a height to the grid. That height is 800px but needs to be smaller.
What's happening is that the user needs to scroll the browser to find the bottom of the grid, then browser horizontally to find the right margin of the grid, then scroll the grid vertically.
We have two sets of scrollbars, and that's just a pain.
1) I'm wondering if we can fix a grid header on a page without setting the height. The effect being that the browser scroll would reveal more rows but the grid header would float in-place. I doubt this is possible now but it might be a valid enhancement for RadGrid in the future.
2) (The real question here) What's the best way to give users easier access to a huge grid like this? I'm thinking about eliminating the scrollbars on the browser so that the user only sees the scrollbars on the grid. I would need to check the height of the browser visible area and adjust the grid height dynamically so that the grid horizontal scroll is always at the bottom.
3) Is there any way to scroll a grid horizontally or vertically with a mechanism other than the traditional hscroll and vscroll at the bottom and right of the control? What about floating scrollbars or a similar mechanism within the current window? I could put the grid in a smaller viewport, but the user wants to see as much data as possible (ergo no paging) and a huge number of columns rather than a hierarchical grid, a secondary grid, or popups.
4) Does anyone already have code to share for #2, to remove browser scrollbars and dynamically set the size of the grid? The problem here is that every browser is different - I'm hoping jQuery will help.
5) Any other ideas on elegant ways to render this amount of data?
Thanks!
I have a huge grid that's about 1600px wide, and can contain around 1000 rows which the user does not want to page.
When displayed in the browser we get both horizontal and vertical scrolls for the browser.
To allow for a fixed header I have to assign a height to the grid. That height is 800px but needs to be smaller.
What's happening is that the user needs to scroll the browser to find the bottom of the grid, then browser horizontally to find the right margin of the grid, then scroll the grid vertically.
We have two sets of scrollbars, and that's just a pain.
1) I'm wondering if we can fix a grid header on a page without setting the height. The effect being that the browser scroll would reveal more rows but the grid header would float in-place. I doubt this is possible now but it might be a valid enhancement for RadGrid in the future.
2) (The real question here) What's the best way to give users easier access to a huge grid like this? I'm thinking about eliminating the scrollbars on the browser so that the user only sees the scrollbars on the grid. I would need to check the height of the browser visible area and adjust the grid height dynamically so that the grid horizontal scroll is always at the bottom.
3) Is there any way to scroll a grid horizontally or vertically with a mechanism other than the traditional hscroll and vscroll at the bottom and right of the control? What about floating scrollbars or a similar mechanism within the current window? I could put the grid in a smaller viewport, but the user wants to see as much data as possible (ergo no paging) and a huge number of columns rather than a hierarchical grid, a secondary grid, or popups.
4) Does anyone already have code to share for #2, to remove browser scrollbars and dynamically set the size of the grid? The problem here is that every browser is different - I'm hoping jQuery will help.
5) Any other ideas on elegant ways to render this amount of data?
Thanks!
1 Answer, 1 is accepted
0
TonyG
Top achievements
Rank 1
Rank 1
answered on 28 Sep 2012, 07:22 PM
As a follow-up, I found a few threads on this topic after my original post, but I'm still not getting any serious joy.
Here is a sample from the Telerik code library. I've used that and other notes I've found as a base for this.
Eliminating scrollbars in the browser is easy:
Now the script to set the grid size on load And on resize. The set on load isn't working yet.
When the browser resizes, I do see the grid height changing but the it immediately goes back to the original height. This happens in some Telerik scripting that looks like this:
So it looks like even when I resize the grid, the Telerik script just seems to resize it back.
Remember that I'm trying to hook the browser resize event, not the grid client resize event. How do I get these guys to play nicely?
Should I add grid.repaint() or another method after setting the height?
Getting there...
Thanks!
Here is a sample from the Telerik code library. I've used that and other notes I've found as a base for this.
Eliminating scrollbars in the browser is easy:
<body style="overflow:hidden;">Now the script to set the grid size on load And on resize. The set on load isn't working yet.
$(document).ready(function () { resizeGrid(); $(window).resize(function () { resizeGrid(); });});function resizeGrid() { var grid = $find("<%= RadGrid1.ClientID %>"); if (grid == null) return; var d = grid.GridDataDiv; var h = $(window).height(); if (h > 700) { d.style.height = (h - 500) + "px"; }}When the browser resizes, I do see the grid height changing but the it immediately goes back to the original height. This happens in some Telerik scripting that looks like this:
_initializeDimensions:function(){var a=this;this.onWindowResize();this.initializeAutoLayout();this.applyFrozenScroll();var c=0;this._onResizeDelegate=Function.createDelegate(this._owner,function(){var e=this;clearInterval(c);c=setTimeout(function(){clearInterval(c);e.repaint();},200);});if(navigator.userAgent.toLowerCase().indexOf("msie")!=-1){setTimeout(function(){$addHandler(window,"resize",a._onResizeDelegate);},0);}else{$addHandler(window,"resize",this._onResizeDelegate);...So it looks like even when I resize the grid, the Telerik script just seems to resize it back.
Remember that I'm trying to hook the browser resize event, not the grid client resize event. How do I get these guys to play nicely?
Should I add grid.repaint() or another method after setting the height?
Getting there...
Thanks!