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

Collapse all docks in a dock zone excepted the dock that fired the OnClientCommand ExpandCollapse

12 Answers 142 Views

Dock

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

12 Answers, 1 is accepted

answered on 21 Jun 2011, 07:47 AM

Hello Marc Schrader,

You can solve your problem by creating custom command, which expands the current RadDock and collapses the others. The controls, expanding the RadDocks will function in a similar way. This can be achieved through client-side event handlers and manipulating the collapsed state with methods of the RadDock Client Object.

Below you can find sample, demonstrating this:

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

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

<title></title>

</head>

<body>

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

<div>

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

</asp:ScriptManager>

<script language="javascript" type="text/javascript">

var Docks = [];

function OnClientInitialize(dock, args) {

Docks[Docks.length] = dock;

}

function CustomCommand(dock, args) {

if (args.Command.get_name() == "Expand/Collapse") {

ChangeDockState(dock, !dock.get_collapsed());

}

function ExpandDock1(sender, args) {

var dock = $find("<%= RadDock1.ClientID %>");

ChangeDockState(dock, false);

}

function ExpandDock2(sender, args) {

var dock = $find("<%= RadDock2.ClientID %>");

ChangeDockState(dock, false);

}

function ChangeDockState(dock, state) {

dock.set_collapsed(state);

for (var i = 0; i < Docks.length; i++) {

var newDock = Docks[i];

if (newDock != dock) {

newDock.set_collapsed(true);

newDock.updateClientState();

}

</script>

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

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

<telerik:RadDock ID="RadDock1" runat="server" Width="300px" Text="RadDock1 Content"

Collapsed="true" OnClientInitialize="OnClientInitialize">

<Commands>

<telerik:DockCloseCommand />

<telerik:DockCommand AutoPostBack="false" Name="Expand/Collapse" OnClientCommand="CustomCommand" />

</Commands>

</telerik:RadDock>

<telerik:RadDock ID="RadDock2" runat="server" Width="300px" Text="RadDock2 Content"

Collapsed="true" OnClientInitialize="OnClientInitialize">

<Commands>

<telerik:DockCloseCommand />

<telerik:DockCommand AutoPostBack="false" Name="Expand/Collapse" OnClientCommand="CustomCommand" />

</Commands>

</telerik:RadDock>

</telerik:RadDockZone>

</telerik:RadDockLayout>

<telerik:RadButton ID="ExpandRadDock1" runat="server" Text="Expand RadDock 1" AutoPostBack="false" OnClientClicking="ExpandDock1">

</telerik:RadButton>

<telerik:RadButton ID="ExpandRadDock2" runat="server" Text="Expand RadDock 2" AutoPostBack="false" OnClientClicking="ExpandDock2">

</telerik:RadButton>

<br /><br />

<asp:Button ID="Button1" runat="server" Text="Submit" />

</div>

</form>

</body>

</html>

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

answered on 21 Jun 2011, 11:01 AM

Hello Slav,

thanks for your response. But it still doesnt fix my issue.This is my code:

function onSelectedIndexChanged(sender, eventArgs) {

itemID = eventArgs.get_item().get_value();

getData(itemID );

ExpandDock2(null, null);

}

var Docks = [];

function OnClientInitialize(dock, args) {

Docks[Docks.length] = dock;

}

function ExpandDock1(sender, args) {

var dock = $find("<%= RadDock1.ClientID %>");

ChangeDockState(dock, false);

}

function ExpandDock2(sender, args) {

var dock = $find("<%= RadDock2.ClientID %>");

ChangeDockState(dock, false);

}

function ExpandDock3(sender, args) {

var dock = $find("<%= RadDock3.ClientID %>");

ChangeDockState(dock, false);

}

function ChangeDockState(dock, state) {

for (var i = 0; i < 3; i++) {

var newDock = Docks[i];

if (newDock != dock) {

newDock.set_collapsed(true);

newDock.updateClientState();

}

function CustomCommand(dock, args) {

if (args.Command.get_name() == "ExpandCollapse") {

ChangeDockState(dock, !dock.get_collapsed());

}




When the selectedIndexChanged event will be fired the expected docks expands.

Now i want to expand another dock. i.e. Raddock1 by clicking the expand button.

CustomCommand calls ChangeDockState and change each state of the given docks.

While changing the state the function call itself recursively.



If i put the line 

dock.set_collapsed(state);

as the first loop call into the function the explorer crashes as well...



Do you have any suggestion?



Thank in advance.

Marc

answered on 21 Jun 2011, 02:35 PM

RadDock-Single-Expand.rar

Hello Marc Schrader,

Your browser crashes because you call the function ChangeDockState on ExpandCollapse command. ChangeDockState triggers collapse of RadDock and this causes recursion. In the example I have added in my first post I used custom command called "Expand/Collapse" which removes that problem. From the attached demo project you can gain full understanding of the implementation.

If you are still unable to find solution, please send a fully working project.

Greetings,
Slav
the Telerik team

answered on 12 Apr 2013, 03:28 PM

Without adding an additional custom button to the RadDock title bar, simply override the built-in ExpandCollapse functionality to maintain one RadDock open per RadDockZone.

I ended up attaching the 'CustomCommand' to each RadDock in OnClientInitialize() and threw away the pre-built ExpandCollapse.

This works before I open a RadWindow
//for limited the expansion of the docks
var Docks = [];

function OnClientInitialize(dock, args) {
Docks[Docks.length] = dock;
var _dock = dock;
var _args = args;

$(".rdCommands li a").each(function (intIndex) {
var index = intIndex;
$(this).click(function () {
CustomCommand(_dock, index);
});
});

}

function CustomCommand(dock, intIndex) {
for (var i = 0; i < Docks.length; i++) {
if (i == 0) {
if (i != intIndex)
Docks[i].set_collapsed(true);
else {
Docks[i].set_collapsed(false);
}
}
else {
if(dock != Docks[i])
Docks[i].set_collapsed(true);
}
}
return;
}

Strange behavior on the first RadDock in a DockZone required special handling.

answered on 17 Apr 2013, 09:40 AM

Hello Michael,

The CollapseExpand built-in command is tightly incorporated with the entire functionality of RadDock and you cannot easily modify its behavior. If I understand the applied modification correctly, you have simply handled the mouse click event of the command's element and trigger the 'CustomCommand' function which is incorrect.

If you need to customize RadDock behavior to have a single expanded dock in a dock zone you should create a custom command to achieve this behavior, as demonstrated in the example provided by Slav in his previous reply.

Also, an example of how to implement custom command is available in the following live demo:
Dock - Commands

Greetings,
Dobromir
the Telerik team

If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.

answered on 17 Apr 2013, 07:25 PM

"The CollapseExpand built-in command is tightly incorporated with the entire functionality of RadDock and you cannot easily modify its behavior."

That's the real answer Dobromir. There isn't a way to modify it easily without adding an additional button (RE: Slav's custom command example) which isn't going to work for end user experience.

IMO, there should be a CollapseExpandOne built-in command added to the core RadDock functionality to support this - which presents an identical UI to the end user and simply modifies the behavior.

Until then, handling the click event of the command element is a viable work around and I find it presumptuous to deem "incorrect" when it works fine.

answered on 22 Apr 2013, 02:50 PM

Hello Michael,

The approach you have implemented alters the default behavior of the CollapseExpand command. Such customizations of the RadControls for ASP.NET AJAX are out of the scope of our support service.

The example that demonstrates the custom command implementation should help you expand only one RadDock at a time. If there is a problem with incorporating it in your actual project, please let me know what is not meeting your requirements so that I can help you achieve the desired effect if possible.

Kind regards,
Slav
the Telerik team

answered on 28 Mar 2014, 06:13 PM

hello

similar to the above request, I have a need to create a web site which offers users a number of options. they can chose only 1 option and then need to enter additional information related to that options, for example, could have a drop down list or option radio button with these:
Credit Card
Purchase Order
Direct Debit

Then the detail control will prompt for :

Credit Card name
Credit card number

or
Purchase Order number etc

I was thinking of using a Dock Zone with docks for Credit Card, and then some code to link the dropdown list to the docks. Or maybe have a tick box in the dock heading?

or should I be using a different control?

thanks for any advise

graham

answered on 02 Apr 2014, 05:03 PM

Hello Graham,

Note that you can achieve the same effect simply by loading a different web user control, depending on the first set of options. If you want just to dynamically change predefined content, you can use only user controls. However, if you want to drag this content and place it in predefined zones, you can use the RadDock control for this purpose.

The demo My Portal shows a similar scenario with drop downs for selecting a RadDock with different content and then adding it on the page: http://demos.telerik.com/aspnet-ajax/dock/examples/myportal/defaultcs.aspx. You can modify it according to your needs, for example add the dock when a new option is selected from the drop down, instead of clicking on a button.

If this is not what you are after, please describe your scenario in greater detail so that I can help you accordingly.

Regards,
Slav
Telerik

Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

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

Collapse all docks in a dock zone excepted the dock that fired the OnClientCommand ExpandCollapse

12 Answers, 1 is accepted