Telerik Forums / UI for ASP.NET AJAX Forum / Dock /

Sizing DockZone Client-Side

Telerik UI for ASP.NET AJAX
Resources Buy Try

6 posts, 0 answers

apb

46 posts

Member since:
Nov 2008

Posted 29 Dec 2009 Link to this post

Greetings,

I have what should be a simple thing to do -- keep a pair of DockZones the same height. What I have is a table with a TR and two TDs. In each TD is a DockZone.

Whenever a dock is dragged from one dropped into the other zone, I want to set the height of both zones to the height of the tallest + about 30px so that when a user drags a dock from one to the other and drops it, it actually lands in a zone instead of landing below the shorter zone.

If I leave DockMode at default, it lands in the empty space and is not docked. If I set it to Docked, it just snaps bacl to it's original location, both of which annoy the user who thought he was dropping it in a zone.

MinHeight is not helping -- as soon as one zone gets taller than the minhieght same problem. Also, in layouts with more than one row, having crazy tall, completely empty space in the top band(s) makes the bands below useless.

Am I missing something? This seems like a pretty basic need.

I've tried adding an extension method to the client api, which I call from a handler off the Dock.OnClientDragEnd event, but I have no way to grab the accurate heights of the zones. So what happens is if I start off with ten docks stacked in one zone and zero in the other, if I drag 5 over to the second zone, the original largest height is retained and just passed back and forth:

    
            <script type="text/javascript">  
        
                Telerik.Web.UI.RadDockZone.prototype.sync_Height = function(that) {  
        
                    if (that) {  
        
                        var thisDock = $('#' + this.get_id());  
        
                        var thatDock = $('#' + that.get_id());  
        
                        var thisHeight = thisDock.height();  
        
                        var thatHeight = thatDock.height();  
        
                        if (thatHeight > thisHeight) {  
        
                            thisDock.height(thatHeight);  
        
                        }  
        
                        else {  
        
                            thatDock.height(thisHeight);  
        
                        }  
        
                    }  
        
                }   
        
            </script>

-Al

Pero
Admin

1156 posts

Posted 30 Dec 2009 Link to this post

Hello Al,

To achieve the desired behavior you should set Height="100%" to both DockZones placed inside the table cells. Please note that you must also set height: 100% to both TDs and to all parent elements up to the one that has fixed height (specified in pixels). This way the DockZones will have the same height and will fill up the space of the table-cells. Pasted below, you will find a sample project that implements this approach.

In case this does not help, will you be able to provide a sample working project that demonstrates the problems you are having and a detailed information of what you are trying to achieve? Once we receive it we will do our best to provide a working solution.

May I recommend to you our RadSplitter control? It might help you achieve the desired scenario.

.aspx

<%@ 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 id="Head1" runat="server">

    <title></title>

    <style type="text/css">

        .tdClass

        {

            vertical-align: top;

            border: 1px solid red;

            height: 100%;

        }

    </style>

</head>

<body>

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

    <asp:ScriptManager ID="ScriptManager1" runat="server">

    </asp:ScriptManager>

    <div style="height: 500px;">

        <telerik:RadDockLayout ID="RadDockLayout1" runat="server">

            <table style="height: 100%; border: 1px solid green; table-layout: fixed;">

                <tr>

                    <td class="tdClass">

                        <telerik:RadDockZone ID="RadDockZone1" runat="server" Height="100%" Width="300px">

                            <telerik:RadDock ID="RadDock1" runat="server" Width="300px" Title="RadDock-Title">

                                <ContentTemplate>

                                    <br />

                                    <br />

                                    <br />

                                    <br />

                                    <br />

                                    CONTENT

                                    <br />

                                    <br />

                                    <br />

                                    <br />

                                    <br />

                                </ContentTemplate>

                            </telerik:RadDock>

                            <telerik:RadDock ID="RadDock3" runat="server" Width="300px" Title="RadDock-Title">

                                <ContentTemplate>

                                    <br />

                                    <br />

                                    <br />

                                    <br />

                                    <br />

                                    CONTENT

                                    <br />

                                    <br />

                                    <br />

                                    <br />

                                    <br />

                                </ContentTemplate>

                            </telerik:RadDock>

                        </telerik:RadDockZone>

                    </td>

                    <td class="tdClass">

                        <telerik:RadDockZone ID="RadDockZone2" runat="server" Height="100%" Width="300px">

                            <telerik:RadDock ID="RadDock2" runat="server" Width="300px" Title="RadDock-Title">

                                <ContentTemplate>

                                    <br />

                                    <br />

                                    <br />

                                    <br />

                                    <br />

                                    CONTENT

                                    <br />

                                    <br />

                                    <br />

                                    <br />

                                    <br />

                                </ContentTemplate>

                            </telerik:RadDock>

                            <telerik:RadDock ID="RadDock6" runat="server" Width="300px" Title="RadDock-Title">

                                <ContentTemplate>

                                    <br />

                                    <br />

                                    <br />

                                    <br />

                                    <br />

                                    CONTENT

                                    <br />

                                    <br />

                                    <br />

                                    <br />

                                    <br />

                                </ContentTemplate>

                            </telerik:RadDock>

                        </telerik:RadDockZone>

                    </td>

                </tr>

            </table>

        </telerik:RadDockLayout>

    </div>

    </form>

</body>

</html>

Kind regards,
Pero
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.
HL

55 posts

Member since:
Dec 2009

Posted 21 Feb 2010 Link to this post

hi all:
I am a new baby for RadControl . I try to add several user controls to Dock dynamically. How can I define fixed RadDocks per line inside one RadZone? (repeat column number) Example: I only want to add 4 Docks per line in one RadZone. Since the width is dynamic, I can't resolve it by using Dock width and RadZone witdth. I could use 4 RadDockZone but I am not sure if it has a better solution.

Thanks
Helena
Pero
Admin

1156 posts

Posted 24 Feb 2010 Link to this post

Hi Helena,

Unfortunately the only way to achieve this is to use 4 RadDockZones. You can disable the borders and remove the padding on some of the zones to make them appear as one zone.

Sincerely yours,
Pero
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.
HL

55 posts

Member since:
Dec 2009

Posted 01 Mar 2010 Link to this post

Since I have to use 4 RadDockZones, how can I make sure the dock move forward when the previous dock has been removed?
Example: I have two RadDockZones(RadDockZone1 and RadDockZone2) and each RadDockZone has one Dock ( Dock 1 is inside the RadDockZone1 and Dock 2 is inside the RadDockZone2). RadDockZone1 is on the left side and RadDockZone 2 is on the right side. if I removed/close Dock1 from RadDockZone1. Now RadDockZone1 is empty.How can I make sure Dock2 automatically on RadDockZone2 move to RadDockZone1?

Thanks
Helena
Pero
Admin

1156 posts
Posted 02 Mar 2010 Link to this post

Hello Helena,

You can use the client-side API of the dock and the docking zone to achieve the desired functionality.

The DockZone.dock(objDock, index) places the dock at the specified index in the zone.

Telerik.Web.UI.RadDockZonesGlobalArray gets an array of all docking zones available on the page.

DockZone.get_docks() returns an array of all docks placed within a zone.

Detailed information about the client-side API can be found on our online documentation: http://www.telerik.com/help/aspnet-ajax/dock_client-side_basics.html

For your convenience I have created a sample project that moves the first dock from any zone to its left neighboring zone. Here is the source code:

<%@ 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 id="Head1" runat="server">

    <title></title>

    <script type="text/javascript">

        function OnClientCommand(dock, args)

        {

            var zonesArray = Telerik.Web.UI.RadDockZonesGlobalArray;

            var length = zonesArray.length;

            for (var i = 0; i < length; i++)

            {

                if (i + 1 != length)

                {

                    var docksArray = zonesArray[i + 1].get_docks();

                    var firstDock = docksArray.length > 0 ? docksArray[0] : null;

                    if (firstDock)

                    {

                        zonesArray[i].dock(firstDock, 0);

                    }

                }

            }

        }

    </script>

    <style type="text/css">

        .RadDockZone

        {

            float: left;

        }

    </style>

</head>

<body>

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

    <asp:ScriptManager ID="ScriptManager1" runat="server">

    </asp:ScriptManager>

    <div>

        <telerik:RadDockLayout ID="RadDockLayout1" runat="server">

            <telerik:RadDockZone ID="RadDockZone1" runat="server" MinHeight="300px" Width="300px">

                <telerik:RadDock ID="RadDock1" runat="server" Width="300px" Title="RadDock-Title">

                    <Commands>

                        <telerik:DockCloseCommand OnClientCommand="OnClientCommand" />

                    </Commands>

                    <ContentTemplate>

                        <br />

                        <br />

                        <br />

                        <br />

                        <br />

                        CONTENT

                        <br />

                        <br />

                        <br />

                        <br />

                        <br />

                    </ContentTemplate>

                </telerik:RadDock>

            </telerik:RadDockZone>

            <telerik:RadDockZone ID="RadDockZone2" runat="server" MinHeight="300px" Width="300px">

                <telerik:RadDock ID="RadDock2" runat="server" Width="300px" Title="RadDock-Title"

                    Skin="Hay">

                    <Commands>

                        <telerik:DockCloseCommand OnClientCommand="OnClientCommand" />

                    </Commands>

                    <ContentTemplate>

                        <br />

                        <br />

                        <br />

                        <br />

                        <br />

                        CONTENT

                        <br />

                        <br />

                        <br />

                        <br />

                        <br />

                    </ContentTemplate>

                </telerik:RadDock>

            </telerik:RadDockZone>

            <telerik:RadDockZone ID="RadDockZone3" runat="server" MinHeight="300px" Width="300px">

                <telerik:RadDock ID="RadDock3" runat="server" Width="300px" Title="RadDock-Title"

                    Skin="Black">

                    <Commands>

                        <telerik:DockCloseCommand OnClientCommand="OnClientCommand" />

                    </Commands>

                    <ContentTemplate>

                        <br />

                        <br />

                        <br />

                        <br />

                        <br />

                        CONTENT

                        <br />

                        <br />

                        <br />

                        <br />

                        <br />

                    </ContentTemplate>

                </telerik:RadDock>

            </telerik:RadDockZone>

            <telerik:RadDockZone ID="RadDockZone4" runat="server" MinHeight="300px" Width="300px">

                <telerik:RadDock ID="RadDock4" runat="server" Width="300px" Title="RadDock-Title"

                    Skin="Simple">

                    <Commands>

                        <telerik:DockCloseCommand OnClientCommand="OnClientCommand" />

                    </Commands>

                    <ContentTemplate>

                        <br />

                        <br />

                        <br />

                        <br />

                        <br />

                        CONTENT

                        <br />

                        <br />

                        <br />

                        <br />

                        <br />

                    </ContentTemplate>

                </telerik:RadDock>

            </telerik:RadDockZone>

        </telerik:RadDockLayout>

    </div>

    </form>

</body>

</html>

Kind regards,
Pero
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.

Sizing DockZone Client-Side

apb

Pero

HL

Pero

HL

Pero