<%@ 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> |
|