RadGrid 100% Height in RadPane

[Marco Beyer]

Dear Telerik-Staff,

I want to make my RadGrid occupy 100% of a RadPane's height, the grid is in.

I have taken the WebMail-Demo: The relevant part looks like this:

<telerik:RadPane runat="server" ID="contentPane" Scrolling="none">
                <telerik:RadSplitter runat="server" ID="RadSplitter2" BorderStyle="None" PanesBorderSize="0">
                    <telerik:RadPane runat="Server" ID="leftPane" Width="240px" MinWidth="240" MaxWidth="240" Scrolling="None">
                        <telerik:RadSplitter runat="server" ID="RadSplitter3" BorderStyle="None" PanesBorderSize="0" Height="100%" Orientation="Horizontal">
                            <telerik:RadPane runat="server" ID="topLeftPane">
                                <div class="contentBorders">
                                    <asp:ContentPlaceHolder ID="ContentPlaceHolderNavigationModules" runat="server" />
                                </div>
                            </telerik:RadPane>
                            <telerik:RadSplitBar runat="server" ID="RadSplitBar3" CollapseMode="Backward" EnableResize="false"  />
                            <telerik:RadPane runat="server" ID="bottomLeftPane" Height="68px">
                                <telerik:RadPanelBar runat="server" ID="panelBarBottomLeft" Width="100%">
                                    <Items>
                                        ---The Items
                                    </Items>
                                </telerik:RadPanelBar>
                            </telerik:RadPane>
                        </telerik:RadSplitter>
                    </telerik:RadPane>
                    <telerik:RadSplitBar runat="server" ID="RadSplitBar1" CollapseMode="Forward" />
                    <telerik:RadPane runat="Server" ID="rightPane" CssClass="right-pane" Scrolling="Both" OnClientResized="ClientResized" Height="100%">
                        <asp:ContentPlaceHolder ID="MainContent" runat="server" />
                    </telerik:RadPane>
                </telerik:RadSplitter>
            </telerik:RadPane>
        </telerik:RadSplitter>

The AJAX-Code for the OnClientResized-Event looks like this:

<telerik:RadCodeBlock ID="codeBlock" runat="server">
<script type="text/javascript">
function ClientResized(sender, eventArgs) {
$find("<%= AjaxManagerMasterPage.ClientID %>").ajaxRequest('ChangePageSize');
}
</script>
</telerik:RadCodeBlock>

I have a site containing my RadGrid (it is not nested into any other controls except the contentplaceholder) and on this site I add the following in the PageLoad-Event:

AjaxManager = (RadAjaxManager)this.Master.Master.FindControl("AjaxManagerMasterPage");
AjaxManager.AjaxRequest += new RadAjaxControl.AjaxRequestDelegate(AjaxManager_AjaxRequest);
AjaxManager.AjaxSettings.AddAjaxSetting(AjaxManager, MyRadGrid, RadAjaxLoadingPanel1);

And finally the AjaxRequest-Event looks like this:

void AjaxManager_AjaxRequest(object sender, AjaxRequestEventArgs e)
        {
            switch (e.Argument.ToString())
            {
                case "ChangePageSize":
                    //Make the grid fit the full pane size
                    Unit masterPaneWidth = ((RadPane)this.Master.Master.FindControl("rightPane")).Width;
                    Unit masterPaneHeight = ((RadPane)this.Master.Master.FindControl("rightPane")).Height;

                    MyRadGrid.Width = new Unit(masterPaneWidth.Value - 2);
                    MyRadGrid.Height = new Unit(masterPaneHeight.Value - 2);

                    break;
            }
        }

Now to my problem:

When I access the page the RadGrid doesn't occupy the total height of the rightPane. When clicking on the splitbar, the grid is resized properly in its height and width. So this perfectly works.

But I can't get it to run on the initial page load. When I call the RaisePostbackEvent of the AjaxManager the page crashes saying that a negative value for the width and height of the pane is not allowed (caused in the AjaxRequest-Event when subtracting 2 from the rightPane's width).

Then I did the following: Set the leftPane to Collapsed (Collapsed="true"). When accessing the page with this setting, the leftPane is collapsed and the Resized-Event is raised on initial page load. This works as expected but not if I have the leftPane set to Collapsed="false" on the initial PageLoad.

I hope that you can help me. I've spent the entire day trying to fix this. Do you have any idea for me??

Best regards,
Marco

[Shinu]

Hello,

Check the following kb article which explains more about this.
Making RadGrid occupy 100% Width/Height of a RadSplitter pane and resizing on pane resize

-Shinu.

[Marco Beyer]

Dear all,

I know the kb article you listed in your post but this doesn't solve my problem. And my approach is the same.

It works when resizing the browser window. But not initially when loading the website. I always have to resize in order to make the grid fit the full available space.

Could you take the WebMail demo, leave the leftPane as already in the demo and make the rightPane only one full pane without splitters inside (as originally in the demo). Then it should look like:

<telerik:RadSplitter runat="Server" ID="RadSplitter1" Width="100%" BorderSize="0" BorderStyle="None" PanesBorderSize="0" Height="100%" Orientation="Horizontal" VisibleDuringInit="false">
            <telerik:RadPane ID="topPane" runat="server" Height="74px">
                -- Menu goes here
            </telerik:RadPane>
            <telerik:RadPane runat="server" ID="contentPane" Scrolling="none">
                <telerik:RadSplitter runat="server" ID="RadSplitter2" BorderStyle="None" PanesBorderSize="0">
                    <telerik:RadPane runat="Server" ID="leftPane" Width="240px" MinWidth="240" MaxWidth="240" Scrolling="None">
                        <telerik:RadSplitter runat="server" ID="RadSplitter3" BorderStyle="None" PanesBorderSize="0" Height="100%" Orientation="Horizontal">
                            <telerik:RadPane runat="server" ID="topLeftPane">
                                --- top part of the leftPane
                            </telerik:RadPane>
                            <telerik:RadSplitBar runat="server" ID="RadSplitBar3" CollapseMode="Backward" EnableResize="true"  />
                            <telerik:RadPane runat="server" ID="bottomLeftPane" Height="68px">
                                ---bottom part of the leftPane
                            </telerik:RadPane>
                        </telerik:RadSplitter>
                    </telerik:RadPane>
                    <telerik:RadSplitBar runat="server" ID="RadSplitBar1" CollapseMode="Forward" />
                    <telerik:RadPane runat="Server" ID="rightPane" Scrolling="None" OnClientResized="ClientResized">
                        <asp:ContentPlaceHolder ID="MainContent" runat="server" />
                    </telerik:RadPane>
                </telerik:RadSplitter>
            </telerik:RadPane>
        </telerik:RadSplitter>

In the rightPane (better said in the MainContent-ContentPlaceHolder) my RadGrid is nested.

The ClientResized-Event exactly looks like in the kb article:

<telerik:RadCodeBlock ID="codeBlock" runat="server">
<script type="text/javascript">
function ClientResized(sender, eventArgs) {
$find("<%= AjaxManagerMasterPage.ClientID %>").ajaxRequest('ChangePageSize');
}
</script>
</telerik:RadCodeBlock>

And the code behind looks as in my first post. Again, it works properly when resizing but NOT on initial page load. Only when I set the leftPane to collapsed = true, it resizes the grid to occupy the full high on initial page load.

Any ideas? It would help me a lot if you had a sample which fits to my particular scenario.

Best regards,
Marco

[Tsvetina]

Hi Marco,

I would advise you to put up the scenario that you describe in a runnable project and send it to us through a formal support ticket. We will run it locally, modify it to fit your requirements and send it back to you.

Regards,
Tsvetina
the Telerik team

[Marco Beyer]

Tsvetina,

thanks for your offer. I made a demo and opened a formal support ticket.

Looking forward to hearing from you.

Best regards,
Marco

[Tsvetina]

Hi Marco,

I just replied to your support ticket. Please check it out and post back there. I am now closing this thread, if you would like, when the case is finished, we could post the answer here for the community to see.

Kind regards,
Tsvetina
the Telerik team

[Max]

Share please, otherwise we'll have to do extra job again.
What's the solution.

[Bob]

What's the solution?

[Maria Ilieva]

Hello,

Here is the approach provided to Marco's support ticket:

1) Set Height="100%" for the grid.
2) Set height:100% for the loading panel that wraps the grid, this can be done in client script (in some scenarios you might need a call to sender.repaint() after changing the size):

<script type="text/javascript">
    function GridCreated(sender, args) {
        sender.get_element().parentNode.style.height = "100%";
    }
</script>

3) Remove the grid outer border, so that you do not get scrollbars with the 100% height.

div.RadGrid
{
    border: 0 none;
}

This way the grid will automatically resize on window and splitter resize, so you will not need AJAX requests which makes it perform better (an ajax request runs the whole page lifecycle on the server).

I hope this helps.

Regards,
Maria Ilieva
Telerik

[moegal]

Do you have a sample of this?  I am have trouble getting RadGrid to re size to fit.  Especially with scrolling.

Marty

[Maria Ilieva]

Hi Marty,

Could you pleas elaborate on the exact scenario you are implementing and the specific case in which the RadGrid control, does not resize properly?
Thus we will be able to provide the best solution for your specific scenario.

Meanwhile you could test the correctly working "resize to fit" functionality in the online demo below:

http://demos.telerik.com/aspnet-ajax/grid/examples/columns-rows/columns/column-row-resize-reorder/defaultcs.aspx

Regards,
Maria Ilieva
Telerik

 

 

[moegal]

Maria,

Thanks.  I am putting together an example.  Essentially I am using dynamic ajaxed tabs to create a viewpoert that does nto refresh the entire page when I open tabs.  Each tab can have a grid, or for or other inside it.

That di should be 100% height of the available tab area.

Marty

[Maria Ilieva]

Hello Marty,

In case you have assembled a runnable version of your application it will be best to open a regular support ticket and send it to us, so that we can run it directly and inspect the issue locally.
Meanwhile you can also test the suggestion that this thread initially discussed for such case and namely to use RadSplitter with two RadPanes - the top panel will contain the RadTabStrip, while the bottom one - the RadGrid. In this case you can set the RadGrid's 100% height.


Regards,
Maria Ilieva
Telerik