=== modified file 'dhis-2/dhis-web/dhis-web-event-capture/src/main/webapp/dhis-web-event-capture/app/i18n/en.json'
--- dhis-2/dhis-web/dhis-web-event-capture/src/main/webapp/dhis-web-event-capture/app/i18n/en.json	2014-02-14 10:59:22 +0000
+++ dhis-2/dhis-web/dhis-web-event-capture/src/main/webapp/dhis-web-event-capture/app/i18n/en.json	2014-02-17 10:22:59 +0000
@@ -8,10 +8,16 @@
     "no_registered_event": "There are no registered events.",
     "help": "Help",
     "edit": "Edit",
+    "edit_in_grid": "Edit in grid",
+    "full_edit": "Full edit",
     "update": "Update",
     "save": "Save",
     "delete": "Delete",
     "cancel": "Cancel",
+    "remove": "Remove",
+    "are_you_sure_to_remove": "Are you sure you want to remove the selected item?",
+    "show_hide_columns": "Show/Hide columns",
+    "show_details": "Show details",
     "new_event": "New Event",
     "register_new_event": "Register New Event",
     "total_number_of_pages": "No. of pages",

=== modified file 'dhis-2/dhis-web/dhis-web-event-capture/src/main/webapp/dhis-web-event-capture/app/index.html'
--- dhis-2/dhis-web/dhis-web-event-capture/src/main/webapp/dhis-web-event-capture/app/index.html	2014-02-14 10:59:22 +0000
+++ dhis-2/dhis-web/dhis-web-event-capture/src/main/webapp/dhis-web-event-capture/app/index.html	2014-02-17 10:22:59 +0000
@@ -49,7 +49,6 @@
         <script type="text/javascript" src="../../dhis-web-commons/javascripts/dhis2/dhis2.appcache.js"></script>
 
         <!--<script type="text/javascript" src="../../dhis-web-commons/ouwt/ouwt.js"></script>-->
-        
         <script type="text/javascript" src="scripts/angularLocalStorage.js"></script>
         <script type="text/javascript" src="scripts/angular-translate.min.js"></script>
         <script type="text/javascript" src="scripts/angular-translate-loader-static-files.min.js"></script>

=== modified file 'dhis-2/dhis-web/dhis-web-event-capture/src/main/webapp/dhis-web-event-capture/app/scripts/controllers.js'
--- dhis-2/dhis-web/dhis-web-event-capture/src/main/webapp/dhis-web-event-capture/app/scripts/controllers.js	2014-02-14 10:59:22 +0000
+++ dhis-2/dhis-web/dhis-web-event-capture/src/main/webapp/dhis-web-event-capture/app/scripts/controllers.js	2014-02-17 10:22:59 +0000
@@ -12,6 +12,8 @@
                 ProgramStageFactory,
                 DHIS2EventFactory,
                 Paginator,
+                ContextMenuSelectedItem,
+                ModalService,
                 orderByFilter,
                 $translate) {   
     
@@ -35,6 +37,7 @@
     
     $scope.sortHeader = '';
     $scope.reverse = false;
+    $scope.gridFilter = '';
            
     //Get orgunits for the logged in user
     OrgUnitFactory.getMine().then(function(orgUnits) {
@@ -107,7 +110,7 @@
                        dhis2Event.dataValues = orderByFilter(dhis2Event.dataValues, '-dataElement');
                        angular.forEach(dhis2Event.dataValues, function(dataValue){
 
-                           //now copy actual event value
+                           //converting int value to integer for proper sorting.
                            var dataElement = $scope.programStageDataElements[dataValue.dataElement];
                            if(dataElement.type == 'int'){
                                dataValue.value = parseInt(dataValue.value);
@@ -116,13 +119,14 @@
                        });                       
                    });
                    
-                   //generate grid headers from events                   
-                   angular.forEach($scope.dhis2Events[0].dataValues, function(dataValue){      
-                       var dataElement = $scope.programStageDataElements[dataValue.dataElement];
+                   //generate grid headers using program stage data elements
+                   //also, create a template for new event.
+                   for(var dataElement in $scope.programStageDataElements){
+                       var dataElement = $scope.programStageDataElements[dataElement];
                        var name = dataElement.formName || dataElement.name;
                        $scope.newDhis2Event.dataValues.push({dataElement: dataElement, value: '', name: name});                       
-                       $scope.eventGridHeaders.push({name: name, id: dataElement.id});
-                   });           
+                       $scope.eventGridHeaders.push({name: name, id: dataElement.id, filter: ''});
+                   }                   
                });
             });            
         });
@@ -174,7 +178,32 @@
         $scope.eventUnderEditing = '';
     };   
     
-    $scope.deleteEvent = function(dhis2Event){
+    $scope.editEventInGrid = function(){
+        $scope.eventUnderEditing = ContextMenuSelectedItem.getSelectedItem();
+        console.log('The event is:  ', ContextMenuSelectedItem.getSelectedItem().event);
+    };
+    
+    $scope.editEventInFull = function(){
+        console.log('The event is:  ', ContextMenuSelectedItem.getSelectedItem().event);
+    };
+    
+    $scope.removeEvent = function(){
+        var dhis2Event = ContextMenuSelectedItem.getSelectedItem();
+        
+        var modalOptions = {
+            closeButtonText: 'cancel',
+            actionButtonText: 'remove',
+            headerText: 'remove',
+            bodyText: 'are_you_sure_to_remove'
+        };
+
+        ModalService.showModal({}, modalOptions).then(function(result){
+            console.log('The event to be deleted is:  ', dhis2Event);
+        });        
+    };
+    
+    $scope.showEventDetails = function(){
+        console.log('The event is:  ', ContextMenuSelectedItem.getSelectedItem().event);
     };
     
     $scope.getHelpContent = function(){
@@ -182,13 +211,8 @@
     };
     
     $scope.generateReport = function(){
-      console.log('I need to generate the report....');  
-    };   
-    
-    $scope.showContextMenu = function(dhis2Event){
-        //console.log('I need to display context menu for....', dhis2Event);
-    }
-     
+        console.log('I need to generate the report....');  
+    };     
 })
 
 //Controller for the main page

=== modified file 'dhis-2/dhis-web/dhis-web-event-capture/src/main/webapp/dhis-web-event-capture/app/scripts/directives.js'
--- dhis-2/dhis-web/dhis-web-event-capture/src/main/webapp/dhis-web-event-capture/app/scripts/directives.js	2014-02-14 10:59:22 +0000
+++ dhis-2/dhis-web/dhis-web-event-capture/src/main/webapp/dhis-web-event-capture/app/scripts/directives.js	2014-02-17 10:22:59 +0000
@@ -51,4 +51,56 @@
         },
         templateUrl: 'views/pagination.html'        
     };
-});
\ No newline at end of file
+})
+
+.directive('dhisContextMenu', ['ContextMenuSelectedItem', function(ContextMenuSelectedItem) {
+        
+    return {        
+        restrict: 'A',
+        link: function(scope, element, attrs){
+            var contextMenu = $("#contextMenu");                   
+            
+            element.click(function (e) {
+                var selectedItem = $.parseJSON(attrs.selectedItem);
+                ContextMenuSelectedItem.setSelectedItem(selectedItem);
+                
+                var menuHeight = contextMenu.height();
+                var menuWidth = contextMenu.width();
+                var winHeight = $(window).height();
+                var winWidth = $(window).width();
+
+                var pageX = e.pageX;
+                var pageY = e.pageY;
+
+                contextMenu.show();
+
+                if( (menuWidth + pageX) > winWidth ) {
+                  pageX -= menuWidth;
+                }
+
+                if( (menuHeight + pageY) > winHeight ) {
+                  pageY -= menuHeight;
+
+                  if( pageY < 0 ) {
+                      pageY = e.pageY;
+                  }
+                }
+                
+                contextMenu.css({
+                    left: pageX,
+                    top: pageY
+                });
+
+                return false;
+            });
+            
+            contextMenu.on("click", "a", function () {                    
+                contextMenu.hide();
+            });
+
+            $(document).click(function () {                                        
+                contextMenu.hide();
+            });
+        }     
+    };
+}]);
\ No newline at end of file

=== modified file 'dhis-2/dhis-web/dhis-web-event-capture/src/main/webapp/dhis-web-event-capture/app/scripts/services.js'
--- dhis-2/dhis-web/dhis-web-event-capture/src/main/webapp/dhis-web-event-capture/app/scripts/services.js	2014-02-14 10:59:22 +0000
+++ dhis-2/dhis-web/dhis-web-event-capture/src/main/webapp/dhis-web-event-capture/app/scripts/services.js	2014-02-17 10:22:59 +0000
@@ -559,13 +559,9 @@
         
         getByStage: function(orgUnit, programStage){
             var promise = $http.get(dhis2Url + '/api/events.json?' + 'orgUnit=' + orgUnit + '&programStage=' + programStage + '&paging=false').then(function(response){
-                var dhis2Events = response.data.eventList;
-                
-                /*angular.forEach(dhis2Events, function(dhis2Event){
-                    console.log('datavalue length:  ', dhis2Event.dataValues.length);
-                });*/
-                
-                return dhis2Events;             
+                //var dhis2Events = response.data.eventList;                
+                
+                return response.data.eventList;             
             });            
             return promise;
         },
@@ -931,6 +927,18 @@
 
 }])
 
+.service('ContextMenuSelectedItem', function(){
+    this.selectedItem = '';
+    
+    this.setSelectedItem = function(selectedItem){  
+        this.selectedItem = selectedItem;        
+    };
+    
+    this.getSelectedItem = function(){
+        return this.selectedItem;
+    };
+})
+
 /* Pagination service */
 .service('Paginator', function () {
     this.page = 0;

=== modified file 'dhis-2/dhis-web/dhis-web-event-capture/src/main/webapp/dhis-web-event-capture/app/styles/style.css'
--- dhis-2/dhis-web/dhis-web-event-capture/src/main/webapp/dhis-web-event-capture/app/styles/style.css	2014-02-14 10:59:22 +0000
+++ dhis-2/dhis-web/dhis-web-event-capture/src/main/webapp/dhis-web-event-capture/app/styles/style.css	2014-02-17 10:22:59 +0000
@@ -700,6 +700,10 @@
     color: black;
 }
 
+.bold {
+    font-weight: bold;
+}
+
 .white {
     color: white;
 }
@@ -751,15 +755,15 @@
     background-color: #ebf0f6;
 }
 
-.dhis2-table-striped, 
-.dhis2-table-striped>thead>tr>th, 
-.dhis2-table-striped>tbody>tr>th, 
-.dhis2-table-striped>tfoot>tr>th, 
-.dhis2-table-striped>thead>tr>td, 
-.dhis2-table-striped>tbody>tr>td, 
-.dhis2-table-striped>tfoot>tr>td {
-    //border: 1px solid #cad5e5;
-    border: none;
+
+.dhis2-table-striped>thead>tr, 
+.dhis2-table-striped>tbody>tr, 
+.dhis2-table-striped>tfoot>tr, 
+.dhis2-table-striped>thead>tr, 
+.dhis2-table-striped>tbody>tr, 
+.dhis2-table-striped>tfoot>tr {
+    border-bottom: 1px solid #cad5e5;
+    //border: none;
 }
 
 .dhis2-table-striped > tbody > tr:nth-child(odd)> td, .dhis2-table-striped > tbody > tr:nth-child(odd)> th {
@@ -769,3 +773,133 @@
 .dhis2-table-hover > tbody > tr:hover > td, .table-hover > tbody > tr:hover > th {
     background-color: #dfe9f4;
 }
+
+#contextMenu {
+    position: absolute;
+    display:none;
+}
+
+/*----------------------------------------------------------------------------*/
+/* Bootstrap modal style
+/*----------------------------------------------------------------------------*/
+.modal-open {
+    overflow: hidden
+}
+.modal {
+    position: fixed;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    z-index: 1040;
+    display: none;
+    overflow: auto;
+    overflow-y: scroll
+}
+.modal.fade .modal-dialog {
+    -webkit-transform: translate(0,-25%);
+    -ms-transform: translate(0,-25%);
+    transform: translate(0,-25%);
+    -webkit-transition: -webkit-transform .3s ease-out;
+    -moz-transition: -moz-transform .3s ease-out;
+    -o-transition: -o-transform .3s ease-out;
+    transition: transform .3s ease-out
+}
+.modal.in .modal-dialog {
+    -webkit-transform: translate(0,0);
+    -ms-transform: translate(0,0);
+    transform: translate(0,0)
+}
+.modal-dialog {
+    position: relative;
+    z-index: 1050;
+    width: auto;
+    padding: 10px;
+    margin-right: auto;
+    margin-left: auto
+}
+.modal-content {
+    position: relative;
+    background-color: #fff;
+    border: 1px solid #999;
+    border: 1px solid rgba(0,0,0,0.2);
+    border-radius: 6px;
+    outline: 0;
+    -webkit-box-shadow: 0 3px 9px rgba(0,0,0,0.5);
+    box-shadow: 0 3px 9px rgba(0,0,0,0.5);
+    background-clip: padding-box
+}
+.modal-backdrop {
+    position: fixed;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    z-index: 1030;
+    background-color: #000
+}
+.modal-backdrop.fade {
+    opacity: 0;
+    filter: alpha(opacity=0)
+}
+.modal-backdrop.in {
+    opacity: .5;
+    filter: alpha(opacity=50)
+}
+.modal-header {
+    min-height: 16.428571429px;
+    padding: 15px;
+    border-bottom: 1px solid #e5e5e5
+}
+.modal-header .close {
+    margin-top: -2px
+}
+.modal-title {
+    margin: 0;
+    line-height: 1.428571429
+}
+.modal-body {
+    position: relative;
+    padding: 20px
+}
+.modal-footer {
+    padding: 19px 20px 20px;
+    margin-top: 15px;
+    text-align: right;
+    border-top: 1px solid #e5e5e5
+}
+.modal-footer:before, .modal-footer:after {
+    display: table;
+    content: " "
+}
+.modal-footer:after {
+    clear: both
+}
+.modal-footer:before, .modal-footer:after {
+    display: table;
+    content: " "
+}
+.modal-footer:after {
+    clear: both
+}
+.modal-footer .btn+ .btn {
+    margin-bottom: 0;
+    margin-left: 5px
+}
+.modal-footer .btn-group .btn+ .btn {
+    margin-left: -1px
+}
+.modal-footer .btn-block+ .btn-block {
+    margin-left: 0
+}
+@media screen and (min-width: 768px) {
+    .modal-dialog {
+        width: 600px;
+        padding-top: 30px;
+        padding-bottom: 30px
+    }
+    .modal-content {
+        -webkit-box-shadow: 0 5px 15px rgba(0,0,0,0.5);
+        box-shadow: 0 5px 15px rgba(0,0,0,0.5)
+    }
+}

=== modified file 'dhis-2/dhis-web/dhis-web-event-capture/src/main/webapp/dhis-web-event-capture/app/views/eventList.html'
--- dhis-2/dhis-web/dhis-web-event-capture/src/main/webapp/dhis-web-event-capture/app/views/eventList.html	2014-02-14 10:59:22 +0000
+++ dhis-2/dhis-web/dhis-web-event-capture/src/main/webapp/dhis-web-event-capture/app/views/eventList.html	2014-02-17 10:22:59 +0000
@@ -1,44 +1,44 @@
-<div id="contextMenu" class="contextMenu">
+<div id="contextMenu" class="contextMenu" style="width: 180px;">
     <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="showUpdateDataElementForm"><i class="fa fa-edit"></i>&nbsp;&nbsp;$i18n.getString( "edit" )</a></li>
-        <li data-enabled="canUpdate"><a data-target-fn="translateWithContext"><i class="fa fa-globe"></i>&nbsp;&nbsp;$i18n.getString( "translation_translate" )</a></li>
-        <li data-enabled="canDelete"><a data-target-fn="removeDataElement"><i class="fa fa-trash-o"></i>&nbsp;&nbsp;$i18n.getString( "remove" )</a></li>
-        <li><a data-target-fn="showDataElementDetails"><i class="fa fa-info-circle"></i>&nbsp;&nbsp;$i18n.getString( "show_details" )</a></li>
+        <li><a href ng-click="editEventInGrid()"><i class="fa fa-edit"></i>&nbsp;&nbsp;{{'edit_in_grid'| translate}}</a></li>
+        <li><a href ng-click="editEventInFull()"><i class="fa fa-edit"></i>&nbsp;&nbsp;{{'full_edit'| translate}}</a></li>
+        <li><a href ng-click="removeEvent()"><i class="fa fa-trash-o"></i>&nbsp;&nbsp;{{'remove'| translate}}</a></li>
+        <li><a href ng-click="showEventDetails()"><i class="fa fa-info-circle"></i>&nbsp;&nbsp;{{'show_details'| translate}}</a></li>        
     </ul>
 </div>
 
+
 <table class="mainPageTable">
     <tr>
         <td style="vertical-align:top">
             <div id="content">
-                <table class="listTable dhis2-table-striped dhis2-table-hover" id="dhis2EventList">
+                <table class="listTable dhis2-table-striped dhis2-table-hover">                    
                     <thead>
                         <tr>
-                            <th>#</th>
                             <th class="max-column-width" ng-click="sortEventGrid(eventGridHeader)" ng-repeat="eventGridHeader in eventGridHeaders">
                                 {{eventGridHeader.name}}
                                 <i ng-show="sortHeader == eventGridHeader.id && !reverse" class="fa fa-sort-desc"></i>
                                 <i ng-show="sortHeader == eventGridHeader.id && reverse" class="fa fa-sort-asc"></i>
                             </th>
-                            <th>{{'operations'| translate}}</th>            
+                            <th>
+                                <a href ng-click="editGridHeader()" title="{{'show_hide_columns'| translate}}"><i class="fa fa-cog"></i></a>
+                            </th>         
                         </tr>
                     </thead>
                     <tbody id="list">
-                        <tr id="tr{{dhis2Event.event}}" ng-repeat="dhis2Event in dhis2Events| paginate:rowsPerPage| orderBy:sortHeader:reverse" ng-click="showContextMenu(dhis2Event)">
-                            <td>{{($index + 1) + (paginator.getPage() * paginator.rowsPerPage)}}</td>                                                        
-                            <td class="max-column-width" ng-hide="eventUnderEditing == dhis2Event" ng-repeat="eventGridHeader in eventGridHeaders">
+                        <tr id={{dhis2Event.event}} data-id={{dhis2Event.event}} data-uid={{dhis2Event.event}} ng-repeat="dhis2Event in dhis2Events| paginate:rowsPerPage| orderBy:sortHeader:reverse" ng-click="showContextMenu(dhis2Event)">
+                            <td dhis-context-menu selected-item={{dhis2Event}} class="max-column-width" ng-hide="eventUnderEditing.event == dhis2Event.event" ng-repeat="eventGridHeader in eventGridHeaders">
                                 {{dhis2Event[eventGridHeader.id]}}                                              
                             </td>
-                            <td class="max-column-width" ng-show="eventUnderEditing == dhis2Event" ng-repeat="eventGridHeader in eventGridHeaders">
+                            <td class="max-column-width" ng-show="eventUnderEditing.event == dhis2Event.event" ng-repeat="eventGridHeader in eventGridHeaders">
                                 <div ng-switch="programStageDataElements[eventGridHeader.id].type">
                                     <div ng-switch-when="int">
                                         <input type="number" style="width:90%;" ng-model="eventUnderEditing[eventGridHeader.id]" value="eventUnderEditing[eventGridHeader.id]"/>
                                     </div>
-                                    <div ng-switch-when="string">
-                                        <select style="width:90%;" ng-model="eventUnderEditing[eventGridHeader.id]" value="eventUnderEditing[eventGridHeader.id]" ng-options='option for option in programStageDataElements[eventGridHeader.id].optionSet.options | limitTo:20'>
-                                            <option value="">{{'please_select'| translate}}</option>
-                                        </select>
+                                    <div ng-switch-when="string">                                        
+                                        <div class="container-fluid">
+                                            <input type="text" style="width:90%;" ng-model="eventUnderEditing[eventGridHeader.id]" value="eventUnderEditing[eventGridHeader.id]" typeahead="option for option in programStageDataElements[eventGridHeader.id].optionSet.options | filter:$viewValue | limitTo:20" >                                            
+                                        </div>                                        
                                     </div>
                                     <div ng-switch-when="bool">
                                         <select style="width:90%;" ng-model="eventUnderEditing[eventGridHeader.id]" value="eventUnderEditing[eventGridHeader.id]">
@@ -53,12 +53,12 @@
                                 </div>
                             </td>
                             <td>
-                                <span ng-hide="eventUnderEditing == dhis2Event">
-                                    <a href ng-click="editEvent(dhis2Event)" title="{{'edit'| translate}}"><span class='anchor-color'><i class="fa fa-pencil-square-o fa-2x"></i></span></a>
-                                    <a href ng-click="deleteEvent(dhis2Event)" title="{{'delete'| translate}}"><span class='red'><i class="fa fa-trash-o fa-2x"></i></span></a>       
-                                </span>
-                                <span ng-show="eventUnderEditing == dhis2Event">
-                                    <a href ng-click="updateEvent(dhis2Event)" title="{{'update'| translate}}"><span class='anchor-color'><i class="fa fa-floppy-o fa-2x"></i></span></a>
+                                <!--<span ng-hide="eventUnderEditing == dhis2Event">
+                                <a href ng-click="editEvent(dhis2Event)" title="{{'edit'| translate}}"><span class='anchor-color'><i class="fa fa-pencil-square-o fa-2x"></i></span></a>
+                                <a href ng-click="deleteEvent(dhis2Event)" title="{{'delete'| translate}}"><span class='red'><i class="fa fa-trash-o fa-2x"></i></span></a>       
+                                </span>-->
+                                <span ng-show="eventUnderEditing.event == dhis2Event.event">
+                                    <a href ng-click="updateEvent(dhis2Event)" title="{{'update'| translate}}"><span class='black'><i class="fa fa-floppy-o fa-2x"></i></span></a>
                                     <a href ng-click="cancelEditing(dhis2Event)" title="{{'cancel'| translate}}"><span class='red'><i class="fa fa-undo fa-2x"></i></span></a>       
                                 </span>
                             </td>

=== added file 'dhis-2/dhis-web/dhis-web-event-capture/src/main/webapp/dhis-web-event-capture/app/views/modal.html'
--- dhis-2/dhis-web/dhis-web-event-capture/src/main/webapp/dhis-web-event-capture/app/views/modal.html	1970-01-01 00:00:00 +0000
+++ dhis-2/dhis-web/dhis-web-event-capture/src/main/webapp/dhis-web-event-capture/app/views/modal.html	2014-02-17 10:22:59 +0000
@@ -0,0 +1,10 @@
+<div class="modal-header">
+  <h3>{{modalOptions.headerText | translate}}</h3>
+</div>
+<div class="modal-body">
+  <p>{{modalOptions.bodyText | translate}}</p>
+</div>
+<div class="modal-footer">
+  <button data-ng-click="modalOptions.close()">{{modalOptions.closeButtonText | translate}}</button>
+  <button data-ng-click="modalOptions.ok();">{{modalOptions.actionButtonText | translate}}</button>
+</div>
\ No newline at end of file