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

Multiple Expand/Collapse Commands

1 Answer 131 Views

Dock

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

1 Answer, 1 is accepted

answered on 13 Jun 2011, 12:17 PM

Hi Mark,

This functionality is not supported by the RadDock out-of-the-box, but can be easily achieved with a bit of custom javascript code. For your convenience I have implemented a simple project showing this:

<!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 runat="server">

<title></title>

<style type="text/css">

.RadDock .rdTitleBar

{

text-align: left;

}

.RadDock .rdCenter .rdCommands

{

float: left !important;

}

.RadDock .rdTitleBar em

{

float: right !important;

}

</style>

</head>

<body>

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

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

</asp:ScriptManager>

<script type="text/javascript">

function ExpandCollapse(sender)

{

var dock = $find("RadDock1");

dock.set_collapsed(!dock.get_collapsed());

SwitchStates(dock.get_collapsed(), sender);

}

function OnClientInitialize(dock, args)

{

var spanExpand = $get("spanExpand");

SwitchStates(dock.get_collapsed(), spanExpand);

}

function SwitchStates(isCollapsed, spanExpand)

{

if (isCollapsed)

{

spanExpand.className = "rdExpand";

spanExpand.title = "Expand";

}

else

{

spanExpand.className = "rdCollapse";

spanExpand.title = "Collapse";

}

</script>

<div>

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

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

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

<TitlebarTemplate>

<span class="rdCommands" style="float: right !important; display: block;"><a><span

id="spanExpand" title="Collapse" onclick="ExpandCollapse(this);" class="rdCollapse">

</span></a></span><em>RadDock-Title</em>

</TitlebarTemplate>

<ContentTemplate>

Dock's Content

</ContentTemplate>

</telerik:RadDock>

</telerik:RadDockZone>

</telerik:RadDockLayout>

</div>

</form>

</body>

</html>

Greetings,
Pero
the Telerik team

Browse the vast support resources we have to jump start your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.