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

RadGrid 100% Height in RadPane

12 Answers 292 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Marco Beyer
Top achievements
Rank 1
Marco Beyer asked on 21 Feb 2012, 09:34 PM
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

12 Answers, 1 is accepted

Sort by
0
Shinu
Top achievements
Rank 2
answered on 22 Feb 2012, 07:14 AM
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.
0
Marco Beyer
Top achievements
Rank 1
answered on 22 Feb 2012, 08:50 AM
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

0
Tsvetina
Telerik team
answered on 24 Feb 2012, 11:20 AM
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
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
0
Marco Beyer
Top achievements
Rank 1
answered on 25 Feb 2012, 12:37 PM
Tsvetina,

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

Looking forward to hearing from you.

Best regards,
Marco
0
Tsvetina
Telerik team
answered on 27 Feb 2012, 04:23 PM
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
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
0
Max
Top achievements
Rank 1
answered on 11 May 2012, 08:13 AM
Share please, otherwise we'll have to do extra job again.
What's the solution.
0
Bob
Top achievements
Rank 1
answered on 27 Sep 2013, 02:53 PM
What's the solution?
0
Maria Ilieva
Telerik team
answered on 02 Oct 2013, 08:40 AM
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
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to the blog feed now.
0
moegal
Top achievements
Rank 1
answered on 17 Oct 2014, 09:14 PM
Do you have a sample of this?  I am have trouble getting RadGrid to re size to fit.  Especially with scrolling.

Marty
0
Maria Ilieva
Telerik team
answered on 22 Oct 2014, 08:47 AM
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
 

Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

 
0
moegal
Top achievements
Rank 1
answered on 22 Oct 2014, 01:22 PM
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
0
Maria Ilieva
Telerik team
answered on 27 Oct 2014, 09:24 AM
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
 

Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

 
Tags
Grid
Asked by
Marco Beyer
Top achievements
Rank 1
Answers by
Shinu
Top achievements
Rank 2
Marco Beyer
Top achievements
Rank 1
Tsvetina
Telerik team
Max
Top achievements
Rank 1
Bob
Top achievements
Rank 1
Maria Ilieva
Telerik team
moegal
Top achievements
Rank 1
Share this question
or