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

RadSplitter height 100% is not working

7 Answers 176 Views
Splitter
This is a migrated thread and some comments may be shown as answers.
Mareeswaran Arunachalam
Top achievements
Rank 1
Mareeswaran Arunachalam asked on 07 Sep 2010, 05:45 AM
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">
<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>
                         <table border="1"><tr><td>Test</td></tr></table>
                         <table border="1"><tr><td>Test</td></tr></table>
                         <table border="1"><tr><td>Test</td></tr></table>
                         <table border="1"><tr><td>Test</td></tr></table>
                         <table border="1"><tr><td>Test</td></tr></table>
                         <table border="1"><tr><td>Test</td></tr></table>
                         <table border="1"><tr><td>Test</td></tr></table>
                         <table border="1"><tr><td>Test</td></tr></table>
                         <table border="1"><tr><td>Test</td></tr></table>
                         <table border="1"><tr><td>Test</td></tr></table>
                         <table border="1"><tr><td>Test</td></tr></table>
                         <table border="1"><tr><td>Test</td></tr></table>
                         <table border="1"><tr><td>Test</td></tr></table>
                         <table border="1"><tr><td>Test</td></tr></table>
                         <table border="1"><tr><td>Test</td></tr></table>
                         <table border="1"><tr><td>Test</td></tr></table>
                         <table border="1"><tr><td>Test</td></tr></table>
                         <table border="1"><tr><td>Test</td></tr></table>
                         <table border="1"><tr><td>Test</td></tr></table>
                         <table border="1"><tr><td>Test</td></tr></table>
                         <table border="1"><tr><td>Test</td></tr></table>
                         <table border="1"><tr><td>Test</td></tr></table>
                         <table border="1"><tr><td>Test</td></tr></table>
                         <table border="1"><tr><td>Test</td></tr></table>
                         <table border="1"><tr><td>Test</td></tr></table>
                         <table border="1"><tr><td>Test</td></tr></table>
                         <table border="1"><tr><td>Test</td></tr></table>
                         <table border="1"><tr><td>Test</td></tr></table>
                         <table border="1"><tr><td>Test</td></tr></table>
                         <table border="1"><tr><td>Test</td></tr></table>
                         <table border="1"><tr><td>Test</td></tr></table>
                         <table border="1"><tr><td>Test</td></tr></table>
                         <table border="1"><tr><td>Test</td></tr></table>
                         <table border="1"><tr><td>Test</td></tr></table>
                         <table border="1"><tr><td>Test</td></tr></table>
                         <table border="1"><tr><td>Test</td></tr></table>
                         <table border="1"><tr><td>Test</td></tr></table>
                         <table border="1"><tr><td>Test</td></tr></table>
                         <table border="1"><tr><td>Test</td></tr></table>
                         <table border="1"><tr><td>Test</td></tr></table>
                         <table border="1"><tr><td>Test</td></tr></table>
                         <table border="1"><tr><td>Test</td></tr></table>
                         <table border="1"><tr><td>Test</td></tr></table>
                         <table border="1"><tr><td>Test</td></tr></table>
                         <table border="1"><tr><td>Test</td></tr></table>
                         <table border="1"><tr><td>Test</td></tr></table>
                         <table border="1"><tr><td>Test</td></tr></table>
                         <table border="1"><tr><td>Test</td></tr></table>
                         <table border="1"><tr><td>Test</td></tr></table>
                         <table border="1"><tr><td>Test</td></tr></table>
                         <table border="1"><tr><td>Test</td></tr></table>
                         <table border="1"><tr><td>Test</td></tr></table>
                         <table border="1"><tr><td>Test</td></tr></table>
                         <table border="1"><tr><td>Test</td></tr></table>
                         <table border="1"><tr><td>Test</td></tr></table>
                         <table border="1"><tr><td>Test</td></tr></table>
                         <table border="1"><tr><td>Test</td></tr></table>
                         <table border="1"><tr><td>Test</td></tr></table>
                         <table border="1"><tr><td>Test</td></tr></table>
                         <table border="1"><tr><td>Test</td></tr></table>
                         <table border="1"><tr><td>Test</td></tr></table>
                         <table border="1"><tr><td>Test</td></tr></table>
                         <table border="1"><tr><td>Test</td></tr></table>
                         <table border="1"><tr><td>Test</td></tr></table>
                         <table border="1"><tr><td>Test</td></tr></table>
                         <table border="1"><tr><td>Test</td></tr></table>
                         <table border="1"><tr><td>Test</td></tr></table>
                         <table border="1"><tr><td>Test</td></tr></table>
                         <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">
                        <!--User control -->
                    </telerik:RadSlidingPane>
                    <telerik:RadSlidingPane ID="Radslidingpane6" Title="Trend Builder" runat="server" Width="250px">
                          <!--User control -->
                    </telerik:RadSlidingPane>
                    <telerik:RadSlidingPane ID="Radslidingpane4" Title="Configuration Settings" runat="server" Width="250px">
                         <!--User control -->
                    </telerik:RadSlidingPane>
                    <telerik:RadSlidingPane ID="Radslidingpane7" Title="SmartSupport" runat="server" Width="275px">
                        <!--User control -->
                          
                    </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

Sort by
0
Svetlina Anati
Telerik team
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
0
Mareeswaran Arunachalam
Top achievements
Rank 1
answered on 20 Sep 2010, 07:10 PM
Hi Svetlina,
 
Thanks for your reply.Your attached code working only on page load.
I have 5 RadTabs. When the page gets loaded, the OnClientLoaded script is fired.
But when i clicked the other RadTabs on the same page "OnClientLoaded" is not fired.

Please suggest me how to proceed further.Waiting for you response.

-Marees
0
Svetlina Anati
Telerik team
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
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
0
Mareeswaran Arunachalam
Top achievements
Rank 1
answered on 29 Sep 2010, 01:27 PM
Hi,
Thanks for your reply.

Still it is not working .Because first "OnClientTabSelected" event is  
fired and then "OnTabClick" event is firing.So the height is not adjusted properly.See the below code.

 

 

 

 

<telerik:RadTabStrip ID="tabDashBoard" runat="server" Skin="Default" OnTabClick="radDashBoard_TabClick" OnClientTabSelected="OnClientTabSelected" MultiPageID="radMultiPageDashBoard" CssClass="tabStrip" SelectedIndex="0" EnableViewState="false"  >

 


 

 

 

 

 

0
Svetlina Anati
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
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
0
Mareeswaran Arunachalam
Top achievements
Rank 1
answered on 04 Oct 2010, 09:00 AM
Hi ,

We are using Ajax request.Can u tell me how to call the ClientLoaded method to update the splitter when tab is clicked.


Thanks
Marees
0
Tsvetie
Telerik team
answered on 06 Oct 2010, 12:21 PM
Hello Marees,
In case you have ajaxified the RadTabScript control, then you can use the ResponseScripts collection of RadAjaxManager to execute the JavaScript code after the tabStrip is updated. For information on the ResponseScripts collection, please refer to our online documentation.

Kind regards,
Tsvetie
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
Tags
Splitter
Asked by
Mareeswaran Arunachalam
Top achievements
Rank 1
Answers by
Svetlina Anati
Telerik team
Mareeswaran Arunachalam
Top achievements
Rank 1
Tsvetie
Telerik team
Share this question
or