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

Moving Multiple Windows At Once

1 Answer 96 Views

Dock

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

Pete Cleary asked on 21 Nov 2007, 02:15 PM

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.

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

Moving Multiple Windows At Once

1 Answer, 1 is accepted