DockZone Width=100% going outside bounds

[Sean]

Hi all,

I noticed that my dynamically created dock zones were falling outside of their container. I added a static dock zone and noticed that it too falls outside of this container. I'm at a loss.

<telerik:RadSplitter ID="RadSplitter1" Runat="server"
                 Width="100%" BorderSize="2" OnClientLoad="OnSplitterLoaded"
                BackColor="White" CssClass="RoundedStyle" Height="600px" Skin="Web20" >
                    <telerik:RadPane ID="RadPane1" Runat="server" Scrolling="None" Width="20px"
                        BackColor="#6086C1" >
                        <telerik:RadSlidingZone ID="RadSlidingZone1" Runat="server" ClickToOpen="True"
                            BackColor="#6086C1" Width="20px" Skin="Web20" >
                            <telerik:RadSlidingPane ID="RadSlidingPane1" Runat="server" Title="Settings"
                                Scrolling="Y" MinWidth="160"
                                Width="160px" BackColor="#ECF4FD" >
                                <telerik:RadListBox ID="lstBxSettings" runat="server" Skin="Web20"
                                    EnableDragAndDrop="True" ondropped="LstBxSettings_Dropped" Width="100%"
                                    style="top: 0px; left: 0px">
                                    <ButtonSettings TransferButtons="All" />
                                    <Items>
                                        <telerik:RadListBoxItem ListBox="lstBxSettings" Text="Horizontal Bar" />
                                        <telerik:RadListBoxItem ListBox="lstBxSettings" Text="Vertical Bar" />
                                    </Items>
                                </telerik:RadListBox>
                            </telerik:RadSlidingPane>
                            <telerik:RadSlidingPane ID="RadSlidingPane2" Runat="server" Title="Custom"
                                Scrolling="Y" MinWidth="160" BackColor="#ECF4FD">
                                <telerik:RadListBox ID="lstBxCustom" runat="server"
                        EnableDragAndDrop="True" ondropped="RadListBox_Dropped" Skin="Web20" Sort="Ascending"
                                    Width="100%">
                                    <ButtonSettings TransferButtons="All" />
                                </telerik:RadListBox>
                            </telerik:RadSlidingPane>
                            <telerik:RadSlidingPane ID="RadSlidingPane3" Runat="server" Title="Historical"
                                Scrolling="Y" MinWidth="160" Width="160px" BackColor="#ECF4FD" >
                                <telerik:RadListBox ID="lstBxHistorical" runat="server"
                        EnableDragAndDrop="True" ondropped="RadListBox_Dropped" Skin="Web20" Sort="Ascending"
                                    Width="100%">
                                </telerik:RadListBox>
                            </telerik:RadSlidingPane>
                        </telerik:RadSlidingZone>
                    </telerik:RadPane>
                    <telerik:RadPane ID="RadPane2" Runat="server" MinHeight="500"
                        BorderColor="White" Scrolling="None" CssClass="RoundedStyle">
                    </telerik:RadPane>
                </telerik:RadSplitter>

I thought it might be the fact that I had Pane1 on the LHS of my RadSplitter. I set its visibility to false, but the dockzone just grew in size and continued hanging over one edge. 

RadPane2's width is unset and the DockZone is housed inside of this. Could this be the problem? If so, what would a good solution be? I can't set the width in percentage, but that's what I would like to be doing. In addition, when inspecting the elements on the web page I found the width of RadPane2 to be correct.

The attached picture shows where the rounded corner looks fine inside the dockzone on the LHS, but because the dockzone extends too far on the RHS it gets chopped off. I also show the HTML markup where it is clear that the the RadPane is 1013 px (the width of the RadSplitter), but then the 100% width of the DockZone it is containing expands past it.

Thanks for your time,

Sean

EDIT: Sorry, there was something weird going on with my attachments. The image labeled "ActuallyCorrect.png" should be reflective of what I stated above.

[Pero]

Hi Sean,

The RadDockZone by default has padding of 4px on all 4 sides. This makes the width of the zone, 100%+8px(padding-left and padding-right)+2px(border-left and border-right), which adds up to 10px more than the width of its parent element. Please set, the zone's width to a smaller value (like 97% or so), so that it compensates for the 10px of padding+border.
The following code demonstrates this with plain HTML and CSS:

<div style="height: 100px; background: Blue; width: 500px">
    <div style="background: red; padding: 4px; border: 1px solid green; width: 100%;">
    </div>
</div>

Best wishes,
Pero
the Telerik team

[Sean]

Hi Telerik,

Thanks for the response. This will work for my current purposes, but I am worried about maintaining proper proportions on a larger scale. I set the width of my dockZone to 99.5% and this looks fine on my landscape-oriented monitor. It looks slightly too thin on my portrait-oriented monitor, but I can live with that for most users. If this webpage is to be displayed on a widescreen monitor, though, the percentage fix will not work.

I was hoping to find a client-side method for setting the RadDockZone's width, but I'm not seeing one. 

Is my only option to capture the RadDockZone's parent RadPane client-side, pass it's width back to the server, and then force the width of the dockZone to the RadPane's width -10px?

Sean

[Pero]

Hello Sean,

Actually if you leave the Width of the zone not set (which means it will have width:auto), it will automatically resize according to its parent RadPane. Test the following code with Width="100%" to the zone, and without Width you will see the difference:

<telerik:RadSplitter ID="Splitter1" runat="server" Width="500px">
    <telerik:RadPane ID="RadPane1" runat="server">
        <telerik:RadDockZone ID="RadDockZone1" runat="server">
        <telerik:RadDock ID="RadDock1" runat="server" Title="RadDock" Height="50px">
        </telerik:RadDock>
        </telerik:RadDockZone>
    </telerik:RadPane>
</telerik:RadSplitter>

All the best,
Pero
the Telerik team

[Sean]

Hi Pero,

So, this is working great! I have a question, though. Is there an elegant way of obtaining the height/width of a DockZone when I leave these values unset? I am trying to resize a control located inside of a RadDock. I would like it to be the same size as the RadDock. Unfortunately, the height and width properties are empty. Same with the RadDockZone and the RadPane parent controls.

I wrote some code previously to allow me to persist height/width for when the client drags slider bars around (thus resizing the pane). It's ugly, but here it is: 

<script type="text/javascript">
    function OnClientResized(pane, args) {
        var context = new Object();
        var paneIDandHeightandWidth = pane.get_id() + ',' + pane.get_height() + ',' + pane.get_width();
        //Context is just thrown away.
        CallSetDimensions(paneIDandHeightandWidth, context);
    }

    function CallbackOnSucceeded(result, context) {
    //Logging
    }

    function CallbackOnFailed(result, context) {
    //Logging
    }
</script>

protected void Page_Load(object sender, EventArgs e)
{
    RegisterCallBackReference();
}

private void RegisterCallBackReference()
{
    String callBack = Page.ClientScript.GetCallbackEventReference(this, "arg", "CallbackOnSucceeded", "context", "CallbackOnFailed", true);
    String clientFunction = "function CallSetDimensions(arg, context){ " + callBack + "; }";
    Page.ClientScript.RegisterClientScriptBlock(this.GetType(), "Call To Server", clientFunction, true);
}

#region ICallbackEventHandler Members
String returnValue;
string ICallbackEventHandler.GetCallbackResult()
{
    return returnValue;
}

void ICallbackEventHandler.RaiseCallbackEvent(string eventArgument)
{
    bool result = SetDimensions(eventArgument);

    if (result)
    {
        returnValue = "Success.";
    }
    else
    {
        returnValue = "Failure.";
    }
}
#endregion

private bool SetDimensions(string args)
{
    bool saveSuccessful = false;

    string[] paneIDandHeightandWidth = args.Split(',');
    string paneID = paneIDandHeightandWidth[0];

    int paneHeight = 0;
    int.TryParse(paneIDandHeightandWidth[1], out paneHeight);

    int paneWidth = 0;
    int.TryParse(paneIDandHeightandWidth[2], out paneWidth);

    RadPane pane = Utilities.FindControlRecursive(Page, paneID) as RadPane;

    if (!object.Equals(pane, null))
    {
        saveSuccessful = true;
        RadPaneSetting paneSetting = RadPaneSetting.GetSettings(pane);
        pane.Height = new Unit(paneHeight, UnitType.Pixel);
        pane.Width = new Unit(paneWidth, UnitType.Pixel);
        controlSave.SavePane(pane);
    }

    return saveSuccessful;
}

I spoke with Dobormir here and he alluded that this was an acceptable means of doing such a thing. Essentially, whenever my pane gets resized by the RadSplitter, I capture the height/width of the pane and pass it back to the server so that I am able to save its height/width when the dynamic controls need to be restored.

I would be OK (but not SUPER happy) using this same functionality to achieve my desired results. Unfortunately, I am not convinced this is possible. First, RadPane does not have an OnClientLoad event. I captured the RadSplitter's OnClientLoad event, parsed out it's child pane's height/width and stored those, but the event only fires on page refreshes -- not whenever the page reinitializes. 

Currently, I have my RadDock's control resizing to a proper height/width when it is first created because dropping the RadDock onto the page seems to fire PaneResize event (also sketchy, but working with it for now..). But, if I grab the RadDock and then drop it back onto the same RadDockZone the page reinits without any dimensions changing so the height/width is back to being perceived as empty.

Any ideas on this one?

Thanks for your time.

[Pero]

Hello Sean,

I think you should use the domElement.offsetWidth and domElement.offsetHeight to get the width and height of the zone that doesn't have Width and Height properties set. Note that offsetWidth and offsetHeight includes any border width and padding that might be applied to the element. Here is an example that demonstrates these two properties:

<!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">
    <asp:ScriptManager ID="RadScriptManager1" runat="server">
    </asp:ScriptManager>
    <script type="text/javascript">
        function GetHeight()
        {
            var zone = $find("RadDockZone1");
            alert("Zone width: " + zone.get_element().offsetWidth);
            alert("Zone height: " + zone.get_element().offsetHeight);
        }
    </script>
    <div>
        <input type="button" onclick="GetHeight();" value="Get Zone's dimensions" />
        <telerik:RadDockLayout ID="RadDockLayout1" runat="server">
            <div style="width: 532px;">
                <telerik:RadDockZone ID="RadDockZone1" runat="server" MinHeight="100px">
                    <telerik:RadDock ID="RadDock1" runat="server" Title="RadDock-Title" Width="300px"
                        Height="260px">
                        <ContentTemplate>
                            RadDock
                        </ContentTemplate>
                    </telerik:RadDock>
                </telerik:RadDockZone>
            </div>
        </telerik:RadDockLayout>
    </div>
    </form>
</body>
</html>

Greetings,
Pero
the Telerik team

[Sean]

Hi Telerik,

I have no issue obtaining the metrics for my controls client-side. The problem lies in the fact that I need to persist these values because the controls are dynamically created. In order to persist these values I need to either A) Obtain the metrics server-side or B) Obtain the metrics client-side and pass the values back to the server so that they may be written to a database/Session/cookie/etc. 

As it stands, I have a workaround, but it is a bit more forced then I would like. I am leaving my RadDockZone's height undefined (so it's auto), I regenerate my controls during Page_Init, then, after Page_Init has finished and Page_Load begins, the dimensions of static controls on the page become known. At this point, I load the content of my RadDock, settings its dimensions by subtracting hard-coded pixel amounts from the dimension of my static container. This causes my RadDock and its parent containers to resize appropriately.

After reviewing the ASP.NET Page life-cycle it seems that this is best practice, so I am going to go with this. Thanks for the help.