Grid in RadPane only uses half the webpage

2 posts, 0 answers
  1. Jonathan Hylton
    Jonathan Hylton avatar
    20 posts
    Member since:
    Sep 2009

    Posted 25 Mar 2011 Link to this post

    Hi there,

    I am starting to use the RadRibbon control and have set this to the top of my masterpage. I want this control to always stay at the top and possibly use some sliding panes. I have the following code:

    <table align="center" cellspacing="0" class="style1">
        <tr>
            <td class="style2">
                <telerik:RadRibbonBar ID="MainRibbon" runat="server" Tabs-Capacity="4" Skin="Default" />
            </td>
        </tr>
    </table>
    <table style="height: 100%; width: 100%;">
        <tr>
            <td style="background-color: Blue;">
            <telerik:RadSplitter id="Splitter1" runat="server" Width="100%" Height="100%">
                <telerik:RadPane id="MainPane" runat="server" Width="100%" Height="100%">
                    <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server"/>
                </telerik:RadPane>
            </telerik:RadSplitter>
            </td>
        </tr>
    </table

    The problem is the pane only seems to use half of the webpage that remains. I plan to impliment a tree view on certain pages So I was thinking that this would be the best way to go about it. Please let me know if I should look at using another control.

    thanks!

    Jonathan
  2. Niko
    Admin
    Niko avatar
    387 posts

    Posted 29 Mar 2011 Link to this post

    Hello Jonathan,

    There are a few tweaks that you can do to this setup. Here is a short list of suggestions that you can try in order to have the splitter and the data grid as high as possible:
    1. The table elements appear irrelevant. You can try and remove them as they do not appear to add any additional support to the HTML structure, but rather interfere with the calculations of the splitter control.
    2. For making the splitter as high as possible I suppose you are familiar with this approach - http://www.telerik.com/support/kb/aspnet-ajax/splitter/radsplitter-which-is-100-of-the-page-and-has-margin-applied.aspx. The most important part is the style definitions for the html, body, form elements.
    3. Note the HeightOffset property of the RadSplitter. Its purpose is to utilize the extra space at the top of the page for the RadRibbon. You can experiment with the value until you find it perfect.
    4. This is an extra point referring to the option of making RadGrid occupy 100% Width/Height of a RadSplitter pane and have it resize with the splitter resize event - http://www.telerik.com/support/kb/aspnet-ajax/grid/making-radgrid-occupy-100-width-height-of-a-radsplitter-pane-and-resizing-on-pane-resize.aspx.

    Please, find attached a modified sample version of the setup you provided with an implementation of the first three points from above.

    Hope this helps.

    Best wishes,
    Niko
    the Telerik team
  3. UI for ASP.NET Ajax is Ready for VS 2017
Back to Top