Restricting zone to create new row for docks ?

10 posts, 1 answers
  1. Madhav Joshi
    Madhav Joshi avatar
    19 posts
    Member since:
    Oct 2012

    Posted 05 Nov 2012 Link to this post

    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
  2. Princy
    Princy avatar
    17421 posts
    Member since:
    Mar 2007

    Posted 06 Nov 2012 Link to this post

    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.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Madhav Joshi
    Madhav Joshi avatar
    19 posts
    Member since:
    Oct 2012

    Posted 06 Nov 2012 Link to this post

    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>
  5. Answer
    Princy
    Princy avatar
    17421 posts
    Member since:
    Mar 2007

    Posted 07 Nov 2012 Link to this post

    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.
  6. Madhav Joshi
    Madhav Joshi avatar
    19 posts
    Member since:
    Oct 2012

    Posted 07 Nov 2012 Link to this post

    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
  7. Slav
    Admin
    Slav avatar
    1355 posts

    Posted 09 Nov 2012 Link to this post

    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.
  8. Madhav Joshi
    Madhav Joshi avatar
    19 posts
    Member since:
    Oct 2012

    Posted 09 Nov 2012 Link to this post

    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
  9. Slav
    Admin
    Slav avatar
    1355 posts

    Posted 13 Nov 2012 Link to this post

    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.
  10. Attila
    Attila avatar
    11 posts
    Member since:
    Jan 2013

    Posted 05 Mar 2013 Link to this post

    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
  11. Slav
    Admin
    Slav avatar
    1355 posts

    Posted 07 Mar 2013 Link to this post

    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.
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017