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

Resizing RadPane based on DockZone height.

8 Answers 246 Views

Dock

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

8 Answers, 1 is accepted

answered on 19 Jan 2011, 07:05 PM

Hi Telerik,

Thank you for your response. I tried this, but it did not yield the results I was hoping for.

Sample Code:

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="TelerikDemo.WebForm1" %>

<%@ Register assembly="Telerik.Web.UI" namespace="Telerik.Web.UI" tagprefix="telerik" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

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

<head runat="server">

<title></title>

</head>

<body>

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

<div>

<telerik:RadScriptManager ID="RadScriptManager1" Runat="server">

</telerik:RadScriptManager>

</div>

<telerik:RadSplitter ID="RadSplitter1" Runat="server" Height="100%"

Width="100%">

<telerik:RadPane ID="RadPane1" Runat="server" MinHeight="500" Scrolling="None">

<telerik:RadDockZone ID="RadDockZone1" Runat="server" MinHeight="100%"

Width="100%">

<telerik:RadDock ID="RadDock1" Runat="server" Height="700px" Width="300px">

</telerik:RadDock>

</telerik:RadDockZone>

</telerik:RadPane>

</telerik:RadSplitter>

</form>

</body>

</html>

So, here is what we have going on:

I have RadDock1 housed inside of RadDockZone1. RadDockZone1's minHeight is 100% and height is unset. RadDockZone1 is housed inside of RadPane1 which has a minHeight of 500. I notice this is unitless, but I can only assume its pixels. RadDock1's height is larger than RadPane1's minHeight and RadPane1's height is not restricted by RadSplitter1 as its height is 100%. I would expect RadDockZone1 to stretch to hold RadDock1 and thus stretch RadPane past its minHeight. Yet, I don't see this. The RadDock just gets cut off at 500.

EDIT: I found a partial solution here: http://www.telerik.com/community/forums/aspnet-ajax/splitter/how-is-height-of-radpane-auto-resized.aspx

This solution offers the ability to override Rad properties with CSS properties. This is only a partial solution for my issue, however. Here is what I'm experiencing with updated demo code and a picture. I would like the sliding zone on the side to be the same height as the rest of things so it looks normal.

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="TelerikDemo.WebForm1" %>

<%@ Register assembly="Telerik.Web.UI" namespace="Telerik.Web.UI" tagprefix="telerik" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

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

<head runat="server">

<title></title>

<style type="text/css">

.AutoHeight

{

height: auto !important;

}

</style>

</head>

<body>

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

<div>

<telerik:RadScriptManager ID="RadScriptManager1" Runat="server">

</telerik:RadScriptManager>

</div>

<telerik:RadSplitter ID="RadSplitter1" Runat="server" CssClass="AutoHeight"

Width="100%">

<telerik:RadPane ID="RadPane1" Runat="server" CssClass="AutoHeight"

MinWidth="22" Width="22px">

<telerik:RadSlidingZone ID="RadSlidingZone1" Runat="server" ClickToOpen="True">

<telerik:RadSlidingPane ID="RadSlidingPane1" Runat="server" MinWidth="150"

Title="Demo Item 1">

<telerik:RadListBox ID="RadListBox1" runat="server">

<ButtonSettings TransferButtons="All" />

<Items>

<telerik:RadListBoxItem runat="server" ListBox="RadListBox1"

Text="Demo Item 1" />

</Items>

</telerik:RadListBox>

</telerik:RadSlidingPane>

</telerik:RadSlidingZone>

</telerik:RadPane>

<telerik:RadPane ID="RadPane2" Runat="server" CssClass="AutoHeight"

Scrolling="None">

<telerik:RadDockZone ID="RadDockZone1" Runat="server" Height="100%"

Width="100%">

<telerik:RadDock ID="RadDock1" Runat="server" Height="800px" Width="300px">

</telerik:RadDock>

</telerik:RadDockZone>

</telerik:RadPane>

</telerik:RadSplitter>

</form>

</body>

</html>

Picture: http://i.imgur.com/bkU7M.png

answered on 21 Jan 2011, 05:57 PM

Hi Sean,

Thank you for the clarification.

Setting height: auto, to the RadSplitter and RadPanes, will make the splitter auto resize its height according to its content, but the sliding zones will always have their height dynamically computed and set in pixels. So if the splitter has little or no content the height of the sliding zone will be small. This is what happens in your case - if you undock the dock from the zone you will notice that the sliding zone has the height of the splitter.

I believe this KB article will help you achieve the desired behavior. It resizes the splitter on initial load, according to its content. You could modify it to resize when the dock is docked to a zone. The RadDock's OnClientDragEnd client-side event should be handled, and then by checking whether a dock is docked to the respective zone resize the splitter. RadDock.get_dockZoneID() client method returns the id of the zone where the dock is dropped, and the RadDock.get_dockZone() returns the reference to the zone.

Greetings,
Pero
the Telerik team

Browse the vast support resources we have to jump start your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.

answered on 21 Jan 2011, 07:46 PM

Hi Telerik,

It looks like this should work. Is there a way to know the methods available to me while working on RadControls in the javascript side of things? I have no idea where these method names are coming from, e.g. get_dockZoneID().

Also, just to be clear, are you saying that I should use this KB article code in addition to setting height: auto, or is it another approach which will cause the sliding zone to resize its height properly? In your second paragraph you do not address resizing the sliding zone ever. In my eyes, everything except the sliding zone is resized properly due to height: auto.

Thanks

Edit: I played around with this for a bit, but was seeing some weird results. None of my attempts yielded the proper result, though. Just to be clear:

Should CSS AutoHeight property be set for RadSplitter1, RadPane1, or RadPane2? Any?
OnClientDragEnd fires when I drop a RadDock onto the page. At this point I need to determine the scroll height of the RadSplitter because the scroll height is an indicator of how tall the RadSplitter would need to be not to have a scroll bar.
I should resize RadSplitter, RadPane1 & 2, and RadSlidingZone1 so that they are all the height of the RadSplitter.

I tried various combinations of the following code with AutoHeight turned on:

<telerik:RadCodeBlock ID="RadCodeBlock1" runat="server" >

<script type="text/javascript">

function OnClientDragEnd(dock, arg) {

var splitter = $find("<%= RadSplitter1.ClientID %>");

var pane1 = $find("<%= RadPane1.ClientID %>");

var pane2 = $find("<%= RadPane2.ClientID %>");

var slidezone = $find("<%= RadSlidingZone1.ClientID %>");

var height = pane.getContentElement().scrollHeight;

splitter.set_height(height);

pane1.set_height(height);

pane2.set_height(height);

slidezone.set_height(height);

slidezone.repaint();

pane1.repaint();

}

</script>

</telerik:RadCodeBlock>

I encountered weird functionality when I disabled AutoHeight. If possible, could you explain to me this behavior?

protected void RadListBox_Dropped(object sender, RadListBoxDroppedEventArgs e)

{

string itemName = e.SourceDragItems[0].Text;

RadPane activeControlPane = Page.FindControl(e.HtmlElementID) as RadPane;

RadDock dock = CreateRadDock( itemName );

RadDockZone dockZone = CreateDockZone();

RadDockLayout dockLayout = CreateDockLayout();

dockZone.Controls.Add(dock);

dockLayout.Controls.Add(dockZone);

activeControlPane.Controls.Add(dockLayout);

CreateSaveStateTrigger(dock);

LoadContent(dock);

}

When AutoHeight is enabled and I drag-and-drop onto my page the variable e.HtmlElementId is RadPane2. In my eyes, this is correct. This is indicative of where the user is attempting to create some content and I attach all my new controls to this location.

When AutoHeight is disabled and I perform the same action e.HtmlElementId is e RAD_SPLITTER_PANE_CONTENT_RadPane2 and Page.FindControl fails to locate this object. I used a recursive implementation of Page.FindControl to check to see if it was embedded somewhere in my page -- it was not. Why am I seeing this e.HtmlElementId value when I did not see it when AutoHeight is enabled?

answered on 26 Jan 2011, 05:21 PM

RadPane.jpg

Hi Sean,

More information on the RadDock's client-side methods and properties can be found on our online documentation: http://www.telerik.com/help/aspnet-ajax/dock_clientraddock.html. You can find information about the client-side API of every control on the same page.

Actually it is another approach (using JavaScript) to make the splitter resize according to its content. It is true that the splitter and panes are resized automatically, but it is not possible to make the sliding zone resize just by using CSS. The height of the sliding zone is set dynamically, based on the height of the parent splitter.

Straight to your questions:

No, the AutoHeight should not be set to any of the splitter controls, because the splitter will not calculate its dimensions correctly.
True, the scroll height of the splitter should be retrieved.
Yes, the splitter, the panes and the sliding zones should be resized, to the new height.

If you examine the HTML content of the RadPane, you will notice that it is represented by a <TD> element, and the content is a <DIV> which is child to the td (see screenshot attached). The <TD> has as id, the id of the RadPane, and the <DIV> has "RAD_SPLITTER_PANE_CONTENT_" + the id of the RadPane. So, when you have height: auto set to the pane, it gets applied to the <DIV>. If the div is empty it will have height of zero (because of height:auto), and you drop a listbox item onto to RadPane, the item will be dropped onto the <TD> and that's why the HtmlElementId contains the id of the td. If the Pane, does not have AutoHeight, then it will have fixed height in pixels, and when the listbox item is dropped it will always be dropped onto the <DIV> and that's why the id contains the "RAD_SPLITTER_PANE_CONTENT_" string.

I hope this helps.

Regards,
Pero
the Telerik team

answered on 26 Jan 2011, 09:08 PM

start-afterpageinit-afterfirstdrop.png

Hi Telerik,

I am getting closer to a solution. I was able to see everything resize properly for a second. A few more questions/issues:

It doesn't look like the sliding zone should be resized to the new height. It does not have a set_height method.
Is there a simple way to obtain Pane's ContentElement's ScrollHeight property server-side?
This is what I have going and what I see occurring:

I have the OnClientDragEnd, OnClientDropped and OnSplitterLoaded events handled. This is because, in my scenario, the user has the ability to Drag-And-Drop an element from a RadListBox and drop it onto the screen to generate a RadDockZone and RadDock. So, I capture the OnClientDropped event to resize once these controls have been created. In the future, my plan is to have RadDockZones be pre-populated on the page. In this scenario, Dock's being dragged around is a possibility, so I have implemented OnClientDragEnd, as well. Finally, I noticed the height resetting to my current issue whenever Page_init fires, so I set it up in OnSplitterLoaded, as well.
When I drag-and-drop the element onto the page the first time, the page resizes too large. Not extensively, but noticeably enough. I've attached a picture at the end of this post that shows this.
If I leave OnClientDragEnd enabled, every time I click my RadDock and then drop it back down the pane height grows by a fixed amount. I am not sure what is causing this -- quite possibly code on my end and I will spend today looking for that, but I thought it best to mention regardless.
After a Page_init fires the height resizes to a proper height. I don't know why. It is the same resizing code.

Accepted

answered on 31 Jan 2011, 03:15 PM

Hello Sean,

1. You are right the sliding zone should not be resized, instead the sliding pane residing in the sliding zone should be the one that is resized. Please excuse me for the misunderstanding.

2. No, you can't obtain the Pane's ContentElement's ScrollHeight on the server.

3. I am not sure what might be the cause for the page to resize to large on first drag. Would it be possible to send us a sample project that demonstrates the issue, so we can observe it locally?

When you click the RadDock, you are actually "moving" the dock, and the DragEnd event is fired. Notice that when you are hovering the dock over a zone, a place holder element is shown that marks the space where the dock will be dropped. This element increases the height of the zone, and automatically increases the scroll height of the pane's ContentElement. This is why the pane's height grows by a fixed amount - the height of the zone or the placeholder.

Again, I am not sure what's causing this behavior. Please send us a runnable sample project, so we can investigate the issues locally.

Regards,
Pero
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

Resizing RadPane based on DockZone height.

8 Answers, 1 is accepted