=== modified file 'dhis-2/dhis-web/dhis-web-maintenance/dhis-web-maintenance-datadictionary/src/main/webapp/dhis-web-maintenance-datadictionary/multidimensional/addDataElementCategoryComboForm.vm'
--- dhis-2/dhis-web/dhis-web-maintenance/dhis-web-maintenance-datadictionary/src/main/webapp/dhis-web-maintenance-datadictionary/multidimensional/addDataElementCategoryComboForm.vm	2011-04-14 08:28:01 +0000
+++ dhis-2/dhis-web/dhis-web-maintenance/dhis-web-maintenance-datadictionary/src/main/webapp/dhis-web-maintenance-datadictionary/multidimensional/addDataElementCategoryComboForm.vm	2011-06-20 07:41:59 +0000
@@ -1,5 +1,19 @@
 <script type="text/javascript">
 	jQuery(document).ready(	function(){
+		jQuery("#availableList").dhisAjaxSelect({
+			source: "../dhis-web-commons-ajax-json/getDataElementCategories.action",
+			iterator: 'dataElementCategories',
+			sortSelected: false,
+			connectedTo: 'selectedList',
+			handler: function(item) {
+				var option = jQuery("<option />");
+				option.text( item.name );
+				option.attr( "value", item.id );
+
+				return option;
+			}
+		});
+
 		validation2( 'addDataElementCategoryComboForm', function( form ){ 
 			validateSelectedCategories( form );
 		}, {
@@ -32,38 +46,44 @@
   </table>
 
   <table id="dataElementCategorySelectionArea">
+    <col style="width: 450px"/>
+    <col/>
+    <col style="width: 450px"/>
+    <col/>
+
     <thead>
       <tr>        
 		<th>$i18n.getString( "available_categories" )</th>
-		<th></th>        
+		<th></th>
 		<th>$i18n.getString( "selected_categories" )</th>
       </tr>
     </thead>
+
     <tbody>
-      
       <tr>
         <td>
-          <select size="15" id="availableList" name="availableList" multiple="multiple" style="min-width:20em;height:20em" ondblclick="moveSelectedById(this.id, 'selectedList')">
-            #foreach ( $availableDataElementCategory in $dataElementCategories )
-              <option value="$availableDataElementCategory.id">$encoder.htmlEncode( $availableDataElementCategory.name )</option>
-            #end
-          </select>
-        </td>
-		<td valign="top" align="center">		 
-          <input type="button" value="&gt;" onclick="moveSelectedById('availableList', 'selectedList')" title="$i18n.getString( 'move_selected' )"/><br/>	
-		  <input type="button" value="&lt;" onclick="moveSelectedById('selectedList', 'availableList')" title="$i18n.getString( 'remove_selected' )"/><br/><br/>  	
+            <select id="availableList" name="availableList" multiple="multiple" style="height: 200px; width: 100%;"></select>
+        </td>
+
+        <td style="text-align:center">
+        	<input type="button" value="&gt;" title="$i18n.getString( 'move_selected' )" style="width:50px" onclick="dhisAjaxSelect_moveAllSelected( 'availableList' );"/><br/>
+            <input type="button" value="&lt;" title="$i18n.getString( 'remove_selected' )" style="width:50px" onclick="dhisAjaxSelect_moveAllSelected( 'selectedList' );"/><br/>
+			<input type="button" value="&gt;&gt;" title="$i18n.getString('move_all')" style="width:50px" onclick="dhisAjaxSelect_moveAll( 'availableList' );"/><br/>
+			<input type="button" value="&lt;&lt;" title="$i18n.getString('remove_all')" style="width:50px" onclick="dhisAjaxSelect_moveAll( 'selectedList' );"/>
+        </td>
+
+		<td>
+            <select id="selectedList" name="selectedList" multiple="multiple" style="height: 200px; width: 100%; margin-top: 22px;"></select>
+        </td>
+
+		<td>
 		  <a onclick="moveUpSelectedOption('selectedList')" title="$i18n.getString( 'move_up' )"><img src="../images/move_up.png" style="border:0;cursor:pointer" alt="$i18n.getString( 'move_up' )"/></a><br/><br/>
 		  <a onclick="moveDownSelectedOption('selectedList')" title="$i18n.getString( 'move_down' )"><img src="../images/move_down.png" style="border:0;cursor:pointer" alt="$i18n.getString( 'move_down' )"/></a>
-        </td> 
-		<td>
-          <select id="selectedList" name="selectedList" multiple="multiple" style="min-width:20em;height:20em" ondblclick="moveSelectedById(this.id, 'availableList')">
-          </select>
-        </td>
+		</td>
       </tr>
+
 	  <tr>
-        <td></td>
-		<td></td> 
-		<td>
+		<td colspan="4">
 			<select id="selectedCategories" name="selectedCategories" style="display:none"></select>
 		</td>
       </tr>
@@ -72,8 +92,8 @@
   </table>
 
 	<p>
-		<input type="submit" name="add" value="$i18n.getString( 'add' )" style="width:10em"/>
-		<input type="button" name="cancel" onclick="window.location.href='categoryCombo.action'" value="$i18n.getString( 'cancel' )" style="width:10em"/>
+		<input type="submit" name="add" value="$i18n.getString( 'add' )" style="width:10em" />
+		<input type="button" name="cancel" onclick="window.location.href='categoryCombo.action'" value="$i18n.getString( 'cancel' )" style="width:10em" />
 	</p>
 
 </form>

=== modified file 'dhis-2/dhis-web/dhis-web-maintenance/dhis-web-maintenance-datadictionary/src/main/webapp/dhis-web-maintenance-datadictionary/multidimensional/updateDataElementCategoryComboForm.vm'
--- dhis-2/dhis-web/dhis-web-maintenance/dhis-web-maintenance-datadictionary/src/main/webapp/dhis-web-maintenance-datadictionary/multidimensional/updateDataElementCategoryComboForm.vm	2011-04-15 12:47:28 +0000
+++ dhis-2/dhis-web/dhis-web-maintenance/dhis-web-maintenance-datadictionary/src/main/webapp/dhis-web-maintenance-datadictionary/multidimensional/updateDataElementCategoryComboForm.vm	2011-06-20 07:41:59 +0000
@@ -1,5 +1,19 @@
 <script type="text/javascript">
 	jQuery(document).ready(	function(){
+		jQuery("#availableList").dhisAjaxSelect({
+			source: "../dhis-web-commons-ajax-json/getDataElementCategories.action",
+			iterator: 'dataElementCategories',
+			sortSelected: false,
+			connectedTo: 'selectedList',
+			handler: function(item) {
+				var option = jQuery("<option />");
+				option.text( item.name );
+				option.attr( "value", item.id );
+
+				return option;
+			}
+		});
+
 		validation2( 'editDataElementCategoryComboForm', function( form ) { 
 			validateSelectedCategories( form );
 		}, {
@@ -37,6 +51,11 @@
   </table>
 
  <table id="dataElementCategorySelectionArea">
+    <col style="width: 450px"/>
+    <col/>
+    <col style="width: 450px"/>
+    <col/>
+
     <thead>
         <tr>        
 		<th>$i18n.getString( "available_categories" )</th>
@@ -46,44 +65,46 @@
     </thead>
   
     <tbody>
-      <tr>
-        <td></td>
-        <td></td>        
-      </tr>
       <tr>       
 		<td>
-          <select size="15" id="availableList" name="availableList" multiple="multiple" style="min-width:20em;height:20em" ondblclick="moveSelectedById(this.id, 'selectedList')">
-            #foreach ( $availableDataElementCategory in $allDataElementCategories )
-              <option value="$availableDataElementCategory.id">$encoder.htmlEncode( $availableDataElementCategory.name )</option>
-            #end
-          </select>
+          <select id="availableList" name="availableList" multiple="multiple" style="height: 200px; width: 100%;"></select>
         </td>
        </td>
-		 <td valign="top" align="center">		 
-          <input type="button" value="&gt;" onclick="moveSelectedById('availableList', 'selectedList')" title="$i18n.getString( 'move_selected' )"/><br/>	
-		  <input type="button" value="&lt;" onclick="moveSelectedById('selectedList', 'availableList')" title="$i18n.getString( 'remove_selected' )"/><br/><br/>
+
+        <td style="text-align:center">
+        	<input type="button" value="&gt;" title="$i18n.getString( 'move_selected' )" style="width:50px" onclick="dhisAjaxSelect_moveAllSelected( 'availableList' );"/><br/>
+            <input type="button" value="&lt;" title="$i18n.getString( 'remove_selected' )" style="width:50px" onclick="dhisAjaxSelect_moveAllSelected( 'selectedList' );"/><br/>
+			<input type="button" value="&gt;&gt;" title="$i18n.getString('move_all')" style="width:50px" onclick="dhisAjaxSelect_moveAll( 'availableList' );"/><br/>
+			<input type="button" value="&lt;&lt;" title="$i18n.getString('remove_all')" style="width:50px" onclick="dhisAjaxSelect_moveAll( 'selectedList' );"/>
+        </td>
+
+		<td>
+          <select id="selectedList" name="selectedList" multiple="multiple" style="height: 200px; width: 100%; margin-top: 22px;">
+            #foreach ( $dataElementCategory in $dataElementCategories )
+              <option value="$dataElementCategory.id">$encoder.htmlEncode( $dataElementCategory.name )</option>
+            #end
+          </select>
+        </td>
+        
+		<td>
 		  <a onclick="moveUpSelectedOption('selectedList')" title="$i18n.getString( 'move_up' )"><img src="../images/move_up.png" style="border:0;cursor:pointer" alt="$i18n.getString( 'move_up' )"/></a><br/><br/>
 		  <a onclick="moveDownSelectedOption('selectedList')" title="$i18n.getString( 'move_down' )"><img src="../images/move_down.png" style="border:0;cursor:pointer" alt="$i18n.getString( 'move_down' )"/></a>		  
         </td> 
-		<td>
-          <select id="selectedList" name="selectedList" multiple="multiple" style="min-width:20em;height:20em" ondblclick="moveSelectedById(this.id, 'availableList')">
-            #foreach ( $dataElementCategory in $dataElementCategories )
-              <option value="$dataElementCategory.id">$encoder.htmlEncode( $dataElementCategory.name )</option>
-            #end
-          </select>
-        </td>	       
+            
       </tr>
+
 	  <tr>
-        <td></td>
-		<td></td> 
-		<td>
+		<td colspan="4">
 			<select id="selectedCategories" name="selectedCategories" style="display:none"></select>
 		</td>
       </tr>
+
     </tbody>
   </table>
 
-<p><input type="submit" name="update" value="$i18n.getString( 'update' )" style="width:10em"/>
-<input type="button" name="cancel" onclick="window.location.href='categoryCombo.action'" value="$i18n.getString( 'cancel' )" style="width:10em"/></p>
+<p>
+	<input type="submit" name="update" value="$i18n.getString( 'update' )" style="width:10em" />
+	<input type="button" name="cancel" onclick="window.location.href='categoryCombo.action'" value="$i18n.getString( 'cancel' )" style="width:10em" />
+</p>
        
 </form>