Set height of splitter acording to its content

[jan]

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

[Tsvetie]

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.

[Kjartan]

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

[Tsvetie]

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.

[Caesar]

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

[Tsvetie]

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.

[Richard]

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.

[Tsvetie]

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.

[Richard]

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!
 

[Svetlina Anati]

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.

[Richard]

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

[Richard]

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!

[Svetlina Anati]

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.

[Hans van Rijnswoud]

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

[Svetlina Anati]

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.

[bradley baker]

Thanks for this post, it worked wonders for me!