[Solved] Resize RadGrid based on RadWindow

[Corey]

I have a page that opens multiple RadWIndows that contain different RadGrids. My RadGrid is created in codebehind and has static headers and scrolling turned on. Right now if I open the window the grid is not as tall as the window. I need to find a way to have the grid have it's height adjusted to the RadWindow height when opened and on re-sizing of the window. The issue I think keeping me from finding a solution has been that the grid is in a second page pulled into the RadWindow. It's all within the same website, so there should be no XSS issues, but I cannot seem to access the parent RadWindow's controls to get a height, nor can I access the grid from the page that opens the RadWindows.

I'd love to post code, but this site is large and complicated so it's not a single page to post. Hopefully someone can help point me in the right direction. 

[Antonio Stoilkov]

Hello Corey,

You could achieve your scenario by setting the RadGrid Width and Height properties to 100%. Another possible approach is to use the JavaScript below which sets the grid width and height on show and resize events of each of the RadWindow controls on the current page.

function pageLoad()
{
    var radControls = $telerik.radControls,
        radControl;
    for (var i = 0; i < radControls.length; i++)
    {
        radControl = radControls[i];
        if (Telerik.Web.UI.RadWindow.isInstanceOfType(radControl))
        {
            radControl.add_show(fitRadGridSizeToWindow);
            radControl.add_resize(fitRadGridSizeToWindow);
        }
    }
}

function fitRadGridSizeToWindow(sender, eventArgs)
{
    var contentElement = sender.get_contentElement(),
        gridElement = $telerik.getElementByClassName(contentElement, "RadGrid"),
        grid = $find(gridElement.id);

    contentElement.style.overflow = "hidden";
    gridElement.style.height = contentElement.offsetHeight + "px";

    gridElement.style.width = contentElement.offsetWidth + "px";
    if (grid)
    {
        grid.repaint();
    }
}

Greetings,
Antonio Stoilkov
the Telerik team

[Corey]

I tried setting the RadGrid height and width to 100% before and that did not get me anywhere.

I just tried using the javascript you provided and I keep getting the error "Uncaught TypeError: Object [object Object] has no method 'get_ContentElement'" from the first line of the fitRadGridSizeToWindow function. I checked in debugger and the sender is a RadWindow so I'm not sure what the issue is here exactly. Any suggestions?

[Antonio Stoilkov]

Hi Corey,

I have assembled a sample page showing the desired functionality working on my side. Note that the get_contentElement function is with lowercase "c". You could take a look at the project and observe if there are any other differences at your end.


Kind regards,
Antonio Stoilkov
the Telerik team