RadGrid pager control is pushing down or disappearing.

5 posts, 0 answers
  1. dipak
    dipak avatar
    10 posts
    Member since:
    Jun 2018

    Posted 28 Jul 2018 Link to this post

    I have implemented RadGrid in my project for displaying data. But facing one severe issue, when trying to post back or going to the next page, the pager control is shifting down. In order to fix Grid height and width according to the page height and width, i have implemented bellow java script in page load. But unfortunately after post back it is not working.

                       var grid, gridHeight;
                       gridHeight = document.documentElement.offsetHeight - 130;
                       grid = $find('<%= GridControl1.FindControl("RadGrid4").ClientID %>');
                       if(grid !== null){
                            contentPane.set_height(document.documentElement.offsetHeight - 90);  
                            grid.get_element().style.height = gridHeight+ "px";
                            contentSplitter.repaint();
                            grid.repaint();
                        }
                        else{
                            contentPane.set_height(document.documentElement.offsetHeight - 75);
                        }

    Kindly suggest, how to fix Grid height in post back so that pager control should not shift down or disappear.

    Thanks in advance.

    Dipak

  2. dipak
    dipak avatar
    10 posts
    Member since:
    Jun 2018

    Posted 29 Jul 2018 Link to this post

    I have implemented RadGrid in my project for displaying data. But facing one severe issue, when trying to post back or going to the next page, the pager control is shifting down. In order to fix Grid height and width according to the page height and width, i have implemented bellow java script in page load. But unfortunately after post back it is not working.

                       var grid, gridHeight;
                       gridHeight = document.documentElement.offsetHeight - 130;
                       grid = $find('<%= GridControl1.FindControl("RadGrid4").ClientID %>');
                       if(grid !== null){
                            contentPane.set_height(document.documentElement.offsetHeight - 90);  
                            grid.get_element().style.height = gridHeight+ "px";
                            contentSplitter.repaint();
                            grid.repaint();
                        }
                        else{
                             grid = $get('<%= GridControl1.FindControl("RadGrid4").ClientID %>');
                            contentPane.set_height(document.documentElement.offsetHeight - 75);
                             grid.get_element().style.height = gridHeight+ "px";
                             contentSplitter.repaint();
                             grid.repaint();
                        }

    Additionally in else section have tried to fix the height of grid by using bellow given java script, but unfortunately it is not working.
    grid.get_element().style.height = gridHeight+ "px";

    Kindly suggest, how to fix Grid height in post back so that pager control should not shift down or disappear.

    Thanks in advance.
    Dipak

  3. Eyup
    Admin
    Eyup avatar
    3990 posts

    Posted 01 Aug 2018 Link to this post

    Hello Dipak,

    Here are some steps which may help you troubleshoot this issue:

    1. Please ensure that you are using the latest major release version of the controls.

    2. Make sure that there are no controls on the page with different RenderMode options:
    https://docs.telerik.com/devtools/aspnet-ajax/controls/grid/mobile-support/render-modes#setting-render-mode

    3. Check your CSS classes and style files which may include some rule affecting this behavior.

    4. Verify that there are no script errors interfering after temporarily disabling AJAX:
    https://www.telerik.com/support/kb/aspnet-ajax/ajaxmanager/details/get-more-descriptive-errors-by-disabling-ajax

    I hope this will prove helpful.

    Regards,
    Eyup
    Progress Telerik
    Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
  4. dipak
    dipak avatar
    10 posts
    Member since:
    Jun 2018

    Posted 01 Aug 2018 in reply to Eyup Link to this post

    Hi Eyup, thanks for your reply, i followed step mentioned by you previously, but  unfortunately no luck for me , can please suggest me how to solve my 'Else' section of the code using javascript.

                            grid = $get('<%= GridControl1.FindControl("RadGrid4").ClientID %>');
                            contentPane.set_height(document.documentElement.offsetHeight - 75);
                             grid.get_element().style.height = gridHeight+ "px";
                             contentSplitter.repaint();
                             grid.repaint();

    Actually i getting a null reference error in grid.get_element(). In bellow line where i am trying to fix grid height and hence repaint() is also working for me.

    grid.get_element().style.height = gridHeight+ "px";

    Kindly help me to solve this error.

    Thanks in advance.
    Dipak

     

     

  5. Eyup
    Admin
    Eyup avatar
    3990 posts

    Posted 06 Aug 2018 Link to this post

    Hello Dipak, 

    Please try using $find method instead. Alternatively, you can use the $findControl approach to access the grid:
    https://www.telerik.com/support/kb/aspnet-ajax/details/access-telerik-controls-on-client-side

    That should resolve the issue. You can also check the following live sample:
    https://demos.telerik.com/aspnet-ajax/controls/examples/integration/gridandsplitterresizing/defaultcs.aspx?product=splitter

    Regards,
    Eyup
    Progress Telerik
    Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Back to Top