collapse button missing from RadDock

7 posts, 0 answers
  1. Erik
    Erik avatar
    43 posts
    Member since:
    Feb 2009

    Posted 11 Mar 2010 Link to this post

    I have some RadDocks (dynamically loaded to a RadDockZone) within a hidden RadDockZone more specifically with it's attributes on the RDZ set to display:none;
    When I display the hidden RDZ it shows up properly, but the RadDocks within it are missing their respective collapse bars and only appear after i click on each one of them and unclick.  Any idea how to fix this issue?

    <

     

    telerik:RadDockZone ID="RadDockZone4" CssClass="RDZ" Runat="server" Skin=""></telerik:RadDockZone>

     

    .RDZ

     

     

     

    {

     

    position:absolute;

     

     

    left:500px;

     

     

    top:20px;

     

     

    display:none;

     

     

    }

  2. Erik
    Erik avatar
    43 posts
    Member since:
    Feb 2009

    Posted 11 Mar 2010 Link to this post

    I've found a way to fix this issue, but it requires that you set the object to hidden after the page has loaded.  Not sure if this is the best way or not (I works), but if there is a better way I'd love to hear it.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Petio Petkov
    Admin
    Petio Petkov avatar
    825 posts

    Posted 15 Mar 2010 Link to this post

    Hello Erik,

    Try to invoke repaint() method for each RadDock in the zone once it goes visible, e.g.
    <%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
    <!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" style="height: 100%; width: 100%; margin: 0px">
    <head runat="server">
        <title></title>
        <style type="text/css">
            .RDZ  
            {
                position:absolute; 
                left:500px; 
                top:20px;
                display:none; 
            }
        </style>
        <script type="text/javascript">
            function ShowZone() 
            
                var zone=$find('RadDockZone4');
                var zoneElement = zone.get_element();
                zoneElement.style.display = "block";
      
                var docks = zone.get_docks();
                for (var i = 0; i < docks.length; i++) {
                    alert(i);
                    docks[i].repaint();
                }
            }
        </script>
    </head>
    <body >
        <form id="form1" runat="server">
        <asp:ScriptManager ID="ScriptManager1" runat="server">
        </asp:ScriptManager>
        <telerik:RadDockLayout ID="RadDockLayout1" runat="server">
            <input type="button" value="ShowZone" onclick="ShowZone()" />
            <telerik:RadDockZone ID="RadDockZone4" CssClass="RDZ" Runat="server" Skin="" Width="300px">
            <telerik:RadDock ID="RadDock1" Title="RadDock1" runat="server">
                    <ContentTemplate>
                        Some Content
                    </ContentTemplate>
                </telerik:RadDock>
            </telerik:RadDockZone>
              
        </telerik:RadDockLayout>
        </form>
    </body>
    </html>

    Hope this helps.
    All the best,
    Petio Petkov
    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.
  5. Erik
    Erik avatar
    43 posts
    Member since:
    Feb 2009

    Posted 19 Mar 2010 Link to this post

    Petio,
    Using your code results in an "Object doesn't support this property or method".  I'm using master pages and referencing the RadDockZone with $find resulted in null so I used the full path name document.getElementById('ctl00_ContentPlaceHolder1_divRDZHolder3') to give me the reference, but then the above error occurs when on both zoneElement = zone.get_element();
    and zone.get_docks();

    Not to mention now that I'm dynamically adding these controls and wrapping them in a div they occasionally become disabled (it appears) as they are not moveable/draggable or collapsable.
    ***UPDATE***
    The disabled issue was occurring because the RDZ's were absolutely positioned and I had to set them back to Relative to make them work again....and of course reposition them back to absolute after that....
    ***END***

    Not sure if this matters or not, but I'm calling this function you provided after some jquery is executed:
     $(document).ready(function() {
     $(function() {
                $('[id$=divArrowR]').live("click", function(){
    $('[id$=divRDZHolder1]'). //do stuff
    // do more jquery stuff here
      ShowZone();

        });
      });





  6. Pero
    Admin
    Pero avatar
    1156 posts

    Posted 24 Mar 2010 Link to this post

    Hi Erik,

    I reworked the Petio's code to use Master page. The project is attached to the thread.


    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.
  7. Erik
    Erik avatar
    43 posts
    Member since:
    Feb 2009

    Posted 25 Mar 2010 Link to this post

    pero,
    thanks for the update....this unfortuantly doesn't work either.  I still receive the following error: The name 'RadDockZone3' does not exist in the current context.

    ****UPDATE*****
    By putting the following in works: var zone = $find('ctl00_ContentPlaceHolder1_RadDockZone3');
    it goes through each dock, but they are still "disabled" in a sense as my original issue.

    Here is the clippet of source code for the object as well:
     <DIV id="ctl00_ContentPlaceHolder1_divRDZHolder1" class="QQstyle9rdzA" style="max-height:366px;"><div id="ctl00_ContentPlaceHolder1_RadDockZone3" class="raddockzone RadDockZone_ rdVertical " style="width:422px;min-width:10px;min-height:10px;">
            <div id="ctl00_ContentPlaceHolder1_RadDock5016" class="raddock RadDock_Default2006 rdVariableHeight " style="width:100%;class:tabFloatsHead;width:420px;">
                <div class="rdSideBorders rdHTitlebar"><div id="ctl00_ContentPlaceHolder1_RadDock5016_T" class="rdTitlebar">
                    <DIV id="ctl00_ContentPlaceHolder1_RadDock5016_T_dynDivCode" class="tabFloatHead"><a class='hyperRadDockLinks' href='Open_Tool.aspx?ToolID=5016'>ASA Throttle</a></DIV><span class="rdCommands"><a class="rdCollapse" title="Collapse"></a></span>
                </div><div id="ctl00_ContentPlaceHolder1_RadDock5016_C" class="rdContent">
                    <span><div class='tabFloats'>Control overflow routing based on Average Speed of Answer (ASA).</div></span>
                </div></div><div class="rdTopBorder"><!-- --></div><div class="rdBottomBorder"><!-- --></div><input id="ctl00_ContentPlaceHolder1_RadDock5016_ClientState" name="ctl00_ContentPlaceHolder1_RadDock5016_ClientState" type="hidden" />
            </div><div id="ctl00_ContentPlaceHolder1_RadDock5037" class="raddock RadDock_Default2006 rdVariableHeight " style="width:100%;class:tabFloatsHead;width:420px;">
                <div class="rdSideBorders rdHTitlebar"><div id="ctl00_ContentPlaceHolder1_RadDock5037_T" class="rdTitlebar">
                    <DIV id="ctl00_ContentPlaceHolder1_RadDock5037_T_dynDivCode" class="tabFloatHead"><a class='hyperRadDockLinks' href='Open_Tool.aspx?ToolID=5037'>Agent Throttle</a></DIV><span class="rdCommands"><a class="rdCollapse" title="Collapse"></a></span>
                </div><div id="ctl00_ContentPlaceHolder1_RadDock5037_C" class="rdContent">
                    <span><div class='tabFloats'>Control overflow routing based on the number of agents.</div></span>
                </div></div><div class="rdTopBorder"><!-- --></div><div class="rdBottomBorder"><!-- --></div><input id="ctl00_ContentPlaceHolder1_RadDock5037_ClientState" name="ctl00_ContentPlaceHolder1_RadDock5037_ClientState" type="hidden" />
            </div><div id="ctl00_ContentPlaceHolder1_RadDock5002" class="raddock RadDock_Default2006 rdVariableHeight " style="width:100%;class:tabFloatsHead;width:420px;">
                <div class="rdSideBorders rdHTitlebar"><div id="ctl00_ContentPlaceHolder1_RadDock5002_T" class="rdTitlebar">
                    <DIV id="ctl00_ContentPlaceHolder1_RadDock5002_T_dynDivCode" class="tabFloatHead"><a class='hyperRadDockLinks' href='Audit_Trail.aspx?ToolID=5002'>Audit Trail</a></DIV><span class="rdCommands"><a class="rdCollapse" title="Collapse"></a></span>
                </div><div id="ctl00_ContentPlaceHolder1_RadDock5002_C" class="rdContent">
                    <span><div class='tabFloats'>Run audits of WIT tool activity.</div></span>
                </div></div><div class="rdTopBorder"><!-- --></div><div class="rdBottomBorder"><!-- --></div><input id="ctl00_ContentPlaceHolder1_RadDock5002_ClientState" name="ctl00_ContentPlaceHolder1_RadDock5002_ClientState" type="hidden" />
            </div><div id="ctl00_ContentPlaceHolder1_RadDock5009" class="raddock RadDock_Default2006 rdVariableHeight " style="width:100%;class:tabFloatsHead;width:420px;">
                <div class="rdSideBorders rdHTitlebar"><div id="ctl00_ContentPlaceHolder1_RadDock5009_T" class="rdTitlebar">
                    <DIV id="ctl00_ContentPlaceHolder1_RadDock5009_T_dynDivCode" class="tabFloatHead"><a class='hyperRadDockLinks' href='Open_Tool.aspx?ToolID=5009'>Call Overflow</a></DIV><span class="rdCommands"><a class="rdCollapse" title="Collapse"></a></span>
                </div><div id="ctl00_ContentPlaceHolder1_RadDock5009_C" class="rdContent">
                    <span><div class='tabFloats'>Overflows one type of call volume to another group of agents based on availability parameter.</div></span>
                </div></div><div class="rdTopBorder"><!-- --></div><div class="rdBottomBorder"><!-- --></div><input id="ctl00_ContentPlaceHolder1_RadDock5009_ClientState" name="ctl00_ContentPlaceHolder1_RadDock5009_ClientState" type="hidden" />
            </div><div id="ctl00_ContentPlaceHolder1_RadDock5026" class="raddock RadDock_Default2006 rdVariableHeight " style="width:100%;class:tabFloatsHead;width:420px;">
                <div class="rdSideBorders rdHTitlebar"><div id="ctl00_ContentPlaceHolder1_RadDock5026_T" class="rdTitlebar">
                    <DIV id="ctl00_ContentPlaceHolder1_RadDock5026_T_dynDivCode" class="tabFloatHead"><a class='hyperRadDockLinks' href='Open_Tool.aspx?ToolID=5026'>Exit State Routing</a></DIV><span class="rdCommands"><a class="rdCollapse" title="Collapse"></a></span>
                </div><div id="ctl00_ContentPlaceHolder1_RadDock5026_C" class="rdContent">
                    <span><div class='tabFloats'>Control the routing skill for various IVR exit states.</div></span>
                </div></div><div class="rdTopBorder"><!-- --></div><div class="rdBottomBorder"><!-- --></div><input id="ctl00_ContentPlaceHolder1_RadDock5026_ClientState" name="ctl00_ContentPlaceHolder1_RadDock5026_ClientState" type="hidden" />
            </div><div class="raddock RadDock_Default rdPlaceHolder" id="ctl00_ContentPlaceHolder1_RadDockZone3_D" style="display:none;">
                <!-- -->




  8. Pero
    Admin
    Pero avatar
    1156 posts

    Posted 30 Mar 2010 Link to this post

    Hello Erik,

    Could you please open a support ticket, and send a sample project that demonstrates the problem? With the current information about the project, I have a feeling that I am missing something important.

    In general, when any of the RadControls (for ASP.NET AJAX) are placed within a container that has display: none, and then becomes visible, the RadControl.repaint() method should be invoked. Basically, the dock.repaint() method should fix the issue, when the zone becomes visible.

    I am looking forward to receiving the sample code.

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