[Solved] Changing RadGrid Height Client-side

[Andrew]

I have a a RadTabStrip with two tabs (Documents and Search) in a RadDock control. Each tab has a RadGrid. The Documents tab's grid is just to display some documents with their index values. The Search tab's grid allows for document search. When you click the search button I switch to the Documents tab and do an ajax update to load the search results.

But when you switch to the Search tab I increase the containing RadDock's height client-side so you can see the whole search grid. When I switch back to the Documents tab the grid only fills about half the RadDock leaving an often unnecessary scrollbar because the grid height was initially sized server-side to fit the original RadDock height.

So, in a roundabout way we get to my question: how do I go about changing the height of a RadGrid client-side? I couldn't see any client-side functions in the documentation. Is there a way to do this?

Thanks.

[Dimo]

Hi Andrew,

http://www.telerik.com/community/code-library/aspnet-ajax/grid/how-to-set-radgrid-height-client-side-with-javascript.aspx

Greetings,
Dimo
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.

[tmlipinski]

Hi,

OK, it works - but any postback restores original heights - try to add to your example a simple:

 

<asp:Button runat="server" ID="btnTest" Text="Test" />

 

How to make them persistent?

Regards
Tomasz

[Veli]

Hi tmlipinski,

Your grid heights are not persisted on postbacks, simply because the grid height is adjusted in the client-side value change event of the slider only. You need to perform the same action on pageLoad:

function applyHeight(sender, args)
{
    setHeightTo(args.get_newValue());
}

function setHeightTo(value)
{
    var grid;

    // set height to the whole RadGrid control
    grid = $find("<%= RadGrid1.ClientID %>");
    grid.get_element().style.height = value + "px";
    grid.repaint();

    // set height to the scrollable area only
    grid = $find("<%= RadGrid2.ClientID %>");
    grid.GridDataDiv.style.height = value + "px";

    grid = $find("<%= RadGrid3.ClientID %>");
    grid.GridDataDiv.style.height = value + "px";

    grid = $find("<%= RadGrid4.ClientID %>");
    grid.get_element().style.height = value + "px";

    $get('heightStore').value = value;
}

function pageLoad(sender, args)
{
    var slider = $find('<%= RadSlider1.ClientID %>');
    setTimeout(function()
    {
        setHeightTo(slider.get_value());
    }, 1);
}

Replacing the page's javacript with the above sample code restores the grid heights to the slider value on page load.

Greetings,
Veli
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.

[tmlipinski]

Hi,
OK. This solution is good when the height of the grid is given as an absolute value somewhere on the form. In my case, I change the height of my grid according to the changes of the splitter's parts. Therefore I've used a cookie to store the resulting grid's height.
Thanks for the tips.
Regards
Tomasz.

[Veli]

Another option.

Good luck with your project.

Regards,
Veli
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.