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

RadSplitter height 100% is not working

7 Answers 174 Views

Splitter

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

Mareeswaran Arunachalam asked on 07 Sep 2010, 05:45 AM

telerik-splitter.JPG

Hi,



RadSplitter height 100% is not working.The requirement is there should not be Scroll bar.Insead scroll bar the splitter should increase the height based on content in the user control. Please see the below code and suggest me how to make the splitter to change its height based on its data in the user control.

 

Please look the attached jpg file.





<%@ Page Language=

"C#" %>

<%@ Register TagPrefix="telerik" Assembly="Telerik.Web.UI, Version=2009.3.1314.20, Culture=neutral, PublicKeyToken=121fae78165ba3d4"

Namespace="Telerik.Web.UI" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

<title>Testled Page</title>

<style type="text/css">

html, body, form

{

height: 100%;

margin: 0px;

padding: 0px;

}

</style>

</head>

<body>

<form id="form1" runat="server">

<asp:ScriptManager ID="ScriptManager1" runat="server">

</asp:ScriptManager>

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

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

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

<telerik:RadSplitter ID="Radsplitter2" runat="server" Orientation="Horizontal" VisibleDuringInit="false" ResizeWithParentPane="true">

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

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

<!--User control --> 

                                    <!-- for testing i have given these dummy data -->

<table border="1"><tr><td>Test</td></tr></table>

</telerik:RadPane>

</telerik:RadSplitter>

</telerik:RadPane>

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

<telerik:RadPane ID="EndPane" runat="server" Width="22px" Scrolling="None">

<telerik:RadSlidingZone ID="Radslidingzone1" runat="server" Width="35px" ClickToOpen="true" SlideDirection="Left">

<telerik:RadSlidingPane ID="Radslidingpane5" Title="Analysis Period" runat="server" Width="275px">

</telerik:RadSlidingPane>

<telerik:RadSlidingPane ID="Radslidingpane6" Title="Trend Builder" runat="server" Width="250px">

</telerik:RadSlidingPane>

<telerik:RadSlidingPane ID="Radslidingpane4" Title="Configuration Settings" runat="server" Width="250px">

</telerik:RadSlidingPane>

<telerik:RadSlidingPane ID="Radslidingpane7" Title="SmartSupport" runat="server" Width="275px">

</telerik:RadSlidingPane>

</telerik:RadSlidingZone>

</telerik:RadPane>

</telerik:RadSplitter>

</form>

</body>

</html> 







Please Suggest me how to solve this problem.





With regards,

Marees

Email:m.arunachalam@shell.com

7 Answers, 1 is accepted

answered on 09 Sep 2010, 01:58 PM

Hi Mareeswaran Arunachalam,

The splitter on the screenshot looks as expected - it is 100% of the main page, without generating a scrollbar for it. However, the scrollbar you have noted is actually generated by the RadSplitter control and not by the browser and in order to remove it you should not set the splitter to be 100% of the page but to resize it according its content instead.

For the time being, there is no simple way (e.g. set a property) to make the splitter resize with its content. The RadSplitter control offers a rich client-side API, however, that you can use to achieve the desired result.

I would recommend that you use the OnClientLoaded handler of the RadSplitter object to calculate the Height of the content of the RadPane and set that value as Height of the RadPane. Have a look at the following code fragment:

<script type="text/javascript">

function OnClientLoadedHandler(splitter, args)

{

var pane2 = splitter.getPaneById("<%= RadPane2.ClientID %>");

var parentContent = pane2.getContentElement();

var contentHeight = parentContent.scrollHeight;

// Horizontal orientation

pane2.set_height(contentHeight);

splitter.set_height(splitter.get_height() - pane2.get_height() + contentHeight);

// Vertical orientation

splitter.set_height(contentHeight);

pane2.set_height(contentHeight);

}

</script>

You can find additional information along with a sample demo in the following location:

http://www.telerik.com/support/kb/aspnet-ajax/splitter/initially-resize-the-radsplitter-according-to-its-content.aspx

Let us know if you need additional help with that.

Sincerely yours,
Svetlina
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items

answered on 23 Sep 2010, 09:10 AM

Hello Mareeswaran Arunachalam,

In order to get the desired result you should hook up the OnClientTabSelected client event (http://www.telerik.com/help/aspnet-ajax/tab_tabstrip_onclienttabselected.html) and call the same javascript function there. Note, that in this case you should pass a reference to the splitter client object at the place of the sender.

Sincerely yours,
Svetlina
the Telerik team

answered on 01 Oct 2010, 03:10 PM

Hi Mareeswaran Arunachalam,

If you want to use client code you should not have the server click handler. If you want to perform a postback, the OnClientLoaded will be executed when the page is loaded again. If you are using an ajax request you should also update the splitter with AJAX when the tab is clicked and this will result in executing the OnClientLoaded handler after the click.

Please, determine which of the 3 possible scenarios is yours and implement either the client or the server logic.

All the best,
Svetlina
the Telerik team

Product Bundles

DevCraft

Web

Mobile

Document Management

Desktop

Reporting & Mocking

Automated Testing

CMS

UI/UX Tools

Debugging

Free Tools

Support and Learning

Productivity and Design Tools

RadSplitter height 100% is not working

7 Answers, 1 is accepted