Setting the Scroll height in clientside

7 posts, 0 answers
  1. John John
    John John avatar
    132 posts
    Member since:
    Aug 2009

    Posted 11 Mar 2010 Link to this post

    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
  2. Schlurk
    Schlurk avatar
    812 posts
    Member since:
    May 2009

    Posted 11 Mar 2010 Link to this post

    I believe this documentation article is exactly what you're looking for :)
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. John John
    John John avatar
    132 posts
    Member since:
    Aug 2009

    Posted 11 Mar 2010 Link to this post

    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

     

  5. Valery
    Valery avatar
    45 posts
    Member since:
    Nov 2008

    Posted 11 Mar 2010 Link to this post

    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.
  6. Dimo
    Admin
    Dimo avatar
    8330 posts

    Posted 12 Mar 2010 Link to this post

    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.
  7. John John
    John John avatar
    132 posts
    Member since:
    Aug 2009

    Posted 12 Mar 2010 Link to this post

    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

  8. John John
    John John avatar
    132 posts
    Member since:
    Aug 2009

    Posted 15 Mar 2010 Link to this post

    Hi,
          Any ideas about the above mentioned topic

    Thanks
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017