Grid in RadPane only uses half the webpage

[Jonathan Hylton]

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

[Niko]

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