RadGrid pager control is pushing down or disappearing.

[dipak]

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

[dipak]

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

[Eyup]

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

[dipak]

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

 

 

[Eyup]

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