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

Restricting zone to create new row for docks ?

9 Answers 67 Views
Dock
This is a migrated thread and some comments may be shown as answers.
Madhav Joshi
Top achievements
Rank 2
Madhav Joshi asked on 05 Nov 2012, 06:50 AM
Hi Team,

Here is my Design. I Have a RadDockZone inside a Layout and 4 docks placed inside RadDockZone oriented horizontal and width=100% ,So the Zone occupies whole width of screen.Each RadDock is 25% width so 4 docks perfectly fit in.

Problem goes here ,
On Page Load it looks perfectly fine 4 docks together in one Row of Zone. If i try to move one of the Dock then one of the Dock goes to Next row of Zone which i want to restrict. Can you please help me Resolving this ?

Thanks,
Mady

9 Answers, 1 is accepted

Sort by
0
Princy
Top achievements
Rank 2
answered on 06 Nov 2012, 06:37 AM
Hi Mady,

Unfortunately I couldn't replicate the issue. Here is the sample code that I tried based on your scenario which works as expected.

ASPX:
<telerik:RadDockZone runat="server" ID="RadDockZoneHorizontal1" Orientation="Horizontal" Width="100%">
  <telerik:RadDock runat="server" ID="RadDock1" Title="RadDock1" Text="RadDock1" Width="25%">
  </telerik:RadDock>
   .................................
</telerik:RadDockZone>

Please provide your code if this doesn't helps.

Thanks,
Princy.
0
Madhav Joshi
Top achievements
Rank 2
answered on 06 Nov 2012, 09:51 AM
Hi Princy,
Thanks for response. Below is my code snippet which shows Docks puttogether in one row.

<telerik:RadDockLayout runat="server" ID="RDLPHProjContent" Skin="Metro">
                                            <telerik:RadDockZone runat="server" ID="RDZProjHealthRow1" Orientation="Horizontal"
                                                Width="99%">
                                                <telerik:RadDock runat="server" ID="rtvradTestDesignProj" Title="Schedule Variance"
                                                    Width="25%" AllowedZones="RDZProjHealthRow1" EnableAnimation="true" DockMode="Docked"
                                                    Resizable="false">
                                                    <Commands>
                                                        <telerik:DockExpandCollapseCommand />
                                                    </Commands>
                                                    <ContentTemplate>
                                                        <div class="GuageBGImage">
                                                            <telerik:RadRadialGauge runat="server" ID="radTestDesign" CssClass="GuagePosition">
                                                                <Pointer Value="0" Color="#000000">
                                                                </Pointer>
                                                                <Scale Min="0" Max="100" MajorUnit="20" MinorUnit="5">
                                                                    <MajorTicks Size="5" Color="#777777" />
                                                                    <MinorTicks Size="2" Color="#777777" />
                                                                    <Labels Position="Outside" Color="#000000" Font="bold 11px Arial,Verdana,Tahoma" />
                                                                    <Ranges>
                                                                        <telerik:GaugeRange />
                                                                        <telerik:GaugeRange />
                                                                        <telerik:GaugeRange />
                                                                        <telerik:GaugeRange />
                                                                        <telerik:GaugeRange />
                                                                        <telerik:GaugeRange />
                                                                    </Ranges>
                                                                </Scale>
                                                            </telerik:RadRadialGauge>
                                                        </div>
                                                    </ContentTemplate>
                                                </telerik:RadDock>
                                                <telerik:RadDock runat="server" ID="rtvradDependencyProj" Title="QualityGate(Entry Criteria)-Missed%"
                                                    Width="25%" AllowedZones="RDZProjHealthRow1" EnableAnimation="true" DockMode="Docked"
                                                    Resizable="false">
                                                    <Commands>
                                                        <telerik:DockExpandCollapseCommand />
                                                    </Commands>
                                                    <ContentTemplate>
                                                        <div class="GuageBGImage">
                                                            <telerik:RadRadialGauge runat="server" ID="RadRadialGauge1" CssClass="GuagePosition">
                                                                <Pointer Value="0" Color="#000000">
                                                                </Pointer>
                                                                <Scale Min="0" Max="100" MajorUnit="20" MinorUnit="5">
                                                                    <MajorTicks Size="5" Color="#777777" />
                                                                    <MinorTicks Size="2" Color="#777777" />
                                                                    <Labels Position="Outside" Color="#000000" Font="bold 11px Arial,Verdana,Tahoma" />
                                                                    <Ranges>
                                                                        <telerik:GaugeRange />
                                                                        <telerik:GaugeRange />
                                                                        <telerik:GaugeRange />
                                                                    </Ranges>
                                                                </Scale>
                                                            </telerik:RadRadialGauge>
                                                        </div>
                                                    </ContentTemplate>
                                                </telerik:RadDock>
                                                <telerik:RadDock runat="server" ID="rtvradMilestoneProj" Title="QualitYGate(Exit Criteria)-Missed%"
                                                    Width="25%" AllowedZones="RDZProjHealthRow1" EnableAnimation="true" DockMode="Docked"
                                                    Resizable="false">
                                                    <Commands>
                                                        <telerik:DockExpandCollapseCommand />
                                                    </Commands>
                                                    <ContentTemplate>
                                                        <div class="GuageBGImage">
                                                            <telerik:RadRadialGauge runat="server" ID="RadRadialGauge2" CssClass="GuagePosition">
                                                                <Pointer Value="0" Color="#000000">
                                                                </Pointer>
                                                                <Scale Min="0" Max="100" MajorUnit="20" MinorUnit="5">
                                                                    <MajorTicks Size="5" Color="#777777" />
                                                                    <MinorTicks Size="2" Color="#777777" />
                                                                    <Labels Position="Outside" Color="#000000" Font="bold 11px Arial,Verdana,Tahoma" />
                                                                    <Ranges>
                                                                        <telerik:GaugeRange />
                                                                        <telerik:GaugeRange />
                                                                        <telerik:GaugeRange />
                                                                    </Ranges>
                                                                </Scale>
                                                            </telerik:RadRadialGauge>
                                                        </div>
                                                    </ContentTemplate>
                                                </telerik:RadDock>
                                                <telerik:RadDock runat="server" ID="rtvOnbudgetChartProj" Title="On Budget %" Width="25%"
                                                    AllowedZones="RDZProjHealthRow1" EnableAnimation="true" DockMode="Docked" Resizable="false">
                                                    <Commands>
                                                        <telerik:DockExpandCollapseCommand />
                                                    </Commands>
                                                    <ContentTemplate>
                                                        <div class="GuageBGImage">
                                                            <telerik:RadRadialGauge runat="server" ID="RadRadialGauge3" CssClass="GuagePosition">
                                                                <Pointer Value="0" Color="#000000">
                                                                </Pointer>
                                                                <Scale Min="0" Max="100" MajorUnit="20" MinorUnit="5">
                                                                    <MajorTicks Size="5" Color="#777777" />
                                                                    <MinorTicks Size="2" Color="#777777" />
                                                                    <Labels Position="Outside" Color="#000000" Font="bold 11px Arial,Verdana,Tahoma" />
                                                                    <Ranges>
                                                                        <telerik:GaugeRange />
                                                                        <telerik:GaugeRange />
                                                                        <telerik:GaugeRange />
                                                                    </Ranges>
                                                                </Scale>
                                                            </telerik:RadRadialGauge>
                                                        </div>
                                                    </ContentTemplate>
                                                </telerik:RadDock>
                                            </telerik:RadDockZone>
</telerik:RadDockLayout>
0
Accepted
Princy
Top achievements
Rank 2
answered on 07 Nov 2012, 07:54 AM
Hi Mady,

Try setting the width property of RadDockZone to 100% to fix the issue.

ASPX:
<telerik:RadDockZone runat="server" ID="RDZProjHealthRow1" Orientation="Horizontal" Width="100%">
    ..........................
</telerik:RadDockZone>

Hope this helps.

Thanks,
Princy.
0
Madhav Joshi
Top achievements
Rank 2
answered on 07 Nov 2012, 07:59 AM
Hi Princy,
Thanks  it seems to work now. But again got some problem. when i double click on RadDocks width reduces automatically and scrollbar appears. Is it because i have given widths in percentages? Please clarify ...

Thanks,
Mady
0
Slav
Telerik team
answered on 09 Nov 2012, 08:24 AM
Hello Madhav,

Please clarify the width of which element on the page is changed and where does the scrollbar appear after setting the Width property of RadDockZone so that I can help you accordingly.

Greetings,
Slav
the Telerik team
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
0
Madhav Joshi
Top achievements
Rank 2
answered on 09 Nov 2012, 08:40 AM
Hi Slav,

I know its not right thread, Problem is RadDock on double click changes its size automatically ie, goes on reducing and scrollbar appears for that raddock which i have double clicked :) Hope You understood scenario.

Thanks,
Madhav
0
Slav
Telerik team
answered on 13 Nov 2012, 04:49 PM
Hi Madhav,

Please try adding the following CSS code in the head tag of your page and check if the problem persists:
<style type="text/css">
    html, body, form
    {
        margin: 0px;
        padding: 0px;
        overflow: hidden;
    }
</style>
 

Kind regards,
Slav
the Telerik team
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
0
Attila
Top achievements
Rank 1
answered on 05 Mar 2013, 10:37 AM
Hi,

It still makes new rows.
If you move one of the docks to the last one rigth bottom corner you can make a new row.
How can I disable this?

Thanks
0
Slav
Telerik team
answered on 07 Mar 2013, 12:55 PM
Hi Attila,

Please ensure that you have tried the suggestions, posted below. If the problem persists I will need a more detailed description of the setup of your docks and step by step instructions for reproducing the issue so that I can inspect it locally and help you accordingly.

Regards,
Slav
the Telerik team
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
Tags
Dock
Asked by
Madhav Joshi
Top achievements
Rank 2
Answers by
Princy
Top achievements
Rank 2
Madhav Joshi
Top achievements
Rank 2
Slav
Telerik team
Attila
Top achievements
Rank 1
Share this question
or