=== modified file 'dhis-2/dhis-web/dhis-web-dashboard-integration/src/main/webapp/dhis-web-dashboard-integration/javascript/usergroup.js'
--- dhis-2/dhis-web/dhis-web-dashboard-integration/src/main/webapp/dhis-web-dashboard-integration/javascript/usergroup.js	2013-03-12 09:27:40 +0000
+++ dhis-2/dhis-web/dhis-web-dashboard-integration/src/main/webapp/dhis-web-dashboard-integration/javascript/usergroup.js	2013-12-06 15:29:45 +0000
@@ -1,20 +1,28 @@
+$(function() {
+  dhis2.contextmenu.makeContextMenu({
+    menuId: 'contextMenu',
+    menuItemActiveClass: 'contextMenuItemActive'
+  });
+});
+
+function editUserGroupForm( context ) {
+  location.href = 'editUserGroupForm.action?userGroupId=' + context.id;
+}
 
 // -----------------------------------------------------------------------------
 // Usergroup functionality
 // -----------------------------------------------------------------------------
 
-function showUserGroupDetails( userGroupId )
-{
-    jQuery.post( 'getUserGroup.action', { userGroupId: userGroupId },
-		function ( json ) {
-			setInnerHTML( 'nameField', json.userGroup.name );
-			setInnerHTML( 'noOfGroupField', json.userGroup.noOfUsers );
+function showUserGroupDetails( context ) {
+  jQuery.post('getUserGroup.action', { userGroupId: context.id },
+    function( json ) {
+      setInnerHTML('nameField', json.userGroup.name);
+      setInnerHTML('noOfGroupField', json.userGroup.noOfUsers);
 
-			showDetails();
-	});
+      showDetails();
+    });
 }
 
-function removeUserGroup( userGroupId, userGroupName )
-{
-    removeItem( userGroupId, userGroupName, i18n_confirm_delete, 'removeUserGroup.action' );
+function removeUserGroup( context ) {
+  removeItem(context.id, context.name, i18n_confirm_delete, 'removeUserGroup.action');
 }

=== modified file 'dhis-2/dhis-web/dhis-web-dashboard-integration/src/main/webapp/dhis-web-dashboard-integration/userGroupList.vm'
--- dhis-2/dhis-web/dhis-web-dashboard-integration/src/main/webapp/dhis-web-dashboard-integration/userGroupList.vm	2013-09-04 11:32:31 +0000
+++ dhis-2/dhis-web/dhis-web-dashboard-integration/src/main/webapp/dhis-web-dashboard-integration/userGroupList.vm	2013-12-06 15:29:45 +0000
@@ -2,84 +2,70 @@
 #sharingDialog()
 
 <script type="text/javascript">
-    var i18n_confirm_delete = '$encoder.jsEscape( $i18n.getString( "confirm_delete" ) , "'" )';
+  var i18n_confirm_delete = '$encoder.jsEscape( $i18n.getString( "confirm_delete" ) , "'" )';
 </script>
 
 <h3>$i18n.getString( "user_group_management" ) #openHelp( "user_group_management" )</h3>
 
+<div id="contextMenu" class="contextMenu">
+  <ul id="contextMenuItems" class="contextMenuItems">
+    <li data-enabled="canManage"><a data-target-fn="showSharingDialogWithContext"><i class="fa fa-share"></i>&nbsp;&nbsp;$i18n.getString( "sharing_settings" )</a></li>
+    <li data-enabled="canUpdate"><a data-target-fn="editUserGroupForm"><i class="fa fa-edit"></i>&nbsp;&nbsp;$i18n.getString( "edit" )</a></li>
+    <li data-enabled="canDelete"><a data-target-fn="removeUserGroup"><i class="fa fa-trash-o"></i>&nbsp;&nbsp;$i18n.getString( "remove" )</a></li>
+    <li><a data-target-fn="showUserGroupDetails"><i class="fa fa-info-circle"></i>&nbsp;&nbsp;$i18n.getString( "show_details" )</a></li>
+  </ul>
+</div>
+
 <table class="mainPageTable">
   <tr>
     <td style="vertical-align:top">
         <table width="100%">
-            <tr>
-                <td>#filterDiv( "getAllUserGroups" )</td>
-                <td colspan="9" style="text-align:right">
-                    <input type="button" value="$i18n.getString( 'add_new' )" onclick="window.location.href='addUserGroupForm.action'" style="width:80px"/></a>
-                </td>
-            </tr>
+          <tr>
+            <td>#filterDiv( "getAllUserGroups" )</td>
+            <td colspan="9" style="text-align:right">
+              <input type="button" value="$i18n.getString( 'add_new' )" onclick="window.location.href='addUserGroupForm.action'" style="width:80px"/></a>
+            </td>
+          </tr>
         </table>
         <div id="content">
         <table class="listTable" id="listTable">
           <col/>          
-          <col width="120"/>
           <thead>
           <tr>
             <th>$i18n.getString( "name" )</th>
-            <th style="text-align:center" class="{sorter: false}">$i18n.getString( "operations" )</th>
           </tr>
           </thead>
           <tbody id="list">
             #foreach( $userGroup in $userGroupList )
-              <tr id="tr${userGroup.id}">
-                <td onclick="showUserGroupDetails( $userGroup.id )">$encoder.htmlEncode( $userGroup.name )</td>
-                <td style="text-align:center">
-
-                  #if ( $security.canManage( $userGroup ) )
-                  <a href="javascript:showSharingDialog('userGroup', '$userGroup.uid');" title="$i18n.getString( 'sharing_settings' )"><img src="../images/relationship.png" alt="$i18n.getString( 'sharing_settings' )"></a>
-                  #else
-                  <img src="../images/relationship-denied.png">
-                  #end
-
-                  #if( $security.canUpdate( $userGroup ) )
-                  <a href="editUserGroupForm.action?userGroupId=$userGroup.id" title="$i18n.getString( 'edit' )"><img src="../images/edit.png" alt="$i18n.getString( 'edit' )"/></a>
-                  #else
-                  <img src="../images/edit-denied.png">
-                  #end
-
-                  #if( $security.canDelete( $userGroup ) )
-                  <a href="javascript:removeUserGroup( '$userGroup.id', '$encoder.jsEncode( $userGroup.name )' )" title="$i18n.getString( 'remove' )"><img src="../images/delete.png" alt="$i18n.getString( 'remove' )"/></a>
-                  #else
-                  <img src="../images/delete-denied.png">
-                  #end
-
-                  <a href="javascript:showUserGroupDetails( $userGroup.id )" title="$i18n.getString( 'show_details' )"><img src="../images/information.png" alt="$i18n.getString( 'show_details' )"/></a>
-
-                </td>
+              <tr id="tr${userGroup.id}" data-id="$!userGroup.id" data-uid="$!userGroup.uid" data-type="UserGroup" data-name="$encoder.htmlEncode( $!userGroup.displayName )"
+                  data-can-manage="$security.canManage( $userGroup )"
+                  data-can-update="$security.canUpdate( $userGroup )"
+                  data-can-delete="$security.canDelete( $userGroup )">
+                  <td>$encoder.htmlEncode( $!userGroup.displayName )</td>
               </tr>
             #end
           </tbody>
         </table>
-		<p></p>
-		#parse( "/dhis-web-commons/paging/paging.vm" )
+        <p></p>
+        #parse( "/dhis-web-commons/paging/paging.vm" )
         </div>
       </td>
+
       <td id="detailsData">
-      	
-          <div id="detailsArea">
-              <div id="hideDetailsArea">
-                  <a href="javascript:hideDetails()" title="$i18n.getString( 'hide_details' )"><img src="../images/hide.png" alt="$i18n.getString( 'hide_details' )"/></a>
-              </div>
-              <p><label>$i18n.getString( "name" ):</label><br/><span id="nameField"></span></p>
-              <p><label>$i18n.getString( "no_of_Users" ):</label><br/><span id="noOfGroupField"></span></p>
-          </div>
-          
-          <div id="warningArea" style="position:fixed;right:10px;top:200px;display:none">
-              <div id="hideDetailsArea">
-                  <a href="javascript:hideWarning()" title="$i18n.getString( 'hide_warning' )"><img src="../images/hide.png" alt="$i18n.getString( 'hide_warning' )"/></a>
-              </div>
-              <p><span id="warningField"></span></p>
-          </div>
-          
+        <div id="detailsArea">
+          <div id="hideDetailsArea">
+            <a href="javascript:hideDetails()" title="$i18n.getString( 'hide_details' )"><img src="../images/hide.png" alt="$i18n.getString( 'hide_details' )"/></a>
+          </div>
+          <p><label>$i18n.getString( "name" ):</label><br/><span id="nameField"></span></p>
+          <p><label>$i18n.getString( "no_of_Users" ):</label><br/><span id="noOfGroupField"></span></p>
+        </div>
+          
+        <div id="warningArea" style="position:fixed;right:10px;top:200px;display:none">
+            <div id="hideDetailsArea">
+                <a href="javascript:hideWarning()" title="$i18n.getString( 'hide_warning' )"><img src="../images/hide.png" alt="$i18n.getString( 'hide_warning' )"/></a>
+            </div>
+            <p><span id="warningField"></span></p>
+        </div>
       </td>
     </tr>
 </table>