Swap Control

Swap

Click here to see Swap Demo.

JSControlsTags Swap is able to manage several lists and swap items between there. This control is able to :

  • select several items to swap with mouse click or keyup selection. You can use shift/control key to select several items.
  • swap items with drag/drop or with button/href HTML element.
  • select All/select None with button/href HTML element.
  • manage order of insertion after a swap (order by innerHTML, by Id, insert before/after).

This control generate UL/LI for items comming from an HTML select options. It use Draggable control of scriptaculous, to manage drag/drop. To use Swap control, you must populate an HTML select and attach your select with Swap to generate UL/LI.

jscontrols:swap

jscontrols:swap taglib manage swap on client side. Here JSP code of this example :

  <!-- First List where Swap control generate UL/LI-->
  <div id="divId1" ></div>
  <!-- Second List where Swap control generate UL/LI -->
  <div id="divId1" ></div>

  <!-- HTML select which is used by Swap to populate list with UL/LI-->
  <select name="select1" id="select1" multiple="true" >
    <option value="item1_1" >Item 1 from first list.</option>
    ...
  </select>
  <select name="select2" id="select2" multiple="true" >
    <option value="item2_1" >Item 1 from second list.</option>
    ...
  </select>

<!- Swap definition for the first list, which accept items from second list --> 
<jscontrols:swap source="divId1"
                 items="select1"
                 styleClassList="list1"
                 selectAllListAction="selectAllList1"
                 selectNoneListAction="selectNoneList1" >
                 <jscontrols:accept source="divId2"                                              
                                    swapAction="swapList2ToList1"  />
</jscontrols:swap>      

<!- Swap definition for the sesond list, which accept items from first list --> 
<jscontrols:swap source="divId2"
                 items="select2"
                 styleClassList="list2"
                 selectAllListAction="selectAllList2"
                 selectNoneListAction="selectNoneList2" >
                 <jscontrols:accept source="divId1"                                              
                                    swapAction="swapList1ToList2"  />
</jscontrols:swap>

jscontrols:swap define swap property for a list.

ParameterDescriptionRequired
varName of the JavaScript object swap created.no
sourceHTML Div HTML container with contains items (LI).yes
itemsHTML select which is used by swap to populate the list with UL/LIyes
styleClassListStyle class for the list generated with UL/LIyes
selectAllListActionHTML element (Id of HTML href, button ...) used to select all items of the list on click event.no
selectNoneListActionHTML element (Id of HTML href, button ...) used to select none items of the list on click event.no
enabledtrue if swap list must be enabled (stop Drag/Drop and selection of items) and false otherwise. By default swap list is enabled..no
onEnableEvent launched when swap control is disabled/enabled.no
dragDropEnabledtrue if drag/drop is enabled and false otherwise. By default drag/drop is enabled.no
onSwapCompleteEvent launched when swap items is finished.no

To define items that list can accept, use jscontrols:accept for each list swap control must accept.

ParameterDescriptionRequired
sourceHTML Div HTML container with contains items (LI).yes
swapActionHTML item (HTML href, button ...) used to swap items of the first list to second.no

Here an example of Swap defintion for a list (divId1) which must accept items from two list (divId2 and divId3)

  <jscontrols:swap source="divId1"
                   items="select1"
                   styleClassList="list1"
                   selectAllListAction="selectAllList1"
                   selectNoneListAction="selectNoneList1" >
                   <jscontrols:accept source="divId2"                                            
                                      swapAction="swapList2ToList1"  />
                   <jscontrols:accept source="divId3" />                                        
  </jscontrols:swap>