AspectSortable

Modified: 2008/11/14 11:46 by Pavol - Categorized as: Extensions
Hi, this is just small contribution for Gaia community. It's needed to include these two files (in attachment) into your Gaia Widgets library, so it's not for everyone. But if anybody's interested here's what it look like:

AspectSortable with Gaia extended panels

AspectSortable with Gaia extended panels

















In fact it's Scriptaculous Sortable converted to Aspect. You can see demo here. It's similar to AspectDraggable and AspectDroppable, but here you can see real time what the result looks like.

For more info about properties look here this aspect contains most of the important properties. E.g. you can set Handles, more AspectSortables that can exchange elements between themselves, restrict path movement and more. Just check constructors.

Edit

Example ASPX markup


<gaia:Panel ID="con" runat="server" style=" float:left; width:200px;">
        <gaia:ExtendedPanel runat="server" ID="ext11" Caption="Panel1 - ext1" CssClass="gaiax">
some text... some text...</gaia:ExtendedPanel>
        <gaia:ExtendedPanel runat="server" ID="ext12" Caption="Panel1 - ext2" CssClass="gaiax">
some text... some text...</gaia:ExtendedPanel>
        <gaia:ExtendedPanel runat="server" ID="ext13" Caption="Panel1 - ext3" CssClass="gaiax">
some text... some text...</gaia:ExtendedPanel>
        <gaia:Panel ID="neco" runat="server" CssClass="non" style=" background-color:Aqua;">
non-draggable content</gaia:Panel>
   </gaia:Panel>
    <gaia:Panel ID="con2" runat="server" style="float:left; width:200px; margin-left:30px;">
        <gaia:ExtendedPanel runat="server" ID="ext21" Caption="Panel2 - ext1" CssClass="gaiax">
some text... some text...</gaia:ExtendedPanel>
        <gaia:ExtendedPanel runat="server" ID="ext22" Caption="Panel2 - ext2" CssClass="gaiax">
some text... some text...</gaia:ExtendedPanel>
        <gaia:ExtendedPanel runat="server" ID="ext23" Caption="Panel2 - ext3" CssClass="gaiax">
some text... some text...</gaia:ExtendedPanel>            
       </gaia:Panel>

Edit

Example PageLoad C# markup


con.Aspects.Add(new AspectSortable(null, null, "gaiax-extendedpanel-top", "gaiax-extendedpanel", 
                AspectSortable.Constraint.vertical, AspectSortable.OverLap.vertical,
                new string[] { con.ClientID, con2.ClientID }, false, "dropZone"));
con2.Aspects.Add(new AspectSortable(null, null, "gaiax-extendedpanel-top", null, 
                AspectSortable.Constraint.none, AspectSortable.OverLap.vertical,
                new string[] { con.ClientID, con2.ClientID}, false, "dropZone"));

Edit

Step by step guide to include AspectSortable

1. Download the attachment, unzip it and you'll get two files AspectSortable.cs and AspectSortable.js

2. Open your Gaia Webwidgets Glory project

3. Copy AspectSortable.cs to Gaia.WebWidgets project, Aspects directory

4. Copy AspectSortable.js to Gaia.WebWidgets project, Scripts directory

5. Make AspectSortable.js an Embedded resource in Properties window

That's it. You should be able to add this aspect into Aspects collection just as any other aspect.

Edit

Cool Tankut contribution

If you're interested in Drop Zone Marker (the CssClass of the empty rectangle where the element is moving over), look in here, download Patch for Scriptaculous 1.8.0 and overwrite existing dragdrop.js file in LibraryScripts directory. That's all.

Edit

What to be aware of

Scriptaculous offers an OnUpdate event so when the Sortable element is dropped, the event fires. You can catch it in Sorted event on the server. But OnUpdate event only fires if this: /^_\-(?:A-Za-z0-9\-\_*)_(.*)$/ is the pattern of the IDs elements in Sortable container. Simply every id in the Sortable container should contain underscore, if not the event will not fire. Since we all use ASP.NET and you will add this Aspect on e.g. Panel which contains another panels there should no problem with that. If Sorted event is not firing make sure your ids are all right.

Another thing is: your Sorted event returns string collection of actual order of elements. But Scriptaculous returns the collection of strings where the single string is the last alphanumeric character after the last underscore! So if you have clientID of the element form1_panel1_panel2_Sortable_item1 - it will return item1. So don't use underscores in your element ids if you want to get right IDs on the server.

Edit

Update 2008-11-14

1. Removed bug when tried to ForceAnUpdate the container the client error message appeared. Now it's ok
2. When moving elements across the sortables two callbacks were done. Now the server is called only once with 4 parameters:
Container1 - clientID of container1
Container1Elements - IDs of elements in container1
Container2 - clientID of container2
Container2Elements - IDs of elements in container2

Pavol

ScrewTurn Wiki version 2.0.33. Some of the icons created by FamFamFam.