Set height of splitter acording to its content

16 posts, 0 answers
  1. jan
    jan avatar
    18 posts
    Member since:
    Aug 2008

    Posted 08 Aug 2008 Link to this post

    Hello,

    Is there a simple way how to set a height of a splitter according to its content (to behave like deafault behaving of  simple html table - e.g. to have a splitter with two panels containings radgrids so that splitter height is same as height of bigger grid - and so there will be no slider inside the splitter).

    Thank you
    Jan Krivanek
  2. Tsvetie
    Admin
    Tsvetie avatar
    1517 posts

    Posted 11 Aug 2008 Link to this post

    Hello jan,
    For the time being, there is no simple way (e.g. set a property) to achieve the desired functionality. The RadSplitter control offers a rich clientside 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> 

    Let us know if you need additional help with that.

    All the best,
    Tsvetie
    the Telerik team

    Check out Telerik Trainer, the state of the art learning tool for Telerik products.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Kjartan
    Kjartan avatar
    3 posts
    Member since:
    Feb 2008

    Posted 28 Aug 2008 Link to this post

    Hi,

    I just came across this thread because we are having the same problems. We are in the works of porting a huge CRM application to .NET, and we use this approach all the time in our current implementation. When you say 'for the time being', does this mean that this is a planned feature? If that is the case, the splitter with that functionality builtin would be exactly what we need.

    Thank you

    Best regards,

    Kjartan
  5. Tsvetie
    Admin
    Tsvetie avatar
    1517 posts

    Posted 28 Aug 2008 Link to this post

    Hi Kjartan,
    As there has been a number of customers that ask for such feature, I have added it to our list of features for consideration. However, I cannot tell you when it will be available. I can only tell you, that the tasks for the current Q have already been set and this feature will not be implemented for this Q.

    Regards,
    Tsvetie
    the Telerik team

    Check out Telerik Trainer, the state of the art learning tool for Telerik products.
  6. Caesar
    Caesar avatar
    59 posts
    Member since:
    Aug 2008

    Posted 13 Nov 2008 Link to this post

    Hi,

    We really would like this functionality as well.
    Quite odd that it isn't part of the functionality allready, I mean flowing content is the fundamentals of web design, isn't it?

    Regards
  7. Tsvetie
    Admin
    Tsvetie avatar
    1517 posts

    Posted 13 Nov 2008 Link to this post

    Hi Rikard Gårdshage,
    Thank you for your feedback, I forwarded it to our developers.

    Greetings,
    Tsvetie
    the Telerik team

    Check out Telerik Trainer, the state of the art learning tool for Telerik products.
  8. Richard
    Richard avatar
    11 posts
    Member since:
    Jun 2008

    Posted 03 Dec 2008 Link to this post

    I have the same prob but it is working in IE after I put above codes. However, when testing under firefox -  it overlaps content from below (outside of splitter pane). Any idea on how to resolve this?

    I am using Dotnetnuke and telerik version is v2.0.50727.


  9. Tsvetie
    Admin
    Tsvetie avatar
    1517 posts

    Posted 05 Dec 2008 Link to this post

    Hi Richard,
    You can find summarized information on this topic here. In case the problem persists, please open a new support ticket and send us your code, so that we can check on our side what might be causing the problem.

    Greetings,
    Tsvetie
    the Telerik team

    Check out Telerik Trainer, the state of the art learning tool for Telerik products.
  10. Richard
    Richard avatar
    11 posts
    Member since:
    Jun 2008

    Posted 15 Dec 2008 Link to this post

    Thansk for the tip but it still doesnt work. For now, I'll wont have footer section. 

    I have another issue when setting height with inner controls.

    Here is the structure
    I am using ControlParent.ascx and this control loads dynamic controls (child).

    Inside one of the dynamic controls is a TAB control and i have implemented on demand loading so it gets the content upon "tabclick" event. I followd the tutorial video & have successful implemented.

    When putting these two together - let say I have 3 tabs.
    First tab height is 600px
    Second tab height is 100px

    Since OnClientLoadedHandler javascript is called only on "OnClientLoaded" event - it gets call after postback when control is loaded.

     

    Here is the problem - tab on demand will not trigger post back once it's loaded & height is not going to adjust either. So when going back to "First tab" from 2nd tab - the content gets cutoff (scrollbar = "NONE"). Is there any way to adjust the height ? Any suggestions?

    Thanks!
     

  11. Svetlina Anati
    Admin
    Svetlina Anati avatar
    2795 posts

    Posted 18 Dec 2008 Link to this post

    Hi Richard,

    I suggest to execute the discussed function not only in the OnClientLoaded event of the splitter but also in the  OnClientTabSelected event of the RadTabStrip. This should call the code after you switch to another tab. You can find more information about this event here.

    Regards,
    Svetlina
    the Telerik team

    Check out Telerik Trainer, the state of the art learning tool for Telerik products.
  12. Richard
    Richard avatar
    11 posts
    Member since:
    Jun 2008

    Posted 13 Jan 2009 Link to this post

    Thanks for the reply! Your solution will work but is there a better doing this?

    I am not talking about tab related control and i do have OnClientLoaded="OnClientLoadedHandler"

    Regardless of what control that i have - if the control generate the 'content' based on some actions. The height will get screw up again.

    For example, 
        After loading the search page, I click on search button and display 20 records. Original height is let say 400px and due to this search action, it needs 700px but is not re-adjusting.

    To resolve this, do I have to mimic OnClientLoadedHandler every postback or controls to handle it. This is becoming a nightmare.....using splitter control.

    I wish the height property would work without doing all these tricks...

  13. Richard
    Richard avatar
    11 posts
    Member since:
    Jun 2008

    Posted 14 Jan 2009 Link to this post

    Due to time constraint - I have removed splitter control from my project. I am looking forward for the fix coming up? Do you guys have release date on this? Thanks!

  14. Svetlina Anati
    Admin
    Svetlina Anati avatar
    2795 posts

    Posted 16 Jan 2009 Link to this post

    Hi Richard,

    The RadSplitter does not offer the functionality to automatically resize itself according to its content out of the box and that is why this is not a bug which should be fixed. We assisted you to implement the desired functionality by using the splitter's client-side API. Actually what you should do is that you should execute the handler when 1) the splitter is loaded (no matter it is in a multipage,. etc.) and 2) the parent element of the splitter is resized. You do not need to take special care about the postbacks - after a postback is performed, the handler which is executed when the splitter is loaded gets automatically executed and it will adjust the splitter.

    The feature of autosizing the splitter might be added to the control but I cannot provide a time estimate for this. If you decide to use the API for achieving the desired behavior and you need assistance, do not hesitate to contact us.

    Sincerely yours,
    Svetlina
    the Telerik team

    Check out Telerik Trainer, the state of the art learning tool for Telerik products.
  15. Hans van Rijnswoud
    Hans van Rijnswoud avatar
    72 posts
    Member since:
    Sep 2008

    Posted 04 Nov 2009 Link to this post

    Since this is an old post, is there any easy solution for this problem now, in the newer versions besides client scripting? We are using 2009.2.82620 version and I assume the original post was based on earlier versions.

    What I want is to make the splitter auto adjust in height depending on the content of the RadPane inside the splitter.

    Let me know, thanks


  16. Svetlina Anati
    Admin
    Svetlina Anati avatar
    2795 posts

    Posted 04 Nov 2009 Link to this post

    Hi Edwin,

    In short - no, the RadSplitter does not have such built-in functionality. The main problem is that a lot of the features of the splitter and panes require that the RadPanes have size in pixels. For example, features that require this are MinWidth, MaxWidth, MinHeight, MaxHeight, Scrolling, etc. In case you simply need to display two cells in a row and do not intend to use any of the functionality that the RadSplitter offers, you can simply replace the splitter with a TABLE element. That way, you will reduce the client objects that are creates on your page with three (one for the RadSplitter and two for the two RadPanes).

    However, in case you prefer to use the RadSplitter control even in case you do not intend to use the functionality it offers, you can use the following approach:

    <head runat="server">  
        <title></title>  
        <style type="text/css">  
            .AutoHeight  
            {  
                height: auto !important;  
            }  
        </style>  
    </head>  
    <body>  
        <form id="form1" runat="server">  
        <asp:ScriptManager ID="ScriptManager1" runat="server">  
        </asp:ScriptManager>  
        <telerik:RadSplitter ID="RadSplitter1" runat="server" CssClass="AutoHeight">  
            <telerik:RadPane ID="RadPane1" runat="server" CssClass="AutoHeight" BackColor="Aqua"  
                Scrolling="None">  
                TreeView pane  
            </telerik:RadPane>  
            <telerik:RadSplitBar ID="RadSplitBar1" runat="server" />  
            <telerik:RadPane ID="RadPane2" runat="server" CssClass="AutoHeight" BackColor="Red"  
                Scrolling="None">  
                Grid pane  
            </telerik:RadPane>  
        </telerik:RadSplitter>  
        </form>  
    </body>

    The other option is to use script as explained earlier in this thread. 


    Regards,
    Svetlina
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Watch a video on how to optimize your support resource searches and check out more tips on the blogs.
  17. bradley baker
    bradley baker avatar
    97 posts
    Member since:
    Aug 2009

    Posted 12 Nov 2009 Link to this post

    Thanks for this post, it worked wonders for me!
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017