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

Setting the Scroll height in clientside

6 Answers 343 Views
Grid
This is a migrated thread and some comments may be shown as answers.
John John
Top achievements
Rank 1
John John asked on 11 Mar 2010, 02:52 PM
Hi,
       I am using RadGrid, which has the feature of Virtual scrolling also. I planned to change the height of the Grid based on the height of the screen.Which is calling everytime window on loading.

Suppose if i could adjust the height of the grid, how can i adjust the height of the virtual scroll bar.So i also want to adjust the height of the scroll with grid in clinet side. How can i fix the scrolling height in clientside.

-Thanks

6 Answers, 1 is accepted

Sort by
0
Schlurk
Top achievements
Rank 2
answered on 11 Mar 2010, 05:02 PM
I believe this documentation article is exactly what you're looking for :)
0
John John
Top achievements
Rank 1
answered on 11 Mar 2010, 05:32 PM
Hi,
      Thanks for your reply, I am calling the below methods to set the DIV and Grid size dynamically by the function of SetSize(), which has to be called every time window loads. The methods is given below;

window.onload =

function() { SetSize(); }

 

window.onresize =

function() { SetSize(); }

So there i am not able to get the RadGrid1.GridDataDiv (or) document.getElemetnById("RadGrid1").GridDataDiv  at the load time. It returns the undefined notification. So how can i get this. Can u give me some runtime coding samples

-Thanks

 

0
Valery
Top achievements
Rank 2
answered on 11 Mar 2010, 06:47 PM
Hi John,

Using document.getElementById('RadGrid1') is the same as $get('RadGrid1') which is not a proper way of obtaining the RadGrid client object reference. You should use $find('RadGrid1') instead. You can find more detailed info about that in the documentation.

You could use the following piece of code in order to subscribe for the page load event.
Sys.Application.add_load(function() { SetSize(); }); 

There are also some features of the window.onresize event handling that are worth mentioning. You could read a pretty small article published here: http://mbccs.blogspot.com/2007/11/fixing-window-resize-event-in-ie.html .

Hope it helps,
Valery.
0
Dimo
Telerik team
answered on 12 Mar 2010, 10:29 AM
John,

Resizing RadGrid on the client when virtual paging is used is currently not supported out of the box. You can achieve it by using the following Javascript, but unexpected side effects are possible:

Sys.Application.add_init(setGridHeight);
 
function setGridHeight()
{
    $get("<%= RadGrid1.ClientID %>_GridData").style.height = 250 + "px";
    var gridObject = $find("<%= RadGrid1.ClientID %>");
    if (gridObject)
    {
        gridObject._scrolling._initializeVirtualScrollPaging();
    }
}


The setGridHeight method should be executed also after each AJAX request, which updates the RadGrid:

<telerik:RadAjaxManager>
      <ClientEvents OnResponseEnd="setGridHeight" />
</telerik:RadAjaxManager>


In the above function, the $get() part is executed on initial page load before the RadGrid client object has been instantiated, and also after AJAX requests, while the second part is executed only after AJAX requests.


Regards,
Dimo
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.
0
John John
Top achievements
Rank 1
answered on 12 Mar 2010, 11:51 AM
Hi Valery,
             Yes, I could set the height of the scroll as per your demo. But it is not met my scneario. I would like to hear a realtime suggession about my scenario. The scenario as i explained above. I am having the grid which has the feature of Virtual scrolling too. The grid is placed under the DIV section

My scenario is;
* The DIV height and width need to be set dynamically based on the screen height and width
* Based on the DIV height and width, the grid height in the DIV section also need to be adjusted along with DIV size. I used to some percenatge measurement from DIV size to fix the height of the grid.

Presently i could set the DIV  and GRID based on the below mentioned sample of code.
<script language="javascript">  
        //Function to set the Div height based on window height  
        function SetDIVSize() {  
            var myWidth = 0myHeight = 0;  
            if (typeof (window.innerWidth) == 'number') {  
                //Non-IE  
                myWidth = window.innerWidth;  
                myHeight = window.innerHeight;  
            } else if (document.documentElement && (document.documentElement.clientWidth || document.documentElement.clientHeight)) {  
                //IE 6+ in 'standards compliant mode'  
                myWidth = document.documentElement.clientWidth;  
                myHeight = document.documentElement.clientHeight;  
            } else if (document.body && (document.body.clientWidth || document.body.clientHeight)) {  
                //IE 4 compatible  
                myWidth = document.body.clientWidth;  
                myHeight = document.body.clientHeight;  
            }  
         
            var div = document.getElementById("RadTest");  
            var grid = document.getElementById("RadGrid1");  
              
            var ScrollGrid = $find("<%=RadGrid1.ClientID %>");  
 
            var iDivHeight = myHeight * 85 / 100;  
            var iGridHeight = iDivHeight * 99 / 100;  
              
            //Setting the DIV height by taking measurement from the screen height  
            div.style.height = iDivHeight + "px";  
 
            //Setting the Grid height by taking measurement from the screen height  
            grid.style.height = iGridHeight + "px";  
              
            if (ScrollGrid != null) {  
                var scrollArea = ScrollGrid.GridDataDiv;  
                // Setting the scroll height based on the height of the Grid  
                scrollArea.style.height = iGridHeight + "px";                  
            }            
        }         
        window.onload = function() { SetDIVSize(); }  
        window.onresize = function() { SetDIVSize(); }  
    </script>    

I used the b above code for my scenario but i faced some issues,

* The grid height seemed expanded morethan from the DIV size and the scroll height. The size is not looking good.

* When doing the action of row expanding, column hiding,grouping has been done then the dynmaic size of the grid is gone. It gets the the default height. Only when i reload or refresh the page again it sets the dynamic height to grid.

* In Firefox the grid size look and feel is alos not good the grid  height is ok but the half of the rows or some of the rows is only displayed  When i resize the window the data is displayed completely with all rows 

In order to solve the above issue of resetting the grid height dynamically eventhought the action of grid expanding and grouping..; i used the same amount of code to GridCreated event also.

function GridCreated(sender, eventArgs) {  
             var myWidth = 0myHeight = 0;  
             if (typeof (window.innerWidth) == 'number') {  
                 //Non-IE  
                 myWidth = window.innerWidth;  
                 myHeight = window.innerHeight;  
             } else if (document.documentElement && (document.documentElement.clientWidth || document.documentElement.clientHeight)) {  
                 //IE 6+ in 'standards compliant mode'  
                 myWidth = document.documentElement.clientWidth;  
                 myHeight = document.documentElement.clientHeight;  
             } else if (document.body && (document.body.clientWidth || document.body.clientHeight)) {  
                 //IE 4 compatible  
                 myWidth = document.body.clientWidth;  
                 myHeight = document.body.clientHeight;  
             }  
 
             
             var grid = document.getElementById("RadFirmGrid");  
             var ScrollGrid = $find("<%=RadFirmGrid.ClientID %>");  
 
             
             var iGridHeight = iDivHeight * 99 / 100;  
             grid.style.height = iGridHeight + "px";  
 
             //            if (ScrollGrid != null) {  
             //                var scrollArea = ScrollGrid.GridDataDiv;  
             //                scrollArea.style.height = iGridHeight - 70 + "px";  
             //            }  
         } 

But as i result of the above mentioned method the grid height and look and feel of the page is not fine upto what  i am expected.
I dont know whether i need to set the height of the scroll dynamically (or) whether the grid automatically adjusts it.
So how can i achieve the above related scenario, suggest your ideas about above codes of so far i used the right way  to do the concept
If possible direct me the possible ways to acheive the scenario with some sample of code.

-Thanks

0
John John
Top achievements
Rank 1
answered on 15 Mar 2010, 02:42 PM
Hi,
      Any ideas about the above mentioned topic

Thanks
Tags
Grid
Asked by
John John
Top achievements
Rank 1
Answers by
Schlurk
Top achievements
Rank 2
John John
Top achievements
Rank 1
Valery
Top achievements
Rank 2
Dimo
Telerik team
Share this question
or