RadSplitter height 100% is not working

8 posts, 0 answers
  1. Mareeswaran Arunachalam
    Mareeswaran Arunachalam avatar
    7 posts
    Member since:
    Dec 2009

    Posted 07 Sep 2010 Link to this post

    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
  2. Svetlina Anati
    Admin
    Svetlina Anati avatar
    2795 posts

    Posted 09 Sep 2010 Link to this post

    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
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Mareeswaran Arunachalam
    Mareeswaran Arunachalam avatar
    7 posts
    Member since:
    Dec 2009

    Posted 20 Sep 2010 Link to this post

    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
  5. Svetlina Anati
    Admin
    Svetlina Anati avatar
    2795 posts

    Posted 23 Sep 2010 Link to this post

    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
  6. Mareeswaran Arunachalam
    Mareeswaran Arunachalam avatar
    7 posts
    Member since:
    Dec 2009

    Posted 29 Sep 2010 Link to this post

    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"  >

     


     

     

     

     

     

  7. Svetlina Anati
    Admin
    Svetlina Anati avatar
    2795 posts

    Posted 01 Oct 2010 Link to this post

    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
  8. Mareeswaran Arunachalam
    Mareeswaran Arunachalam avatar
    7 posts
    Member since:
    Dec 2009

    Posted 04 Oct 2010 Link to this post

    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
  9. Tsvetie
    Admin
    Tsvetie avatar
    1517 posts

    Posted 06 Oct 2010 Link to this post

    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
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017