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?
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;
}
6 Answers, 1 is accepted
0
Erik
Top achievements
Rank 1
Rank 1
answered on 11 Mar 2010, 10:31 PM
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.
0
Hello Erik,
Try to invoke repaint() method for each RadDock in the zone once it goes visible, e.g.
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.
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.
0
Erik
Top achievements
Rank 1
Rank 1
answered on 19 Mar 2010, 04:04 PM
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();
});
});
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();
});
});
0
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.
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.
0
Erik
Top achievements
Rank 1
Rank 1
answered on 25 Mar 2010, 04:52 PM
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;">
<!-- -->
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;">
<!-- -->
0
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.
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.