RadSplitter with RadTabStrip, RadMultiPage and RadGrid

[Tom]

Hi,

We are trying to implement a RadSplitter control which has 4 panes.

To make things easy, the splitter is 100% width and height of the page and each SplitterPane is 25% width and height, each pane is named Pane1 to Pane4 clock wise.

In Pane4, we have a RadTabStrip, RadMultipage and RadGrid in Page1.

Initially, the RadGrid has scrollbars but the scrollbar bottom is not visible.

When we resize Pane4, we would like the grid to continue to fill the width and height of the Pane taking in to account the height of the tabstrip.

ASPX code below:

<

 

telerik:RadSplitter ID="RadSplitter1" runat="server" Width="100%" Height="100%" Orientation="vertical">

 

 

 

<telerik:RadPane ID="radPane1" runat="server" Scrolling="None">

 

 

 

<telerik:RadSplitter ID="treeSplitter" runat="server" Width="100%" Height="100%" Orientation="horizontal">

 

 

 

<telerik:RadPane ID="treePane" runat="server">

 

 

 

<div class="containerHeading">

 

 

 

<span>TreeView</span>

 

 

 

</div>

 

 

 

</telerik:RadPane>

 

 

 

<telerik:RadSplitBar ID="SplitterBar2" runat="server" />

 

 

 

<telerik:RadPane ID="controlsPane" runat="server">

 

 

 

<div class="containerHeading">

 

 

 

<span>Controls</span>

 

 

 

</div>

 

 

 

</telerik:RadPane>

 

 

 

</telerik:RadSplitter>

 

 

 

</telerik:RadPane>

 

 

 

<telerik:RadSplitBar ID="radSplitterBar1" runat="server" />

 

 

 

<telerik:RadPane ID="radPane2" runat="server" Scrolling="None">

 

 

 

<telerik:RadSplitter ID="RadSplitter2" runat="server" Width="100%" Height="100%" Orientation="horizontal" ResizeMode="proportional">

 

 

 

<telerik:RadPane ID="RadPane3" runat="server" Scrolling="None">

 

 

 

<div class="containerHeading">

 

 

 

<span>Map</span>

 

 

 

</div>

 

 

 

</telerik:RadPane>

 

 

 

<telerik:RadSplitBar ID="RadSplitBar1" runat="server" />

 

 

 

<telerik:RadPane ID="RadPane4" runat="server" Scrolling="None">

 

 

 

<div class="containerHeading">

 

 

 

<span>Tools</span>

 

 

 

</div>

 

 

 

<telerik:RadTabStrip ID="tabStrip1" runat="server" Style="width: 100%;" MultiPageID="RadMultiPage1" SelectedIndex="0">

 

 

 

<Tabs>

 

 

 

<telerik:RadTab runat="server" Text="Noticeboard" Selected="True"></telerik:RadTab>

 

 

 

<telerik:RadTab runat="server" Text="History"></telerik:RadTab>

 

 

 

<telerik:RadTab runat="server" Text="Properties"></telerik:RadTab>

 

 

 

<telerik:RadTab runat="server" Text="Legend"></telerik:RadTab>

 

 

 

<telerik:RadTab runat="server" Text="Find"></telerik:RadTab>

 

 

 

<telerik:RadTab runat="server" Text="Alerts"></telerik:RadTab>

 

 

 

</Tabs>

 

 

 

</telerik:RadTabStrip>

 

 

 

<telerik:RadMultiPage ID="RadMultiPage1" Height="100%" runat="server" SelectedIndex="0">

 

 

 

<telerik:RadPageView ID="RadPageView1" Height="100%" runat="server" Selected="True">

 

 

 

<asp:Timer ID="timerNoticeboard" runat="server" Enabled="false"></asp:Timer>

 

 

 

<telerik:RadAjaxManager ID="AjaxManager1" runat="server">

 

 

 

<AjaxSettings>

 

 

 

<telerik:AjaxSetting AjaxControlID="timerNoticeboard">

 

 

 

<UpdatedControls>

 

 

 

<telerik:AjaxUpdatedControl ControlID="RadGrid1" />

 

 

 

</UpdatedControls>

 

 

 

</telerik:AjaxSetting>

 

 

 

</AjaxSettings>

 

 

 

</telerik:RadAjaxManager>

 

 

 

<telerik:RadGrid ID="RadGrid1" runat="server" Width="100%" Height="100%" AllowSorting="True" GridLines="None" ShowStatusBar="True" AutoGenerateColumns="False">

 

 

 

<MasterTableView>

 

 

 

<RowIndicatorColumn>

 

 

 

<HeaderStyle Width="20px" />

 

 

 

</RowIndicatorColumn>

 

 

 

<ExpandCollapseColumn>

 

 

 

<HeaderStyle Width="20px" />

 

 

 

</ExpandCollapseColumn>

 

 

 

<Columns>

 

 

 

<telerik:GridBoundColumn DataField="Title" EmptyDataText="&amp;nbsp;" HeaderText="Title" UniqueName="Title"></telerik:GridBoundColumn>

 

 

 

<telerik:GridBoundColumn DataField="Description" EmptyDataText="&amp;nbsp;" HeaderText="Description" UniqueName="Description"></telerik:GridBoundColumn>
</Columns>

 

 

 

</MasterTableView>

 

 

 

<ClientSettings>

 

 

 

<Scrolling AllowScroll="True" UseStaticHeaders="True" />

 

 

 

</ClientSettings>

 

 

 

<FilterMenu EnableTheming="True">

 

 

 

<CollapseAnimation Duration="200" Type="OutQuint" />

 

 

 

</FilterMenu>

 

 

 

</telerik:RadGrid>

 

</telerik:RadPageView>

<telerik:RadPageView ID="RadPageView2" runat="server">History</telerik:RadPageView>

<telerik:RadPageView ID="RadPageView3" runat="server">Properties</telerik:RadPageView>

<telerik:RadPageView ID="RadPageView4" runat="server">Legend</telerik:RadPageView>

<telerik:RadPageView ID="RadPageView5" runat="server">Find</telerik:RadPageView>

<telerik:RadPageView ID="RadPageView6" runat="server">Alerts</telerik:RadPageView></telerik:RadMultiPage>
</telerik:RadPane>
</telerik:RadSplitter>

Many thanks,

Tom

[Svetlina Anati]

Hello Tom,

I examined your code and I was able to observe the described problem after I made some modifications as binding the grid to a data source with a lot of records in order to get a scrollbar generated from the grid itself. The problem comes from the fact that you have set the grid's parent PageView's Height to 100% and it occupies 100% of the parent RadPane. However, you also have a DIV element along with a TabStrip in the same RadPane and therefore the resultant content of the pane exceeds its height. You have also set the pane's Scrolling property to None and therefore some of the content is cut off.

In order to fix the problem you should set a proper height to the PageView in order to occupy 100% of the pane but when the additional elements height is added to its height, e.g. set the Height to 87% instead of 100%. However this is the easiest but not best approach - the best one will be to write a script which calculates the needed height. I wrote a sample script for you - please see the attached project. The script can be further improved, it is up to you and your particular needs.

I also recommend to set all the splitters' VisibleDuringInit property to false - this will hide the unpleasant visual effect which is observed while the splitters are initializing from the user.

Greetings,
Svetlina
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.