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

Empty zone higlighting flaw

2 Answers 65 Views

Dock

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

2 Answers, 1 is accepted

Accepted

answered on 12 Mar 2010, 04:42 PM

Hi Yeroon,

This is not a problem with our control, but expected behavior. When the DockZone is empty and the user is about to place a dock inside the zone is "highlighted" instead of showing the dock's placeholder. The placeholder is shown when there is more than one dock in the zone.

If you want to show the placeholder in the case when the zone is empty use the following workaround:

<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>

<!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">

<head id="Head1" runat="server">

<title></title>

</head>

<body>

<form id="form1" runat="server">

<asp:ScriptManager ID="ScriptManager1" runat="server">

</asp:ScriptManager>

<script type="text/javascript">

///Show the placeholder even if the DockZone is empty

Telerik.Web.UI.RadDockZone.prototype._showPlaceholder = function(dock, location)

{

this._repositionPlaceholder(dock.get_element(), location);

var dockBounds = dock._getBounds();

var placeholderMargin = dock._getMarginBox(this._placeholder);

var placeholderBorder = dock._getBorderBox(this._placeholder);

var horizontal = this.get_isHorizontal();

var placeholderStyle = this._placeholder.style;

placeholderStyle.height = dockBounds.height - (placeholderMargin.vertical + placeholderBorder.vertical) + "px";

placeholderStyle.width = this.get_fitDocks() && !horizontal ? "100%" : dockBounds.width - (placeholderMargin.horizontal + placeholderBorder.horizontal) + "px";

placeholderStyle.display = "block";

return;

}

</script>

<div>

<telerik:RadDockLayout ID="RadDockLayout1" runat="server">

<telerik:RadDockZone ID="RadDockZone1" runat="server" MinHeight="300px" Width="300px"

Style="float: left; margin-right: 15px;">

<telerik:RadDock ID="RadDock1" runat="server" Width="300px" Title="RadDock-Title">

<ContentTemplate>

<br />

CONTENT

<br />

</ContentTemplate>

</telerik:RadDock>

</telerik:RadDockZone>

<telerik:RadDockZone ID="RadDockZone2" runat="server" MinHeight="300px" Width="300px"

Style="float: left;">

<telerik:RadDock ID="RadDock2" runat="server" Width="300px" Title="RadDock-Title">

<ContentTemplate>

<br />

CONTENT

<br />

</ContentTemplate>

</telerik:RadDock>

<telerik:RadDock ID="RadDock3" runat="server" Width="300px" Title="RadDock-Title">

<ContentTemplate>

<br />

CONTENT

<br />

</ContentTemplate>

</telerik:RadDock>

<telerik:RadDock ID="RadDock4" runat="server" Width="300px" Title="RadDock-Title">

<ContentTemplate>

<br />

CONTENT

<br />

</ContentTemplate>

</telerik:RadDock>

</telerik:RadDockZone>

</telerik:RadDockLayout>

</div>

</form>

</body>

</html>

All the best,
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.

Product Bundles

DevCraft

Web

Mobile

Document Management

Desktop

Reporting & Mocking

Automated Testing

CMS

UI/UX Tools

Debugging

Free Tools

Support and Learning

Productivity and Design Tools

Empty zone higlighting flaw

2 Answers, 1 is accepted