Telerik Forums / UI for ASP.NET AJAX Forum / Dock /

Moving Multiple Windows At Once

Telerik UI for ASP.NET AJAX
Resources Buy Try

2 posts, 0 answers

Pete Cleary

3 posts

Member since:
Dec 2005

Posted 21 Nov 2007 Link to this post

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.

Petya
Admin

869 posts

Posted 26 Nov 2007 Link to this post

Hi Pete Cleary,

We reviewed your code and you have gone so far quite well. The shift button selection I guess means pressing the Shift button and selecting docks one at a time which is actually just like clicking on the toggle command button one at a time. For the drop area - currently we have no suggestions as to how this could be achieved and as far as I tested here it is not achieved either. If you have any other questions, feel free to contact us again.

All the best,
Petya
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center

Moving Multiple Windows At Once

Pete Cleary

Petya