I was looking for a solution where I can select multiple RadDock's in the interface and drag them into a new RadDockZone.
I found another post where someone placed this as a feature request and gave an example to another site with a similar effect (see post http://www.telerik.com/community/forums/thread/b311D-cmakb.aspx).
I have added some javaScript to the standard RadDock client API events to automaticaly move selected RadDocks. Each RadDock has a toggle control when selected the RadDock is added or removed from a javaScript array. On dropping a RadDock a script is launched to loop through the array and move any selected RadDocks. The dropped RadDock toggle command is reset and the array cleared.
Below is the code for a test page. It contains no possition storage but should be useful as an example.
The downside of this process is the selection process does not allow for control or shift button selection and the highlighted drop area only accounts for the current dragged item.
I hope it helps.
I found another post where someone placed this as a feature request and gave an example to another site with a similar effect (see post http://www.telerik.com/community/forums/thread/b311D-cmakb.aspx).
I have added some javaScript to the standard RadDock client API events to automaticaly move selected RadDocks. Each RadDock has a toggle control when selected the RadDock is added or removed from a javaScript array. On dropping a RadDock a script is launched to loop through the array and move any selected RadDocks. The dropped RadDock toggle command is reset and the array cleared.
Below is the code for a test page. It contains no possition storage but should be useful as an example.
<%@ Page Language="C#" %> |
<%@ 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>Moving Multiple Windows At Once</title> |
<style type="text/css"> |
.mstPrimaryState |
{ |
background-color:#ccc; |
width:20px; |
} |
.mstAlternateState |
{ |
background-color:red; |
width:20px; |
} |
</style> |
</head> |
<body> |
<form id="form1" runat="server"> |
<asp:scriptmanager id="ScriptManager" runat="server" /> |
<telerik:raddocklayout runat="server" id="RadDockLayout1"> |
<telerik:raddockzone runat="server" id="RadDockZone1" orientation="Vertical" minheight="300px" width="200px" Style="float:left;margin-right:20px;"> |
<telerik:RadDock runat="server" UniqueName="RadDock1" ID="RadDock1" Width="200px" Title="RadDock 1" Text="RadDock 1" DockMode="Docked" AutoPostBack="false" CommandsAutoPostBack="false" OnClientDockPositionChanged="MultipleMove"> |
<commands> |
<telerik:docktogglecommand autopostback="true" text="Not in the select group" alternatetext="In the select group" |
cssclass="mstPrimaryState" alternatecssclass="mstAlternateState" state="primary" |
name="MultipleSelectToggle" onclientcommand="OnMultipleSelectToggleCommand" /> |
</commands> |
</telerik:RadDock> |
<telerik:RadDock runat="server" UniqueName="RadDock2" ID="RadDock2" Width="200px" Title="RadDock 2" Text="RadDock 2" DockMode="Docked" AutoPostBack="false" CommandsAutoPostBack="false" OnClientDockPositionChanged="MultipleMove"> |
<commands> |
<telerik:docktogglecommand autopostback="true" text="Not in the select group" alternatetext="In the select group" |
cssclass="mstPrimaryState" alternatecssclass="mstAlternateState" state="primary" |
name="MultipleSelectToggle" onclientcommand="OnMultipleSelectToggleCommand" /> |
</commands> |
</telerik:RadDock> |
<telerik:RadDock runat="server" UniqueName="RadDock3" ID="RadDock3" Width="200px" Title="RadDock 3" Text="RadDock 3" DockMode="Docked" AutoPostBack="false" CommandsAutoPostBack="false" OnClientDockPositionChanged="MultipleMove"> |
<commands> |
<telerik:docktogglecommand autopostback="true" text="Not in the select group" alternatetext="In the select group" |
cssclass="mstPrimaryState" alternatecssclass="mstAlternateState" state="primary" |
name="MultipleSelectToggle" onclientcommand="OnMultipleSelectToggleCommand" /> |
</commands> |
</telerik:RadDock> |
<telerik:RadDock runat="server" UniqueName="RadDock4" ID="RadDock4" Width="200px" Title="RadDock 4" Text="RadDock 4" DockMode="Docked" AutoPostBack="false" CommandsAutoPostBack="false" OnClientDockPositionChanged="MultipleMove"> |
<commands> |
<telerik:docktogglecommand autopostback="true" text="Not in the select group" alternatetext="In the select group" |
cssclass="mstPrimaryState" alternatecssclass="mstAlternateState" state="primary" |
name="MultipleSelectToggle" onclientcommand="OnMultipleSelectToggleCommand" /> |
</commands> |
</telerik:RadDock> |
<telerik:RadDock runat="server" UniqueName="RadDock5" ID="RadDock5" Width="200px" Title="RadDock 5" Text="RadDock 5" DockMode="Docked" AutoPostBack="false" CommandsAutoPostBack="false" OnClientDockPositionChanged="MultipleMove"> |
<commands> |
<telerik:docktogglecommand autopostback="true" text="Not in the select group" alternatetext="In the select group" |
cssclass="mstPrimaryState" alternatecssclass="mstAlternateState" state="primary" |
name="MultipleSelectToggle" onclientcommand="OnMultipleSelectToggleCommand" /> |
</commands> |
</telerik:RadDock> |
</telerik:raddockzone> |
<telerik:raddockzone runat="server" id="RadDockZone2" orientation="Vertical" minheight="300px" width="200px" Style="float:left;margin-right:20px;"> |
</telerik:raddockzone> |
<telerik:raddockzone runat="server" id="RadDockZone3" orientation="Horizontal" minheight="300px" width="200px" Style="float:left;margin-right:20px;"> |
</telerik:raddockzone> |
</telerik:raddocklayout> |
<script type="text/javascript"> |
var selectedDocks = new Array(); |
function OnMultipleSelectToggleCommand(dock, args) |
{ |
if(args.Command.get_State() == 1) |
{ |
args.Command.set_State(2); |
selectedDocks[selectedDocks.length] = dock.get_id(); |
} |
else |
{ |
var removeItem = -1; |
for(x=0;x<selectedDocks.length;x++) |
{ |
if(selectedDocks[x] == dock.get_id()) |
{ |
removeItem = x; |
break; |
} |
} |
if(removeItem > -1) selectedDocks.splice(removeItem, 1); |
args.Command.set_State(1); |
} |
args.set_cancel(true); |
} |
function MultipleMove(dock, args) |
{ |
selectedDocks[selectedDocks.length] = dock.get_id(); |
var dropZoneId = dock.get_parent().get_id(); |
var dropZone = $find(dropZoneId); |
if(dropZone != null) |
{ |
var dropIndex = dock.get_index(); |
var removeDocks = new Array(); |
for(x=0;x<selectedDocks.length;x++) |
{ |
removeDocks[x] = selectedDocks[x]; |
var tempDock = $find(selectedDocks[x]); |
if(tempDock != null) |
{ |
if(selectedDocks[x] != dock.get_id()) |
{ |
dropIndex += 1; |
dropZone.dock(tempDock, dropIndex); |
} |
tempDock.getCommand('MultipleSelectToggle').set_State(1); |
} |
} |
selectedDocks.length = 0; |
} |
} |
</script> |
</form> |
</body> |
</html> |
The downside of this process is the selection process does not allow for control or shift button selection and the highlighted drop area only accounts for the current dragged item.
I hope it helps.