When the browser or the page, on which a RadDock is placed, is configured with a culture that uses comma-separated values and you set the Width, Height, Top, Left properties with such a value, an exception will be thrown.
The CSS class "RadDock_Default" will be applied to the placeholder of a RadDock, regardless of the built-in skin that is specified for the control.
It should not be possible to add docks in a RadDockZone, the property AllowedDocks of which does not include the IDs of the included docks.
The RadDock in a vertical RadDockZone is not expanded correctly the first time when it is collapsed by default and its Height is set. If Resizable is set to true, the dock will never expand.
When some content is entered in a RadDock, the project is closed, opened again and new elements are added in the content via the Visual Studio's designer, the elements that are included after the reloading of the project will disappear from the designer, after editing the dock.
When a RadDock without having its height property set is collapsed and then expanded, an explicit height is set to its wrapper as well as to its content wrapper, so that it cannot be resized. The workaround is to remove both heights on DockExpandCollapseCommand: ASPX: <telerik:RadDock runat="server" ID="RadDock1" RenderMode="Classic" Resizable="true"> <ContentTemplate> <asp:Button ID="btn" runat="server" Text="Click me" OnClientClick="toggleVisibility(); return false;" /> <div id="divExpand" style="display: none; height: 400px;"> Expanded </div> </ContentTemplate> <Commands> <telerik:DockExpandCollapseCommand OnClientCommand="DockExpandCollapseCommand" /> </Commands> </telerik:RadDock> JavaScript: <telerik:RadCodeBlock ID="RadCodeBlock1" runat="server"> <script type="text/javascript"> function toggleVisibility() { var divExpand = $get('divExpand'); if (divExpand.style.display == 'none') { divExpand.style.display = 'block'; } else { divExpand.style.display = 'none'; } } function DockExpandCollapseCommand(sender, args) { if (!sender.get_collapsed()) { sender.get_contentContainer().style.height = ""; sender.get_element().style.height = ""; } } </script> </telerik:RadCodeBlock>
As of Q1 2016 the elasticity of RadDock is not behaving properly due to some fixed font styles like: .RadDock .rdCommandButton { font-size: 16px; } Possible workaround: div.RadDock .rdCommandButton { font-size: 1.2em; }
For the time being you can use the following workaround: ASPX: <div style="border: 1px solid red; height: 300px; width: 400px; overflow: scroll;"> <div style="border: 1px solid green; height: 500px; width: 200px;"> <telerik:RadDockZone ID="RadDockZone1" runat="server" RenderMode="Lightweight"> <telerik:RadDock ID="RadDock1" runat="server" Resizable="true" RenderMode="Lightweight"> <ContentTemplate> <div style="border: 1px solid blue; height: 100px;"></div> </ContentTemplate> </telerik:RadDock> </telerik:RadDockZone> </div> </div> <script> var Browser = Telerik.Web.Browser; $ = $telerik.$; Telerik.Web.UI.RadDock.prototype._initResizableWidget = function() { if(this._resizableWidget && this._resizableWidget.dispose) this._resizableWidget.dispose(); if(!this._resizable) return; if(Browser.webkit) { //need to kickstart the css transform, because of a quirk in the layout engine of webkit/blink when it comes to position:static inside position:relative this._kickStartCssTransform(); } this._resizableWidget = new Telerik.Web.UI.Widgets.Resizable(this._element, { handles: this._getAvailableHandles(), appendHandleToElement: true }); if(this._renderingView) this._setResizeLimit(); if(this._collapsed) this._resizableWidget.hideHandles(); this._resizableWidget.add_resizeStart($.proxy(this._resizeStartHandler,this)); this._resizableWidget.add_resizing($.proxy(this._resizingHandler, this)); this._resizableWidget.add_resizeEnd($.proxy(this._resizeEndHandler, this)); } </script>
The client state of the dock changes, e.g, 80% to 80px. The pixel value affects the dock after a post back. Possible workaround: <telerik:RadDock runat="server" ID="dock2" Width="80%"> <ContentTemplate> <telerik:RadButton runat="server"></telerik:RadButton> </ContentTemplate> </telerik:RadDock> <script> Telerik.Web.UI.RadDock.prototype.saveClientState = function () { var DECIMAL_RADIX = 10; var dock = this; var width = dock.get_width(); var height = dock.get_height(); var top = dock.get_top() ? parseInt(dock.get_top(), DECIMAL_RADIX) : null; var left = dock.get_left() ? parseInt(dock.get_left(), DECIMAL_RADIX) : null; var expandedHeight = parseInt(dock._expandedHeight, DECIMAL_RADIX); var state = { Top: top, Left: left, DockZoneID: this.get_dockZoneID(), Collapsed: this.get_collapsed(), Pinned: this.get_pinned(), Resizable: this.get_resizable(), Closed: this.get_closed(), Width: width, Height: height, ExpandedHeight: expandedHeight, Index: this.get_index(), IsDragged: this.get_isDragged() }; return Sys.Serialization.JavaScriptSerializer.serialize(state); }; </script>
When the content container of RadDock is configured to be a drag handle via the following code dock.set_handle(dock.get_contentContainer()); a JavaScript error will be thrown if you call the 'clone' client-side function of the control dock.clone()
The animation of the RadDock control is causes performance issues under IE8 and due to that the expanding/collapsing and the docking/undocking functionalities are not working as expected. Disabling the animation resolves the issue: EnableAnimation="false"
The rounded corners of RadDock controls that are using the Silk or Glow skin cannot be disabled.
When you dock a resizable RadDock (Resizable="true") in a RadDockZone, its drag handle is displaced in Chrome, which prevents you from resizing it when there are multiple docked docks.
When you have a RadDockZone in a container with overflow, the RadDockZone contains resizable RadDocks (Resizable="true") and you start resizing one of the docks by clicking its bottom edge and dragging outside the border of the container with overflow, the resized dock will be positioned absolutely in the dock zone.
When you place input HTML elements in the content of a RadDock and open the the page with mobile Chrome for Android, you will not be able to use the input elements.
When you place a resizable RadDock control (Resizable="true") in a RadDockZone without specified size and you close the dock, a JavaScript error is thrown.
The RadDock control cannot be expanded when it is set in lightweight render mode and its property Collapsed is set to true. You can avoid this issue by setting the dock in collapsed state via its client-side API: <script type="text/javascript"> function OnClientInitialize(sender, args) { sender.set_collapsed(true); } </script> <telerik:RadDock runat="server" ID="RadDock1" OnClientInitialize="OnClientInitialize"> </telerik:RadDock>
Setting the RenderMode=Auto to a Dock control results in a JS error on the client. Expected is to choose the most appropriate render mode among the existing such.
The appearance of the RadDock's title bar is broken when the control is configured with any of the following built-in skins in a RTL layout.