Grid Automatic Resize

[Kyle]

First of all, we have a page with a lot of dynamic content in which we would like to automatically size to the size of the window.  Using nested radSplitter elements we can size several things dynamically.  However, initial load of this setup is very slow.  For performance reasons we have decided to construct a custom made dynamic panel with just the limited functionality we are looking for.  Inside one of our nested dynamic panels is a RadGrid which is set to height and width of 100%.  When the screen dynamically sizes, the div tag containing the grid resizes and you can see the grid border (black line) jump to the bottom of its container.  This is correct.  However, the grid does not  resize at this time (the header and grid content are still the same size).  It is not until the next rezie that the grid grows or shrinks.  It seems that there is some auto resize javascript running on the grid which is not firing at the correct time.  Is there a way to force a resize of the grid via javascript or is there another way around this problem?

[Dimo]

Hello Kyle,

Yes, you can resize RadGrid manually via Javascript like this:


var grid = $find("<%= RadGrid1.ClientID %>");
grid.repaint();


You may need to enclose the <script> tag in a telerik:RadCodeBlock, because of the code block, which yields the client ID.


Sincerely yours,
Dimo
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.

[Kyle]

Dimo,

Your solution worked great.  Thanks.  However, I need to repaint the grid on page initialization in javascript.  $Find('GridID') returns null on initialization but returns correctly in all the resize events after the page is loaded.  Is there any way to get a grid reference on initialization?  I am trying to run a page.clientscript.registerstartupscript.  I think the problem is that the grid's initialization javascript runs after my initialization.  Is there any way to force the grid to initialize first? 

Thanks,
Kyle

[Dimo]

Hello Kyle,

Try to reference the RadGrid client-side object in a function, which is attached to the page load event like this:


<script type="text/javascript">

Sys.Application.add_load(myFunction);

function myFunction()
{
      var grid = $find(".......");
      grid.repaint();
}

</script>


Sys.Application.add_load() is a method from the ASP.NET AJAX framework.


Kind regards,
Dimo
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.

[Kyle]

Dimo,

Thanks for the suggestion.  That also worked for our situation.  However, one more problem has cropped up.  Since the grid is in a radSplitter.  It is repainted before the radsplitter panes have been resized to fill the content area on page load.  Therefore, I get a really tiny looking grid after the page loads.  Is there a way to force the splitter to size before making adjustments to the grid? 

Thanks,
Kyle

[Dimo]

Hello Kyle,

In this case, you'd better repaint the grid in the splitter's OnClientLoaded event handler.

Greetings,
Dimo
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.

[Kyle]

I was just about to give that a try.  Thanks a lot for the help.

Kyle

[Grendizer]

Hello Dimo,

I have the almost the same needs than Kyle here. I have a lot of dynamic content and container size are evaluated with client script.

The issue, is the same as the previous one, the Grid layout seems to be evaluated before our own script ... Our grids are not located in any radSplitter but directly in a custom control [simple span or div ].

I clearly understood the method you propose of adding handlers to pageLoad, but I'm wondering if there is any better way than drawing the grid content twice ... once before our scripting and once afterwards ... instead using a way of ensuring the proper display of the grid in one shoot.

Thanks in advance for your answer.

[Dimo]

Hello Grendizer,

In order to prevent RadGrid from adjusting its layout automatically on initial page load (when scrolling is enabled), you will to modify its scripts. Forcing the control to repaint for the second time is a lot easier solution.

Kind regards,
Dimo
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.

[Grendizer]

Hello Dimo,

thanks for your quick answer.

I'll go that way :)