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

RadGrid pager control is pushing down or disappearing.

4 Answers 8 Views
Grid
This is a migrated thread and some comments may be shown as answers.
dipak
Top achievements
Rank 1
dipak asked on 28 Jul 2018, 10:57 PM

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

4 Answers, 1 is accepted

Sort by
0
dipak
Top achievements
Rank 1
answered on 29 Jul 2018, 02:14 PM

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

0
Eyup
Telerik team
answered on 01 Aug 2018, 05:05 AM
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.
0
dipak
Top achievements
Rank 1
answered on 01 Aug 2018, 12:39 PM

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

 

 

0
Eyup
Telerik team
answered on 06 Aug 2018, 11:40 AM
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.
Tags
Grid
Asked by
dipak
Top achievements
Rank 1
Answers by
dipak
Top achievements
Rank 1
Eyup
Telerik team
Share this question
or