=== 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-17 11:45:07 +0000
+++ dhis-2/dhis-web/dhis-web-event-capture/src/main/webapp/dhis-web-event-capture/app/i18n/en.json	2014-02-18 09:41:26 +0000
@@ -5,6 +5,8 @@
     "event_capture": "Event capture",
     "registering_unit": "Registering unit",
     "registered_events": "Registered events",
+    "new_event_registration": "New event registration",
+    "update_event": "Updating event",
     "no_registered_event": "There are no registered events.",
     "help": "Help",
     "edit": "Edit",
@@ -21,6 +23,8 @@
     "hide": "Hide",
     "show_details": "Show details",
     "new_event": "New Event",
+    "data_element": "Data element",
+    "value": "Value",
     "register_new_event": "Register New Event",
     "total_number_of_pages": "No. of pages",
     "rows_per_page": "No. of rows per page",

=== 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-17 10:22:59 +0000
+++ dhis-2/dhis-web/dhis-web-event-capture/src/main/webapp/dhis-web-event-capture/app/index.html	2014-02-18 09:41:26 +0000
@@ -11,8 +11,8 @@
         <script type="text/javascript" src="lib/jquery/js/jquery-ui-1.9.2.custom.js"></script>
         <link rel="stylesheet" type="text/css" href="lib/jquery/css/ui-lightness/jquery-ui-1.9.2.custom.css"> 
 
-        <!--<script type="text/javascript" src="lib/bootstrap/js/bootstrap.min.js"></script>
-        <link rel="stylesheet" type="text/css" href="lib/bootstrap/css/bootstrap-theme.min.css">
+        <script type="text/javascript" src="lib/bootstrap/js/bootstrap.min.js"></script>
+        <!--<link rel="stylesheet" type="text/css" href="lib/bootstrap/css/bootstrap-theme.min.css">
         <link rel="stylesheet" type="text/css" href="lib/bootstrap/css/bootstrap.min.css">-->
 
         <script type="text/javascript" src="lib/angular/angular.js"></script>
@@ -48,7 +48,9 @@
         <script type="text/javascript" src="../../dhis-web-commons/javascripts/dhis2/dhis2.contextmenu.js"></script>
         <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="../../dhis-web-commons/ouwt/ouwt.js"></script>
+        <script type="text/javascript" src="scripts/ouwt.js"></script>
+        <script type="text/javascript" src="scripts/ouSelection.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>
@@ -75,9 +77,8 @@
             </div>
         </div>
         <div ng-controller="MainController"> 
-            <div id="leftBar">    
-                <div class="org-unit-tree" ng-include="'views/orgUnitTree.html'"></div>
-                
+            <div id="leftBar">
+                <div ng-include="'views/orgUnitTree.html'"></div>
             </div>
             <div class="page" id="mainPage">
                 <h1>{{'event_capture'| translate}}<a href ng-click="getHelpContent()" title="{{'help'| translate}}"><i class="fa fa-question-circle"></i></a></h1>
@@ -96,14 +97,13 @@
                                 </select>      
                             </td>
                             <td style='padding-left: 20px;'>
-                                <button ng-show="selectedProgramStage" ng-click="registerEvent()" class="button">{{'register_new_event'| translate}}</button>  
+                                <button ng-show="selectedProgramStage" ng-click="showEventRegistration()" class="button" ng-disabled="eventRegistration || editingEventInFull || editingEventInGrid">{{'register_new_event'| translate}}</button>  
                             </td>
                         </tr>                       
                     </table>
                 </div>
 
-
-                <div id="listDiv" ng-show="selectedProgramStage && !eventRegistration">
+                <div id="listDiv" ng-show="selectedProgramStage && !eventRegistration && !editingEventInFull">
                     <h2>
                         {{'registered_events'| translate}}                                                 
                     </h2>               
@@ -120,9 +120,18 @@
                     </div>                    
 
                 </div>  
-                <div class="container-1-4" ng-show="eventRegistration">
+                <div ng-show="eventRegistration">
+                    <h2>
+                        {{'new_event_registration'| translate}}                                                 
+                    </h2>   
                     <div ng-include="'views/eventRegistration.html'"></div>
                 </div>
+                <div ng-show="editingEventInFull">
+                    <h2>
+                        {{'update_event'| translate}}                                                 
+                    </h2>   
+                    <div ng-include="'views/eventUpdate.html'"></div>
+                </div>
             </div>           
         </div>
     </body>

=== 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-17 11:45:07 +0000
+++ dhis-2/dhis-web/dhis-web-event-capture/src/main/webapp/dhis-web-event-capture/app/scripts/controllers.js	2014-02-18 09:41:26 +0000
@@ -32,14 +32,20 @@
     $scope.programStageDataElements = [];
     $scope.dhis2Events = [];
     $scope.eventRegistration = false;
-    $scope.editGridHeaders = false;
-    $scope.eventGridHeaders = [];
+    $scope.editGridColumns = false;
+    $scope.eventGridColumns = [];
     $scope.newDhis2Event = {dataValues: []};
+    $scope.currentEvent = {dataValues: []};
+    $scope.currentEventOrginialValue = '';
+    
+    $scope.editingEventInFull = false;
+    $scope.editingEventInGrid = false;
     
     $scope.sortHeader = '';
     $scope.reverse = false;
     $scope.gridFilter = '';
-           
+    
+   
     //Get orgunits for the logged in user
     OrgUnitFactory.getMine().then(function(orgUnits) {
         $scope.orgUnits = orgUnits;
@@ -107,18 +113,29 @@
                    $scope.dhis2Events = data;
 
                    //process event list for easier tabular sorting
-                   angular.forEach($scope.dhis2Events, function(dhis2Event){                       
-                       dhis2Event.dataValues = orderByFilter(dhis2Event.dataValues, '-dataElement');
-                       angular.forEach(dhis2Event.dataValues, function(dataValue){
-
-                           //converting int value to integer for proper sorting.
-                           var dataElement = $scope.programStageDataElements[dataValue.dataElement];
-                           if(dataElement.type == 'int'){
-                               dataValue.value = parseInt(dataValue.value);
-                           }
-                           dhis2Event[dataValue.dataElement] = dataValue.value; 
-                       });                       
-                   });
+                   //angular.forEach($scope.dhis2Events, function(dhis2Event){ 
+                   for(var i=0; i < $scope.dhis2Events.length; i++){     
+                       //check if event is empty
+                       if(!angular.isUndefined($scope.dhis2Events[i].dataValues[0].dataElement)){
+                           $scope.dhis2Events[i].dataValues = orderByFilter($scope.dhis2Events[i].dataValues, '-dataElement');
+                           angular.forEach($scope.dhis2Events[i].dataValues, function(dataValue){
+                               
+                               //converting int value to integer for proper sorting.
+                               var dataElement = $scope.programStageDataElements[dataValue.dataElement];
+                               if(angular.isObject(dataElement)){                               
+                                   if(dataElement.type == 'int'){
+                                       dataValue.value = parseInt(dataValue.value);
+                                   }
+                                   $scope.dhis2Events[i][dataValue.dataElement] = dataValue.value; 
+                               }                                
+                            });                           
+                       }
+                       else{//event is empty, remove from display list
+                           var index = $scope.dhis2Events.indexOf($scope.dhis2Events[i]);                           
+                           $scope.dhis2Events.splice(index,1);
+                           i--;                           
+                       }                                              
+                   }
                    
                    //generate grid headers using program stage data elements
                    //also, create a template for new event.
@@ -126,7 +143,7 @@
                        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, filter: '', hide: false});
+                       $scope.eventGridColumns.push({name: name, id: dataElement.id, filter: '', hide: false});
                    }                   
                });
             });            
@@ -139,7 +156,7 @@
     };
     
     $scope.sortEventGrid = function(gridHeader){
-        if ($scope.sortHeader == gridHeader.id){
+        if ($scope.sortHeader === gridHeader.id){
             $scope.reverse = !$scope.reverse;
             return;
         }
@@ -150,55 +167,66 @@
     
     $scope.showHideColumns = function(showAllColumns){
         if(showAllColumns){
-            angular.forEach($scope.eventGridHeaders, function(gridHeader){
+            angular.forEach($scope.eventGridColumns, function(gridHeader){
                 gridHeader.hide = false;
             });
         }
         else{
-            $scope.editGridHeaders = !$scope.editGridHeaders;
+            $scope.editGridColumns = !$scope.editGridColumns;
         }        
     };
     
-    $scope.registerEvent = function(){
-        $scope.eventRegistration = true;        
-    };
-    
-    $scope.cancelAdding = function(){
-        $scope.eventRegistration = false; 
-    }
-    
-    $scope.editEvent = function(dhis2Event){        
-        $scope.editingEvent = !$scope.editingEvent;                
-        $scope.eventUnderEditing = dhis2Event; 
-        
-        if(dhis2Event.dataValues.length !== $scope.selectedProgramStage.programStageDataElements.length){
+    $scope.showEventList = function(){
+        $scope.eventRegistration = false;
+        $scope.editingEventInFull = false;
+        $scope.editingEventInGrid = false;
+        
+        $scope.currentEvent = '';
+    };
+    
+    $scope.showEventRegistration = function(){
+        $scope.eventRegistration = !$scope.eventRegistration;  
+        $scope.currentEvent = $scope.newDhis2Event;
+    };    
+    
+    $scope.showEditEventInGrid = function(){
+        $scope.currentEvent = ContextMenuSelectedItem.getSelectedItem();  
+        $scope.currentEventOrginialValue = angular.copy($scope.currentEvent);
+        $scope.editingEventInGrid = !$scope.editingEventInGrid;                
+    };
+    
+    $scope.showEditEventInFull = function(){      
+        $scope.currentEvent = ContextMenuSelectedItem.getSelectedItem();        
+        $scope.editingEventInFull = !$scope.editingEventInFull;   
+        $scope.eventRegistration = false;
+        
+        if($scope.currentEvent.dataValues.length !== $scope.selectedProgramStage.programStageDataElements.length){
             angular.forEach($scope.selectedProgramStage.programStageDataElements, function(prStDe){
-                if(!$scope.eventUnderEditing.hasOwnProperty(prStDe.dataElement.id)){
-                    $scope.eventUnderEditing[prStDe.dataElement.id] = '';
+                if(!$scope.currentEvent.hasOwnProperty(prStDe.dataElement.id)){
+                    $scope.currentEvent[prStDe.dataElement.id] = '';
                 }
             });
         }
+    };
+    
+    $scope.addEvent = function(){        
+        $scope.eventRegistration = false;
+        $scope.editingEventInFull = false;
+        $scope.editingEventInGrid = false;
+        
+        console.log('the event to be added is:  ', $scope.currentEvent);
+        $scope.currentEvent = '';
+    };       
+    
+    $scope.updateEvent = function(){
+        $scope.eventRegistration = false;
+        $scope.editingEventInFull = false;
+        $scope.editingEventInGrid = false;                
+        
+        console.log('the event to be updated is:  ', $scope.currentEvent);
+        $scope.currentEvent = '';
     };    
     
-    $scope.updateEvent = function(dhis2Event){
-        $scope.editingEvent = !$scope.editingEvent;                
-        $scope.eventUnderEditing = '';
-    };
-    
-    $scope.cancelEditing = function(dhis2Event){
-        $scope.editingEvent = !$scope.editingEvent;                
-        $scope.eventUnderEditing = '';
-    };   
-    
-    $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();
         

=== 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-17 10:22:59 +0000
+++ dhis-2/dhis-web/dhis-web-event-capture/src/main/webapp/dhis-web-event-capture/app/styles/style.css	2014-02-18 09:41:26 +0000
@@ -731,7 +731,7 @@
 }
 
 .max-column-width {
-    max-width:200px; 
+    max-width:200px !important; 
     word-wrap:break-word; 
 }
 
@@ -770,6 +770,25 @@
     background-color: #ebf0f6
 }
 
+.dhis2-list-table-striped {
+    width: 100%;
+    border: 1px solid #c2c2c2;
+    padding: 5px 10px;
+}
+
+.dhis2-list-table-striped>thead>tr, 
+.dhis2-list-table-striped>tbody>tr, 
+.dhis2-list-table-striped>tfoot>tr, 
+.dhis2-list-table-striped>thead>tr, 
+.dhis2-list-table-striped>tbody>tr, 
+.dhis2-list-table-striped>tfoot>tr {
+    border: none;
+}
+
+.dhis2-list-table-striped > tbody > tr:nth-child(odd)> td, .dhis2-table-striped > tbody > tr:nth-child(odd)> th {
+    background-color: #ebf0f6
+}
+
 .dhis2-table-hover > tbody > tr:hover > td, .table-hover > tbody > tr:hover > th {
     background-color: #dfe9f4;
 }
@@ -903,3 +922,142 @@
         box-shadow: 0 5px 15px rgba(0,0,0,0.5)
     }
 }
+
+.container {
+    padding-right: 15px;
+    padding-left: 15px;
+    margin-right: auto;
+    margin-left: auto
+}
+.container:before, .container:after {
+    display: table;
+    content: " "
+}
+.container:after {
+    clear: both
+}
+.container:before, .container:after {
+    display: table;
+    content: " "
+}
+.container:after {
+    clear: both
+}
+@media (min-width: 768px) {
+    .container {
+        width: 750px
+    }  z-index: 1051;
+}
+@media (min-width: 992px) {
+    .container {
+        width: 970px
+    }
+}
+@media (min-width: 1200px) {
+    .container {
+        width: 1170px
+    }
+}
+.container > .navbar-header, .container > .navbar-collapse {
+    margin-right: -15px;
+    margin-left: -15px
+}
+@media (min-width: 768px) {
+    .container > .navbar-header, .container > .navbar-collapse {
+        margin-right: 0;
+        margin-left: 0
+    }
+}
+
+@media (min-width: 768px) {
+    .navbar > .container .navbar-brand {
+        margin-left: -15px
+    }
+}
+
+.container .jumbotron {
+    border-radius: 6px
+}
+@media screen and (min-width: 768px) {
+    .jumbotron {
+        padding-top: 48px;
+        padding-bottom: 48px
+    }
+    .container .jumbotron {
+        padding-right: 60px;
+        padding-left: 60px
+    }
+    .jumbotron h1 {
+        font-size: 63px
+    }
+}
+
+.dropdown {
+    position: relative
+}
+.dropdown-toggle:focus {
+    outline: 0
+}
+.dropdown-menu {
+    position: absolute;
+    top: 100%;
+    left: 0;
+    z-index: 1000;
+    display: none;
+    float: left;
+    min-width: 160px;
+    padding: 5px 0;
+    margin: 2px 0 0;
+    font-size: 14px;
+    list-style: none;
+    background-color: #fff;
+    border: 1px solid #ccc;
+    border: 1px solid rgba(0,0,0,0.15);
+    border-radius: 4px;
+    -webkit-box-shadow: 0 6px 12px rgba(0,0,0,0.175);
+    box-shadow: 0 6px 12px rgba(0,0,0,0.175);
+    background-clip: padding-box
+}
+.dropdown-menu.pull-right {
+    right: 0;
+    left: auto
+}
+.dropdown-menu .divider {
+    height: 1px;
+    margin: 9px 0;
+    overflow: hidden;
+    background-color: #e5e5e5
+}
+.dropdown-menu > li > a {
+    display: block;
+    padding: 3px 20px;
+    clear: both;
+    font-weight: normal;
+    line-height: 1.428571429;
+    color: #333;
+    white-space: nowrap
+}
+.dropdown-menu > li > a:hover, .dropdown-menu > li > a:focus {
+    color: #262626;
+    text-decoration: none;
+    background-color: #f5f5f5
+}
+.dropdown-menu > .active > a, .dropdown-menu > .active > a:hover, .dropdown-menu > .active > a:focus {
+    color: #fff;
+    text-decoration: none;
+    background-color: #428bca;
+    outline: 0
+}
+.dropdown-menu > .disabled > a, .dropdown-menu > .disabled > a:hover, .dropdown-menu > .disabled > a:focus {
+    color: #999
+}
+.dropdown-menu > .disabled > a:hover, .dropdown-menu > .disabled > a:focus {
+    text-decoration: none;
+    cursor: not-allowed;
+    background-color: transparent;
+    background-image: none;
+    filter: progid:DXImageTransform.Microsoft.gradient(enabled=false)
+}
+.open > .dropdown-menu {
+    display: block
+}
\ No newline at end of file

=== 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-17 11:45:07 +0000
+++ dhis-2/dhis-web/dhis-web-event-capture/src/main/webapp/dhis-web-event-capture/app/views/eventList.html	2014-02-18 09:41:26 +0000
@@ -1,7 +1,7 @@
 <div id="contextMenu" class="contextMenu" style="width: 180px;">
     <ul id="contextMenuItems" class="contextMenuItems">
-        <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="showEditEventInGrid()"><i class="fa fa-edit"></i>&nbsp;&nbsp;{{'edit_in_grid'| translate}}</a></li>
+        <li><a href ng-click="showEditEventInFull()"><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>
@@ -12,15 +12,17 @@
     <tr>
         <td style="vertical-align:top">
             <div id="content">
-                <div ng-show="editGridHeaders" class="container-1-4">
+                
+                <!-- visible when editing grid columns - need to think better way to display this-->
+                <div ng-show="editGridColumns" class="container-1-4">
                     <label>{{'show_hide_columns'| translate}}</label>
                     <table>
-                        <tr ng-repeat="eventGridHeader in eventGridHeaders">
+                        <tr ng-repeat="eventGridColumn in eventGridColumns">
                             <td>
-                                {{eventGridHeader.name}}
+                                {{eventGridColumn.name}}
                             </td>
                             <td>
-                                <input type="checkbox" ng-model="eventGridHeader.hide">{{'hide'| translate}}
+                                <input type="checkbox" ng-model="eventGridColumn.hide">{{'hide'| translate}}
                             </td>
                         </tr>                    
                         <tr>
@@ -33,61 +35,66 @@
                         </tr>
                     </table>
                 </div>
+                
                 <table class="listTable dhis2-table-striped dhis2-table-hover">                    
-                    <thead>
-                        <!--<tr ng-show="editGridHeaders">
-                            <td ng-repeat="eventGridHeader in eventGridHeaders">
-                                {{eventGridHeader.name}}&nbsp;&nbsp;<input type="checkbox" ng-model="eventGridHeader.hide">{{'hide'| translate}}
-                            </td>
-                            <td>
-                                <a href ng-click="showHideColumns(false)" title="{{'close'| translate}}" class="black"><i class="fa fa-times-circle"></i></a>
-                                <a href ng-click="showHideColumns(true)" title="{{'show_all'| translate}}" class="black"><i class="fa fa-check-square"></i></a>
-                            </td>
-                        </tr>-->
+                    <thead>                        
                         <tr>
-                            <th ng-show="!eventGridHeader.hide" 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 ng-show="!eventGridColumn.hide" class="max-column-width" ng-click="sortEventGrid(eventGridColumn)" ng-repeat="eventGridColumn in eventGridColumns">
+                                {{eventGridColumn.name}}
+                                <i ng-show="sortHeader == eventGridColumn.id && !reverse" class="fa fa-sort-desc"></i>
+                                <i ng-show="sortHeader == eventGridColumn.id && reverse" class="fa fa-sort-asc"></i>
                             </th>
-                            <th ng-hide="editGridHeaders">
+                            <th ng-hide="editGridColumns">
                                 <a href ng-click="showHideColumns(false)" title="{{'show_hide_columns'| translate}}"><i class="fa fa-cog"></i></a>
                             </th>         
                         </tr>                        
                     </thead>
                     <tbody id="list">
-                        <tr 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) || eventGridHeader.hide" ng-repeat="eventGridHeader in eventGridHeaders">
-                                {{dhis2Event[eventGridHeader.id]}}                                              
+                        <tr ng-repeat="dhis2Event in dhis2Events| paginate:rowsPerPage | orderBy:sortHeader:reverse" ng-click="showContextMenu(dhis2Event)">
+                            
+                            <!-- Visible when event is not under editing -->
+                            <td dhis-context-menu selected-item={{dhis2Event}} class="max-column-width" ng-hide="(currentEvent.event == dhis2Event.event) || eventGridColumn.hide" ng-repeat="eventGridColumn in eventGridColumns">
+                                {{dhis2Event[eventGridColumn.id]}}                                              
                             </td>
-                            <td class="max-column-width" ng-show="(eventUnderEditing.event == dhis2Event.event) && !eventGridHeader.hide" ng-repeat="eventGridHeader in eventGridHeaders">
-                                <div ng-switch="programStageDataElements[eventGridHeader.id].type">
+                            
+                            <!-- Visible when event is under editing - in grid -->
+                            <td class="max-column-width" ng-show="(currentEvent.event == dhis2Event.event) && !eventGridColumn.hide" ng-repeat="eventGridColumn in eventGridColumns">
+                                <div ng-switch="programStageDataElements[eventGridColumn.id].type">
                                     <div ng-switch-when="int">
-                                        <input type="number" style="width:90%;" ng-model="eventUnderEditing[eventGridHeader.id]" value="eventUnderEditing[eventGridHeader.id]"/>
+                                        <input type="number" style="width:90%;" ng-model="currentEvent[eventGridColumn.id]" value="currentEvent[eventGridColumn.id]"/>
                                     </div>
                                     <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 ng-switch="programStageDataElements[eventGridColumn.id].optionSet.options.length > 20">
+                                            <div ng-switch-when="true">
+                                                <div class="container-fluid">
+                                                    <input type="text" style="width:90%;" ng-model="currentEvent[eventGridColumn.id]" value="currentEvent[eventGridColumn.id]" typeahead="option for option in programStageDataElements[eventGridColumn.id].optionSet.options | filter:$viewValue | limitTo:20" >                                            
+                                                </div>
+                                            </div>
+                                            <div ng-switch-default>
+                                                <select style="width:90%;" ng-model="currentEvent[eventGridColumn.id]" value="currentEvent[eventGridColumn.id]" ng-options='option for option in programStageDataElements[eventGridColumn.id].optionSet.options'>
+                                                    <option value="">{{'please_select'| translate}}</option>
+                                                </select>
+                                            </div>
+                                        </div>
                                     </div>
                                     <div ng-switch-when="bool">
-                                        <select style="width:90%;" ng-model="eventUnderEditing[eventGridHeader.id]" value="eventUnderEditing[eventGridHeader.id]">
+                                        <select style="width:90%;" ng-model="currentEvent[eventGridColumn.id]" value="currentEvent[eventGridColumn.id]">
                                             <option value="">{{'please_select'| translate}}</option>                        
                                             <option value="0">{{'no'| translate}}</option>
                                             <option value="1">{{'yes'| translate}}</option>
                                         </select>
                                     </div>
                                     <div ng-switch-when="date">
-                                        <input type="text" style="width:90%;" placeholder="yyyy-mm-dd" ng-date ng-model="eventUnderEditing[eventGridHeader.id]" value="eventUnderEditing[eventGridHeader.id]">
+                                        <input type="text" style="width:90%;" placeholder="yyyy-mm-dd" ng-date ng-model="currentEvent[eventGridColumn.id]" value="currentEvent[eventGridColumn.id]">
                                     </div>
                                 </div>
-                            </td>
+                            </td>                            
                             <td>                                
-                                <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 ng-show="currentEvent.event == dhis2Event.event">
+                                    <a href ng-click="updateEvent()" title="{{'update'| translate}}"><span class='black'><i class="fa fa-floppy-o fa-2x"></i></span></a>
+                                    <a href ng-click="showEventList()" title="{{'cancel'| translate}}"><span class='red'><i class="fa fa-undo fa-2x"></i></span></a>       
                                 </span>
-                            </td>
+                            </td>                            
                         </tr>
                     </tbody>        
                 </table>

=== modified file 'dhis-2/dhis-web/dhis-web-event-capture/src/main/webapp/dhis-web-event-capture/app/views/eventRegistration.html'
--- dhis-2/dhis-web/dhis-web-event-capture/src/main/webapp/dhis-web-event-capture/app/views/eventRegistration.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/eventRegistration.html	2014-02-18 09:41:26 +0000
@@ -1,46 +1,56 @@
-<form role="form" ng-show="eventRegistration">    
-    <div class="form-group" ng-repeat="newEventDataValue in newDhis2Event.dataValues">
-        <label>{{newEventDataValue.name}}</label>
-        <div ng-switch="newEventDataValue.dataElement.type">
-            <div ng-switch-when="int">
-                <input type="number" class="form-control" ng-model="newEventDataValue.value"/>
-            </div>
-            <div ng-switch-when="string">
-                <select class="form-control" ng-model='newEventDataValue.value' ng-options='option for option in newEventDataValue.dataElement.optionSet.options | limitTo:20'>
-                    <option value="">{{'please_select'| translate}}</option>
-                </select>
-            </div>
-            <div ng-switch-when="bool">
-                <select class="form-control" ng-model='newEventDataValue.value'>
-                    <option value="">{{'please_select'| translate}}</option>                        
-                    <option value="0">{{'no'| translate}}</option>
-                    <option value="1">{{'yes'| translate}}</option>
-                </select>
-            </div>
-            <div ng-switch-when="date">
-                <input type="text" placeholder="yyyy-mm-dd" class="form-control" ng-date ng-model="newEventDataValue.value"/>
-            </div>
-        </div>
-    </div>                                            
-    <span>
-        <button ng-click="saveEvent(newDhis2Event)" class="button">{{'add' | translate}}</button>
-        <button ng-click="cancelAdding(newDhis2Event)" class="button">{{'cancel' | translate}}</button>      
-    </span>
-</form>
-<!--<form role="form">
-    <div class="form-group">
-        <label>{{'registering_unit'| translate}}</label>
-        <input type="text" class="form-control" value="{{selectedOrgUnit.name| translate}}" disabled>
-    </div>
-    <div class="form-group">
-        <label>{{'program'| translate}}</label>
-        <span class="inline">
-
-            <select class="form-control" ng-model="pr" ng-options="program as program.label for program in programs | orderBy: 'label'" ng-change="loadEvents(pr)">
-                <option value="">{{'please_select'| translate}}</option>
-            </select>
-
-            <button ng-show="selectedProgramStage" ng-click="registerEvent()" class="button">{{'register_new_event'| translate}}</button>
-        </span>
-    </div>                       
-</form>-->
+<div ng-show="eventRegistration" style="width:50%;">
+    <table class="dhis2-list-table-striped">                    
+        <thead>                        
+            <tr>
+                <th>
+                    {{'data_element' | translate}}                    
+                </th>
+                <th>
+                    {{'value' | translate}}                    
+                </th>         
+            </tr>                        
+        </thead>
+        <tbody id="list">
+            <tr ng-repeat="eventDataValue in currentEvent.dataValues">                
+                <td class="max-column-width">
+                    {{eventDataValue.name}}                                              
+                </td>
+                <td class="max-column-width">
+                    <div ng-switch="eventDataValue.dataElement.type">
+                        <div ng-switch-when="int">
+                            <input type="number" style="width:98%;" ng-model="eventDataValue.value"/>
+                        </div>
+                        <div ng-switch-when="string">                                        
+                            <div ng-switch="eventDataValue.dataElement.optionSet.options.length > 20">
+                                <div ng-switch-when="true">
+                                    <div class="container-fluid">
+                                        <input type="text" style="width:98%;" ng-model="eventDataValue.value" typeahead="option for option in eventDataValue.dataElement.optionSet.options | filter:$viewValue | limitTo:20" >                                            
+                                    </div>
+                                </div>
+                                <div ng-switch-default>
+                                    <select style="width:98%;" ng-model="eventDataValue.value" ng-options='option for option in eventDataValue.dataElement.optionSet.options'>
+                                        <option value="">{{'please_select'| translate}}</option>
+                                    </select>
+                                </div>
+                            </div>
+                        </div>
+                        <div ng-switch-when="bool">
+                            <select style="width:98%;" ng-model="eventDataValue.value">
+                                <option value="">{{'please_select'| translate}}</option>                        
+                                <option value="0">{{'no'| translate}}</option>
+                                <option value="1">{{'yes'| translate}}</option>
+                            </select>
+                        </div>
+                        <div ng-switch-when="date">
+                            <input type="text" style="width:98%;" placeholder="yyyy-mm-dd" ng-date ng-model="eventDataValue.value">
+                        </div>
+                    </div>
+                </td>
+            </tr>
+        </tbody>        
+    </table>
+    
+    <button ng-show="selectedProgramStage" ng-click="addEvent()" class="button">{{'save'| translate}}</button>
+    &nbsp;&nbsp;&nbsp;&nbsp;
+    <button ng-show="selectedProgramStage" ng-click="showEventList(null)" class="button">{{'back'| translate}}</button>  
+</div>
\ No newline at end of file

=== added file 'dhis-2/dhis-web/dhis-web-event-capture/src/main/webapp/dhis-web-event-capture/app/views/eventUpdate.html'
--- dhis-2/dhis-web/dhis-web-event-capture/src/main/webapp/dhis-web-event-capture/app/views/eventUpdate.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/eventUpdate.html	2014-02-18 09:41:26 +0000
@@ -0,0 +1,56 @@
+<div ng-show="editingEventInFull" style="width:50%;">
+    <table class="dhis2-list-table-striped">                    
+        <thead>                        
+            <tr>
+                <th>
+                    {{'data_element' | translate}}                    
+                </th>
+                <th>
+                    {{'value' | translate}}                    
+                </th>         
+            </tr>                        
+        </thead>
+        <tbody id="list">
+            <tr ng-repeat="eventGridColumn in eventGridColumns">
+                <td class="max-column-width">
+                    {{eventGridColumn.name}}                                              
+                </td>
+                <td class="max-column-width">
+                    <div ng-switch="programStageDataElements[eventGridColumn.id].type">
+                        <div ng-switch-when="int">
+                            <input type="number" style="width:98%;" ng-model="currentEvent[eventGridColumn.id]"/>
+                        </div>
+                        <div ng-switch-when="string">                                        
+                            <div ng-switch="programStageDataElements[eventGridColumn.id].optionSet.options.length > 20">
+                                <div ng-switch-when="true">
+                                    <div class="container-fluid">
+                                        <input type="text" style="width:98%;" ng-model="currentEvent[eventGridColumn.id]" typeahead="option for option in programStageDataElements[eventGridColumn.id].optionSet.options | filter:$viewValue | limitTo:20" >                                            
+                                    </div>
+                                </div>
+                                <div ng-switch-default>
+                                    <select style="width:98%;" ng-model="currentEvent[eventGridColumn.id]" ng-options='option for option in programStageDataElements[eventGridColumn.id].optionSet.options'>
+                                        <option value="">{{'please_select'| translate}}</option>
+                                    </select>
+                                </div>
+                            </div>
+                        </div>
+                        <div ng-switch-when="bool">
+                            <select style="width:98%;" ng-model="currentEvent[eventGridColumn.id]">
+                                <option value="">{{'please_select'| translate}}</option>                        
+                                <option value="0">{{'no'| translate}}</option>
+                                <option value="1">{{'yes'| translate}}</option>
+                            </select>
+                        </div>
+                        <div ng-switch-when="date">
+                            <input type="text" style="width:98%;" placeholder="yyyy-mm-dd" ng-date ng-model="currentEvent[eventGridColumn.id]">
+                        </div>
+                    </div>
+                </td>
+            </tr>
+        </tbody>        
+    </table>
+    
+    <button ng-show="selectedProgramStage" ng-click="updateEvent()" class="button">{{'update'| translate}}</button>
+    &nbsp;&nbsp;&nbsp;&nbsp;
+    <button ng-show="selectedProgramStage" ng-click="showEventList()" class="button">{{'back'| translate}}</button>  
+</div>
\ No newline at end of file

=== modified file 'dhis-2/dhis-web/dhis-web-event-capture/src/main/webapp/dhis-web-event-capture/app/views/orgUnitTree.html'
--- dhis-2/dhis-web/dhis-web-event-capture/src/main/webapp/dhis-web-event-capture/app/views/orgUnitTree.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/orgUnitTree.html	2014-02-18 09:41:26 +0000
@@ -1,22 +1,24 @@
-<script type="text/ng-template" id="orgUnitTree.html">
-
-    <span class="tree-expand-collapse" ng-click="expandCollapse(orgUnit)" ng-show="orgUnit.show && orgUnit.children.length > 0"><i class="fa fa-minus-square-o"></i></span>
-    <span class="tree-expand-collapse" ng-click="expandCollapse(orgUnit)" ng-show="(!orgUnit.show && orgUnit.children.length > 0) || (!orgUnit.show && orgUnit.hasChildren)"><i class="fa fa-plus-square-o"></i></span>
-
-    <span class="tree-node" ng-click="loadPrograms(orgUnit)" ng-class="{'selected-org-unit' : orgUnit.id === selectedOrgUnit.id}">{{orgUnit.name}}</span>
-
-    <ul class="tree" id="tree" ng-show="orgUnit.show">
+<div class="org-unit-tree">
+    <script type="text/ng-template" id="orgUnitTree.html">
+
+        <span class="tree-expand-collapse" ng-click="expandCollapse(orgUnit)" ng-show="orgUnit.show && orgUnit.children.length > 0"><i class="fa fa-minus-square-o"></i></span>
+        <span class="tree-expand-collapse" ng-click="expandCollapse(orgUnit)" ng-show="(!orgUnit.show && orgUnit.children.length > 0) || (!orgUnit.show && orgUnit.hasChildren)"><i class="fa fa-plus-square-o"></i></span>
+
+        <span class="tree-node" ng-click="loadPrograms(orgUnit)" ng-class="{'selected-org-unit' : orgUnit.id === selectedOrgUnit.id}">{{orgUnit.name}}</span>
+
+        <ul class="tree" id="tree" ng-show="orgUnit.show">
         <li ng-repeat="orgUnit in orgUnit.children | orderBy: 'name'" ng-include="'orgUnitTree.html'"></li>
-    </ul>  
-
-</script>    
-
-<ul class="tree" id="tree">
-    <li ng-repeat="orgUnit in orgUnits| orderBy: 'name'" ng-include="'orgUnitTree.html'"></li>
-</ul>
-
-
+        </ul>  
+
+    </script>    
+
+    <ul class="tree" id="tree">
+        <li ng-repeat="orgUnit in orgUnits| orderBy: 'name'" ng-include="'orgUnitTree.html'"></li>
+    </ul>
+</div>
 <!--<div id="orgUnitTree">
     <ul>
     </ul>
-</div>-->
\ No newline at end of file
+</div>
+
+<img id="ouwt_loader" src="../../images/ajax-loader-bar.gif"/>-->
\ No newline at end of file