=== modified file 'dhis-2/dhis-services/dhis-service-dxf2/src/main/java/org/hisp/dhis/dxf2/events/event/AbstractEventService.java'
--- dhis-2/dhis-services/dhis-service-dxf2/src/main/java/org/hisp/dhis/dxf2/events/event/AbstractEventService.java	2014-08-19 12:59:01 +0000
+++ dhis-2/dhis-services/dhis-service-dxf2/src/main/java/org/hisp/dhis/dxf2/events/event/AbstractEventService.java	2014-08-21 16:30:01 +0000
@@ -415,16 +415,19 @@
         programStageInstance.setDueDate( dueDate );
         programStageInstance.setOrganisationUnit( organisationUnit );
 
-        if ( programStageInstance.getProgramStage().getCaptureCoordinates() && event.getCoordinate().isValid() )
-        {
-            programStageInstance.setLatitude( event.getCoordinate().getLatitude() );
-            programStageInstance.setLongitude( event.getCoordinate().getLongitude() );
-        }
-        else
-        {
-            programStageInstance.setLatitude( null );
-            programStageInstance.setLongitude( null );
-        }
+        if( !singleValue )
+        {
+            if ( programStageInstance.getProgramStage().getCaptureCoordinates() && event.getCoordinate().isValid() )
+            {
+                programStageInstance.setLatitude( event.getCoordinate().getLatitude() );
+                programStageInstance.setLongitude( event.getCoordinate().getLongitude() );
+            }
+            else
+            {
+                programStageInstance.setLatitude( null );
+                programStageInstance.setLongitude( null );
+            }
+        }        
 
         programStageInstanceService.updateProgramStageInstance( programStageInstance );
 
@@ -497,7 +500,7 @@
 
         if ( event.getStatus() == EventStatus.ACTIVE )
         {
-            programStageInstance.setStatus( EventStatus.ACTIVE );
+            programStageInstance.setStatus( EventStatus.VISITED );
         }
         else if ( event.getStatus() == EventStatus.COMPLETED )
         {
@@ -505,11 +508,11 @@
         }
         else if ( event.getStatus() == EventStatus.SCHEDULE )
         {
-            programStageInstance.setStatus( EventStatus.ACTIVE );
+            programStageInstance.setStatus( EventStatus.VISITED );
         }
         else if ( event.getStatus() == EventStatus.SKIPPED )
         {
-            programStageInstance.setStatus( EventStatus.ACTIVE );
+            programStageInstance.setStatus( EventStatus.VISITED );
         }
 
         programStageInstance.setExecutionDate( executionDate );

=== added file 'dhis-2/dhis-web/dhis-web-api/src/main/java/org/hisp/dhis/webapi/controller/ProgramStageSectionController.java'
--- dhis-2/dhis-web/dhis-web-api/src/main/java/org/hisp/dhis/webapi/controller/ProgramStageSectionController.java	1970-01-01 00:00:00 +0000
+++ dhis-2/dhis-web/dhis-web-api/src/main/java/org/hisp/dhis/webapi/controller/ProgramStageSectionController.java	2014-08-21 16:30:01 +0000
@@ -0,0 +1,20 @@
+/**
+ * 
+ */
+package org.hisp.dhis.webapi.controller;
+
+import org.hisp.dhis.program.ProgramStageSection;
+import org.hisp.dhis.schema.descriptors.ProgramStageSectionSchemaDescriptor;
+import org.springframework.stereotype.Controller;
+import org.springframework.web.bind.annotation.RequestMapping;
+
+/**
+ * @author Abyot Asalefew Gizaw <abyota@gmail.com>
+ *
+ */
+@Controller
+@RequestMapping( value = ProgramStageSectionSchemaDescriptor.API_ENDPOINT )
+public class ProgramStageSectionController
+    extends AbstractCrudController<ProgramStageSection>
+{
+}
\ No newline at end of file

=== modified file 'dhis-2/dhis-web/dhis-web-apps/src/main/webapp/dhis-web-event-capture/i18n/en.json'
--- dhis-2/dhis-web/dhis-web-apps/src/main/webapp/dhis-web-event-capture/i18n/en.json	2014-08-19 11:45:47 +0000
+++ dhis-2/dhis-web/dhis-web-apps/src/main/webapp/dhis-web-event-capture/i18n/en.json	2014-08-21 16:30:01 +0000
@@ -76,7 +76,8 @@
     "lower_limit": "Lower limit",
     "upper_limit": "Upper limit",
     "please_select": "[Please Select]",    
-    "not_selected": "NOT_SELECTED",   
+    "not_selected": "NOT_SELECTED",
+    "no_value": "NO_VALUE",
     "search": "Search",
     "locate_organisation_unit_by_name": "Locate organisation unit by name",
     "register_new": "Register New",

=== modified file 'dhis-2/dhis-web/dhis-web-apps/src/main/webapp/dhis-web-event-capture/index.html'
--- dhis-2/dhis-web/dhis-web-apps/src/main/webapp/dhis-web-event-capture/index.html	2014-08-19 13:26:58 +0000
+++ dhis-2/dhis-web/dhis-web-apps/src/main/webapp/dhis-web-event-capture/index.html	2014-08-21 16:30:01 +0000
@@ -1,5 +1,6 @@
 <!DOCTYPE html>
-<html manifest="event-capture.appcache" ng-app="eventCapture">
+<html ng-app="eventCapture">
+<!--<html manifest="event-capture.appcache" ng-app="eventCapture">-->
     <head>
         <title>Event Capture</title>
 
@@ -45,7 +46,7 @@
         <script type="text/javascript" src="../dhis-web-commons/javascripts/dhis2/dhis2.storage.memory.js"></script>
         <script type="text/javascript" src="../dhis-web-commons/javascripts/dhis2/dhis2.storage.js"></script>
         <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/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/javascripts/angular/plugins/angularLocalStorage.js"></script>
@@ -159,7 +160,7 @@
                     </table>
                 </div>
                 <!-- selection ends -->
-                <div id="hideTypeAheadPopUp"ng-hide="true"></div>
+                <div id="hideTypeAheadPopUp" ng-hide="true"></div>
                 <!-- event grid begins -->
                 <div ng-include="'views/eventList.html'"></div>
                 <!-- event grid ends -->
@@ -181,20 +182,6 @@
                                 <div ng-include="'views/defaultForm.html'"></div>                
                             </div>
 
-                            <!-- buttons for event registration / update begins -->
-                            <div style="clear: both;">                        
-                                <span ng-if="editingEventInFull">
-                                    <button ng-click="updateEvent()" class="button not-printable">{{'update'| translate}}</button>
-                                    <button ng-click="showEventList()" class="button not-printable">{{'go_back'| translate}}</button>
-                                </span>
-                                <span ng-if="eventRegistration">
-                                    <button ng-disabled="disableSaveAndAddNew" ng-click="addEvent(true)" class="button not-printable">{{'save_and_add_new'| translate}}</button>
-                                    <button ng-click="addEvent()" class="button not-printable">{{'save_and_back'| translate}}</button>
-                                    <button ng-click="showEventList(null)" class="button not-printable">{{'go_back'| translate}}</button>
-                                </span> 
-                            </div>
-                            <!-- buttons for event registration / update ends -->
-
                         </div>
                     </form>  
                 </div>

=== modified file 'dhis-2/dhis-web/dhis-web-apps/src/main/webapp/dhis-web-event-capture/scripts/controllers.js'
--- dhis-2/dhis-web/dhis-web-apps/src/main/webapp/dhis-web-event-capture/scripts/controllers.js	2014-08-19 11:45:47 +0000
+++ dhis-2/dhis-web/dhis-web-apps/src/main/webapp/dhis-web-event-capture/scripts/controllers.js	2014-08-21 16:30:01 +0000
@@ -17,6 +17,7 @@
                 DHIS2EventFactory,       
                 DHIS2EventService,
                 ContextMenuSelectedItem,
+                DateUtils,
                 ModalService,
                 DialogService) {   
    
@@ -123,7 +124,9 @@
             ProgramStageFactory.get($scope.selectedProgram.programStages[0].id).then(function (programStage){
                 
                 $scope.selectedProgramStage = programStage;   
-               
+                
+                console.log('The stage is:  ', $scope.selectedProgramStage);
+
                 //$scope.customForm = CustomFormService.processCustomForm($scope.selectedProgramStage);
                 $scope.customForm = $scope.selectedProgramStage.dataEntryForm ? $scope.selectedProgramStage.dataEntryForm.htmlCode : null; 
 
@@ -138,6 +141,10 @@
                     $scope.eventGridColumns.push({name: 'form_id', id: 'uid', type: 'string', compulsory: false, showFilter: false, show: true});
                     $scope.filterTypes['uid'] = 'string';
                 }
+                
+                $scope.eventGridColumns.push({name: $scope.selectedProgramStage.reportDateDescription ? $scope.selectedProgramStage.reportDateDescription : 'incident_date', id: 'event_date', type: 'date', compulsory: false, showFilter: false, show: true});
+                $scope.filterTypes['event_date'] = 'date';
+                $scope.filterText['event_date']= {};
 
                 angular.forEach($scope.selectedProgramStage.programStageDataElements, function(prStDe){
                     $scope.programStageDataElements[prStDe.dataElement.id] = prStDe; 
@@ -158,7 +165,7 @@
                     $scope.filterTypes[dataElement.id] = dataElement.type;
 
                     if(dataElement.type === 'date' || dataElement.type === 'int' ){
-                         $scope.filterText[dataElement.id]= {};
+                        $scope.filterText[dataElement.id]= {};
                     }
 
                 });           
@@ -227,7 +234,9 @@
                                     $scope.dhis2Events[i][dataValue.dataElement] = dataValue.value; 
                                 });
                                 
-                                $scope.dhis2Events[i]['uid'] = $scope.dhis2Events[i].event;
+                                $scope.dhis2Events[i]['uid'] = $scope.dhis2Events[i].event;                                
+                                $scope.dhis2Events[i].eventDate = DateUtils.format($scope.dhis2Events[i].eventDate);                                
+                                $scope.dhis2Events[i]['event_date'] = $scope.dhis2Events[i].eventDate;
 
                                 delete $scope.dhis2Events[i].dataValues;
                             }
@@ -340,7 +349,7 @@
     
     $scope.showEventRegistration = function(){        
         $scope.displayCustomForm = $scope.customForm ? true:false;        
-        
+        $scope.currentEvent = {};
         $scope.eventRegistration = !$scope.eventRegistration;          
         $scope.currentEvent = angular.copy($scope.newDhis2Event);        
         $scope.outerForm.submitted = false;
@@ -349,15 +358,15 @@
         if($scope.selectedProgramStage.preGenerateUID){
             $scope.eventUID = dhis2.util.uid();
             $scope.currentEvent['uid'] = $scope.eventUID;
-        }
-        
-        //$scope.currentEvent = {};
+        }        
     };    
     
     $scope.showEditEventInGrid = function(){
         $scope.currentEvent = ContextMenuSelectedItem.getSelectedItem();  
-        $scope.currentEventOrginialValue = angular.copy($scope.currentEvent);
-        $scope.editingEventInGrid = !$scope.editingEventInGrid;                
+        $scope.currentEventOrginialValue = angular.copy($scope.currentEvent);        
+        $scope.editingEventInGrid = !$scope.editingEventInGrid;              
+        //$scope.currentEvent['uid'] = $scope.currentEvent.event;
+        
         $scope.outerForm.$valid = true;
     };
     
@@ -370,10 +379,6 @@
         $scope.editingEventInFull = !$scope.editingEventInFull;   
         $scope.eventRegistration = false;
         
-        $scope.currentEvent.eventDate = moment($scope.currentEvent.eventDate, 'YYYY-MM-DD')._d;       
-        $scope.currentEvent.eventDate = Date.parse($scope.currentEvent.eventDate);
-        $scope.currentEvent.eventDate = $filter('date')($scope.currentEvent.eventDate, 'yyyy-MM-dd');
-        
         angular.forEach($scope.selectedProgramStage.programStageDataElements, function(prStDe){
             if(!$scope.currentEvent.hasOwnProperty(prStDe.dataElement.id)){
                 $scope.currentEvent[prStDe.dataElement.id] = '';
@@ -448,6 +453,8 @@
                 if( !$scope.dhis2Events ){
                     $scope.dhis2Events = [];                   
                 }
+                newEvent['uid'] = newEvent.event;
+                newEvent['event_date'] = DateUtils.format(newEvent.eventDate); 
                 $scope.dhis2Events.splice(0,0,newEvent);
                 
                 $scope.eventLength++;
@@ -497,10 +504,8 @@
                             event: $scope.currentEvent.event, 
                             dataValues: dataValues
                         };
-                        
-        updatedEvent.eventDate = moment(updatedEvent.eventDate, 'YYYY-MM-DD')._d;       
-        updatedEvent.eventDate = Date.parse(updatedEvent.eventDate);
-        updatedEvent.eventDate = $filter('date')(updatedEvent.eventDate, 'yyyy-MM-dd'); 
+
+        updatedEvent.eventDate = DateUtils.format(updatedEvent.eventDate);
         
         if($scope.selectedProgramStage.captureCoordinates){
             updatedEvent.coordinate = {latitude: $scope.currentEvent.coordinate.latitude ? $scope.currentEvent.coordinate.latitude : '',
@@ -568,6 +573,8 @@
             
             var updatedSingleValueEvent = {event: currentEvent.event, dataValues: [{value: newValue, dataElement: dataElement}]};
             var updatedFullValueEvent = DHIS2EventService.reconstructEvent(currentEvent, $scope.selectedProgramStage.programStageDataElements);
+            console.log('single:  ', updatedSingleValueEvent);
+            console.log('full:  ', updatedFullValueEvent);
             DHIS2EventFactory.updateForSingleValue(updatedSingleValueEvent, updatedFullValueEvent).then(function(data){
                 
                 var continueLoop = true;
@@ -583,7 +590,7 @@
                 
                 $scope.currentElement.updated = true;
                 $scope.updateSuccess = true;
-            });    
+            });
         }
     };
     

=== modified file 'dhis-2/dhis-web/dhis-web-apps/src/main/webapp/dhis-web-event-capture/scripts/event-capture.js'
--- dhis-2/dhis-web/dhis-web-apps/src/main/webapp/dhis-web-event-capture/scripts/event-capture.js	2014-08-19 11:45:47 +0000
+++ dhis-2/dhis-web/dhis-web-apps/src/main/webapp/dhis-web-event-capture/scripts/event-capture.js	2014-08-21 16:30:01 +0000
@@ -63,7 +63,7 @@
         promise = promise.then( getLoginDetails );
         promise = promise.then( getMetaPrograms );     
         promise = promise.then( getPrograms );     
-        promise = promise.then( getProgramStages );    
+        promise = promise.then( getProgramStages );
         promise = promise.then( getOptionSets );    
         promise.done( function() {           
             selection.responseReceived();            
@@ -188,7 +188,7 @@
     $.ajax({
         url: '../api/programs.json',
         type: 'GET',
-        data:'type=3&userFilter=true&paging=false&fields=id,name,version,programStages[id,version,programStageDataElements[dataElement[id,optionSet[id,version]]]]'
+        data:'type=3&userFilter=true&paging=false&fields=id,name,version,programStages[id,version,programStageSections[id],programStageDataElements[dataElement[id,optionSet[id,version]]]]'
     }).done( function(response) {          
         var programs = [];
         _.each( _.values( response.programs ), function ( program ) { 
@@ -257,7 +257,7 @@
 {
     return function() {
         return $.ajax( {
-            url: '../api/programs.json?filter=id:eq:' + id +'&fields=id,name,version,dateOfEnrollmentDescription,dateOfIncidentDescription,displayIncidentDate,ignoreOverdueEvents,organisationUnits[id,name],programStages[id,name,version]',
+            url: '../api/programs.json?filter=id:eq:' + id +'&fields=id,name,version,dataEntryMethod,dateOfEnrollmentDescription,dateOfIncidentDescription,displayIncidentDate,ignoreOverdueEvents,organisationUnits[id,name],programStages[id,name,version]',
             type: 'GET'
         }).done( function( response ){
             
@@ -334,7 +334,7 @@
 {
     return function() {
         return $.ajax( {
-            url: '../api/programStages.json?filter=id:eq:' + id +'&fields=id,name,version,description,reportDateDescription,captureCoordinates,dataEntryForm,minDaysFromStart,repeatable,preGenerateUID,programStageDataElements[displayInReports,allowProvidedElsewhere,allowDateInFuture,compulsory,dataElement[id,name,type,formName,optionSet[id]]]',
+            url: '../api/programStages.json?filter=id:eq:' + id +'&fields=id,name,version,description,reportDateDescription,captureCoordinates,dataEntryForm,minDaysFromStart,repeatable,preGenerateUID,programStageSections[id,name,programStageDataElements[dataElement[id]]],programStageDataElements[displayInReports,allowProvidedElsewhere,allowDateInFuture,compulsory,dataElement[id,name,type,formName,optionSet[id]]]',
             type: 'GET'
         }).done( function( response ){            
             _.each( _.values( response.programStages ), function( programStage ) {                

=== modified file 'dhis-2/dhis-web/dhis-web-apps/src/main/webapp/dhis-web-event-capture/scripts/services.js'
--- dhis-2/dhis-web/dhis-web-apps/src/main/webapp/dhis-web-event-capture/scripts/services.js	2014-08-19 12:59:01 +0000
+++ dhis-2/dhis-web/dhis-web-apps/src/main/webapp/dhis-web-event-capture/scripts/services.js	2014-08-21 16:30:01 +0000
@@ -4,6 +4,19 @@
 
 var eventCaptureServices = angular.module('eventCaptureServices', ['ngResource'])
 
+
+.service('DateUtils', function($filter){
+    
+    return {
+        format: function(dateValue) {            
+            dateValue = moment(dateValue, 'YYYY-MM-DD')._d;
+            dateValue = Date.parse(dateValue);
+            dateValue = $filter('date')(dateValue, 'yyyy-MM-dd');
+            return dateValue;
+        }
+    };            
+})
+
 /* factory for loading logged in user profiles from DHIS2 */
 .factory('CurrentUserProfile', function($http) { 
            
@@ -134,7 +147,6 @@
         },
     
         update: function(dhis2Event){  
-            console.log('the event is:  ', dhis2Event);
             dhis2.ec.storageManager.saveEvent(dhis2Event);
             var promise = $http.put('../api/events/' + dhis2Event.event, dhis2Event).then(function(response){
                 dhis2.ec.storageManager.clearEvent(dhis2Event);

=== modified file 'dhis-2/dhis-web/dhis-web-apps/src/main/webapp/dhis-web-event-capture/styles/style.css'
--- dhis-2/dhis-web/dhis-web-apps/src/main/webapp/dhis-web-event-capture/styles/style.css	2014-08-01 12:22:15 +0000
+++ dhis-2/dhis-web/dhis-web-apps/src/main/webapp/dhis-web-event-capture/styles/style.css	2014-08-21 16:30:01 +0000
@@ -216,7 +216,7 @@
 }
 
 /*----------------------------------------------------------------------------*/
-/* Bootstrap modal style
+/* Bootstrap modal and panel style
 /*----------------------------------------------------------------------------*/
 
 .modal-open {
@@ -530,6 +530,212 @@
     }
 }
 
+.panel {
+	margin-bottom: 20px;
+	background-color: #fff;
+	border: 1px solid transparent;
+	border-radius: 4px;
+	-webkit-box-shadow: 0 1px 1px rgba(0,0,0,0.05);
+	box-shadow: 0 1px 1px rgba(0,0,0,0.05)
+}
+.panel-body {
+	padding: 0;
+}
+.panel-body:before, .panel-body:after {
+	display: table;
+	content: " "
+}
+.panel-body:after {
+	clear: both
+}
+.panel-body:before, .panel-body:after {
+	display: table;
+	content: " "
+}
+.panel-body:after {
+	clear: both
+}
+.panel > .list-group {
+	margin-bottom: 0
+}
+.panel > .list-group .list-group-item {
+	border-width: 1px 0
+}
+.panel > .list-group .list-group-item:first-child {
+	border-top-right-radius: 0;
+	border-top-left-radius: 0
+}
+.panel > .list-group .list-group-item:last-child {
+	border-bottom: 0
+}
+.panel-heading+ .list-group .list-group-item:first-child {
+	border-top-width: 0
+}
+.panel > .table, .panel > .table-responsive {
+	margin-bottom: 0
+}
+.panel > .panel-body+ .table, .panel > .panel-body+ .table-responsive {
+	border-top: 1px solid #ddd
+}
+.panel > .table-bordered, .panel > .table-responsive > .table-bordered {
+	border: 0
+}
+.panel > .table-bordered > thead > tr > th:first-child, .panel > .table-responsive > .table-bordered > thead > tr > th:first-child, .panel > .table-bordered > tbody > tr > th:first-child, .panel > .table-responsive > .table-bordered > tbody > tr > th:first-child, .panel > .table-bordered > tfoot > tr > th:first-child, .panel > .table-responsive > .table-bordered > tfoot > tr > th:first-child, .panel > .table-bordered > thead > tr > td:first-child, .panel > .table-responsive > .table-bordered > thead > tr > td:first-child, .panel > .table-bordered > tbody > tr > td:first-child, .panel > .table-responsive > .table-bordered > tbody > tr > td:first-child, .panel > .table-bordered > tfoot > tr > td:first-child, .panel > .table-responsive > .table-bordered > tfoot > tr > td:first-child {
+	border-left: 0
+}
+.panel > .table-bordered > thead > tr > th:last-child, .panel > .table-responsive > .table-bordered > thead > tr > th:last-child, .panel > .table-bordered > tbody > tr > th:last-child, .panel > .table-responsive > .table-bordered > tbody > tr > th:last-child, .panel > .table-bordered > tfoot > tr > th:last-child, .panel > .table-responsive > .table-bordered > tfoot > tr > th:last-child, .panel > .table-bordered > thead > tr > td:last-child, .panel > .table-responsive > .table-bordered > thead > tr > td:last-child, .panel > .table-bordered > tbody > tr > td:last-child, .panel > .table-responsive > .table-bordered > tbody > tr > td:last-child, .panel > .table-bordered > tfoot > tr > td:last-child, .panel > .table-responsive > .table-bordered > tfoot > tr > td:last-child {
+	border-right: 0
+}
+.panel > .table-bordered > thead > tr:last-child > th, .panel > .table-responsive > .table-bordered > thead > tr:last-child > th, .panel > .table-bordered > tbody > tr:last-child > th, .panel > .table-responsive > .table-bordered > tbody > tr:last-child > th, .panel > .table-bordered > tfoot > tr:last-child > th, .panel > .table-responsive > .table-bordered > tfoot > tr:last-child > th, .panel > .table-bordered > thead > tr:last-child > td, .panel > .table-responsive > .table-bordered > thead > tr:last-child > td, .panel > .table-bordered > tbody > tr:last-child > td, .panel > .table-responsive > .table-bordered > tbody > tr:last-child > td, .panel > .table-bordered > tfoot > tr:last-child > td, .panel > .table-responsive > .table-bordered > tfoot > tr:last-child > td {
+	border-bottom: 0
+}
+.panel-heading {
+	padding: 5px;
+	border-bottom: 1px solid transparent;
+	border-top-right-radius: 3px;
+	border-top-left-radius: 3px
+}
+.panel-heading > .dropdown .dropdown-toggle {
+	color: inherit
+}
+.panel-title {
+	margin-top: 0;
+	margin-bottom: 0;
+	font-size: 16px
+}
+.panel-title > a {
+	color: inherit
+}
+.panel-footer {
+	padding: 10px 15px;
+	background-color: #f5f5f5;
+	border-top: 1px solid #ddd;
+	border-bottom-right-radius: 3px;
+	border-bottom-left-radius: 3px
+}
+.panel-group .panel {
+	margin-bottom: 0;
+	overflow: hidden;
+	border-radius: 4px
+}
+.panel-group .panel+ .panel {
+	margin-top: 5px
+}
+.panel-group .panel-heading {
+	border-bottom: 0
+}
+.panel-group .panel-heading+ .panel-collapse .panel-body {
+	border-top: 1px solid #ddd
+}
+.panel-group .panel-footer {
+	border-top: 0
+}
+.panel-group .panel-footer+ .panel-collapse .panel-body {
+	border-bottom: 1px solid #ddd
+}
+.panel-default {
+	border-color: #ddd
+}
+.panel-default > .panel-heading {
+	color: #333;
+	background-color: #f5f5f5;
+	border-color: #ddd
+}
+.panel-default > .panel-heading+ .panel-collapse .panel-body {
+	border-top-color: #ddd
+}
+.panel-default > .panel-heading > .dropdown .caret {
+	border-color: #333 transparent
+}
+.panel-default > .panel-footer+ .panel-collapse .panel-body {
+	border-bottom-color: #ddd
+}
+.panel-primary {
+	border-color: #428bca
+}
+.panel-primary > .panel-heading {
+	color: #fff;
+	background-color: #428bca;
+	border-color: #428bca
+}
+.panel-primary > .panel-heading+ .panel-collapse .panel-body {
+	border-top-color: #428bca
+}
+.panel-primary > .panel-heading > .dropdown .caret {
+	border-color: #fff transparent
+}
+.panel-primary > .panel-footer+ .panel-collapse .panel-body {
+	border-bottom-color: #428bca
+}
+.panel-success {
+	border-color: #d6e9c6
+}
+.panel-success > .panel-heading {
+	color: #468847;
+	background-color: #dff0d8;
+	border-color: #d6e9c6
+}
+.panel-success > .panel-heading+ .panel-collapse .panel-body {
+	border-top-color: #d6e9c6
+}
+.panel-success > .panel-heading > .dropdown .caret {
+	border-color: #468847 transparent
+}
+.panel-success > .panel-footer+ .panel-collapse .panel-body {
+	border-bottom-color: #d6e9c6
+}
+.panel-warning {
+	border-color: #faebcc
+}
+.panel-warning > .panel-heading {
+	color: #c09853;
+	background-color: #fcf8e3;
+	border-color: #faebcc
+}
+.panel-warning > .panel-heading+ .panel-collapse .panel-body {
+	border-top-color: #faebcc
+}
+.panel-warning > .panel-heading > .dropdown .caret {
+	border-color: #c09853 transparent
+}
+.panel-warning > .panel-footer+ .panel-collapse .panel-body {
+	border-bottom-color: #faebcc
+}
+.panel-danger {
+	border-color: #ebccd1
+}
+.panel-danger > .panel-heading {
+	color: #b94a48;
+	background-color: #f2dede;
+	border-color: #ebccd1
+}
+.panel-danger > .panel-heading+ .panel-collapse .panel-body {
+	border-top-color: #ebccd1
+}
+.panel-danger > .panel-heading > .dropdown .caret {
+	border-color: #b94a48 transparent
+}
+.panel-danger > .panel-footer+ .panel-collapse .panel-body {
+	border-bottom-color: #ebccd1
+}
+.panel-info {
+	border-color: #bce8f1
+}
+.panel-info > .panel-heading {
+	color: #3a87ad;
+	background-color: #d9edf7;
+	border-color: #bce8f1
+}
+.panel-info > .panel-heading+ .panel-collapse .panel-body {
+	border-top-color: #bce8f1
+}
+.panel-info > .panel-heading > .dropdown .caret {
+	border-color: #3a87ad transparent
+}
+.panel-info > .panel-footer+ .panel-collapse .panel-body {
+	border-bottom-color: #bce8f1
+}
+
 .dropdown {
     position: relative
 }
@@ -615,6 +821,10 @@
     clear: both
 }
 
+.horizonal-spacing{
+    margin-right: 20px;    
+}
+
 
 @media print {
     #header, #leftBar, .not-printable {

=== modified file 'dhis-2/dhis-web/dhis-web-apps/src/main/webapp/dhis-web-event-capture/views/customForm.html'
--- dhis-2/dhis-web/dhis-web-apps/src/main/webapp/dhis-web-event-capture/views/customForm.html	2014-08-19 11:45:47 +0000
+++ dhis-2/dhis-web/dhis-web-apps/src/main/webapp/dhis-web-event-capture/views/customForm.html	2014-08-21 16:30:01 +0000
@@ -79,4 +79,17 @@
             </tr>
         </table>  
     </div>    
-</div>
\ No newline at end of file
+</div>
+<!-- buttons for event registration / update begins -->
+<div style="clear: both;">                        
+    <span ng-if="editingEventInFull">
+        <button ng-click="updateEvent()" class="button not-printable">{{'update'| translate}}</button>
+        <button ng-click="showEventList()" class="button not-printable">{{'go_back'| translate}}</button>
+    </span>
+    <span ng-if="eventRegistration">
+        <button ng-disabled="disableSaveAndAddNew" ng-click="addEvent(true)" class="button not-printable">{{'save_and_add_new'| translate}}</button>
+        <button ng-click="addEvent()" class="button not-printable">{{'save_and_back'| translate}}</button>
+        <button ng-click="showEventList(null)" class="button not-printable">{{'go_back'| translate}}</button>
+    </span> 
+</div>
+<!-- buttons for event registration / update ends -->
\ No newline at end of file

=== modified file 'dhis-2/dhis-web/dhis-web-apps/src/main/webapp/dhis-web-event-capture/views/defaultForm.html'
--- dhis-2/dhis-web/dhis-web-apps/src/main/webapp/dhis-web-event-capture/views/defaultForm.html	2014-08-19 11:45:47 +0000
+++ dhis-2/dhis-web/dhis-web-apps/src/main/webapp/dhis-web-event-capture/views/defaultForm.html	2014-08-21 16:30:01 +0000
@@ -1,137 +1,406 @@
-<table class="dhis2-list-table-striped">                    
-    <thead>                        
-        <tr>
-            <th>
-                {{'data_element'| translate}}                    
-            </th>
-            <th>
-                {{'value'| translate}}                    
-            </th>         
-        </tr>                        
-    </thead>
-    <tbody id="list">
-        <tr ng-if="selectedProgramStage.preGenerateUID && currentEvent['uid']">
-            <td>
-                {{'form_id' | translate}}
-            </td>
-            <td>
-                <input type="text" ng-disabled="true" ng-model="currentEvent['uid']" style="width:99%;">
-            </td>
-        </tr>
-        <tr>
-            <td>
-                {{selectedProgramStage.reportDateDescription ? selectedProgramStage.reportDateDescription : 'incident_date'| translate }}
-            </td>
-            <td>
-                <input type="text"                                                   
-                       placeholder="yyyy-mm-dd" 
-                       ng-date 
-                       ng-model="currentEvent.eventDate"
-                       ng-disabled="editingEventInFull"    
-                       ng-required="true" 
-                       name="eventDate" 
-                       style="width:99%;">
-                <span ng-show="outerForm.submitted && outerForm.eventDate.$invalid" class="required">{{'required'| translate}}</span>
-            </td>
-        </tr>
-        <tr ng-if="selectedProgramStage.captureCoordinates">
-            <td>
-                {{'latitude'| translate}}
-            </td>
-            <td>
-                <input type="number"
-                       ng-model="currentEvent.coordinate.latitude"                                                                
-                       name="latitude"
-                       min="-90"
-                       max="90"
-                       ng-required="false"
-                       style="width:99%;"/>
-                <span ng-show="outerForm.submitted && outerForm.latitude.$invalid" class="required">{{'number_required'| translate}} [-90 ... 90]</span>
-            </td>                                            
-        </tr>
-        <tr ng-if="selectedProgramStage.captureCoordinates">
-            <td>
-                {{'longitude'| translate}}
-            </td>
-            <td>
-                <input type="number"
-                       ng-model="currentEvent.coordinate.longitude"                                                                
-                       name="longitude" 
-                       min="-180"
-                       max="180"
-                       ng-required="false"
-                       style="width:99%;"/>
-                <span ng-show="outerForm.submitted && outerForm.longitude.$invalid" class="required">{{'number_required'| translate}}[-180 ... 180]</span>
-            </td>                                            
-        </tr>
-        <tr ng-repeat="eventGridColumn in eventGridColumns" ng-if="eventGridColumn.id !== 'comment' && eventGridColumn.id !== 'uid'">
-            <td >
-                {{eventGridColumn.name}}                                    
-            </td>
-            <td >
-                <ng-form name="innerForm">
-                    <div ng-switch="eventGridColumn.type">
-                        <div ng-switch-when="int">
-                            <input type="number"
-                                   ng-model="currentEvent[eventGridColumn.id]"                                                                
-                                   ng-required={{eventGridColumn.compulsory}}
-                                   name="foo" 
-                                   style="width:99%;"/>
-                            <span ng-show="outerForm.submitted && innerForm.foo.$invalid" class="required">{{'required'| translate}}</span>
-                        </div>
-                        <div ng-switch-when="string">                                        
-                            <div class="container-fluid">
-                                <input type="text"
-                                       ng-model="currentEvent[eventGridColumn.id]"                                                                    
-                                       typeahead="option.code as option.name for option in programStageDataElements[eventGridColumn.id].dataElement.optionSet.options | filter:$viewValue | limitTo:20" 
-                                       typeahead-open-on-focus
-                                       ng-required={{eventGridColumn.compulsory}}
-                                       name="foo" 
-                                       style="width:99%;"/>
-                                <span ng-show="outerForm.submitted && innerForm.foo.$invalid" class="required">{{'required'| translate}}</span>
-                            </div>
-                        </div>
-                        <div ng-switch-when="bool">
-                            <select ng-model="currentEvent[eventGridColumn.id]"                                                                
-                                    ng-required={{eventGridColumn.compulsory}}
-                                    name="foo" 
-                                    style="width:99%;"/>
-                            <option value="">{{'please_select'| translate}}</option>                        
-                            <option value="0">{{'no'| translate}}</option>
-                            <option value="1">{{'yes'| translate}}</option>
-                            </select>
-                            <span ng-show="outerForm.submitted && innerForm.foo.$invalid" class="required">{{'required'| translate}}</span>
-                        </div>
-                        <div ng-switch-when="date">
-                            <input type="text"                                                                
-                                   placeholder="yyyy-mm-dd" 
-                                   ng-date 
-                                   ng-model="currentEvent[eventGridColumn.id]"                                                               
-                                   ng-required={{eventGridColumn.compulsory}}
-                                   name="foo" 
-                                   style="width:99%;"/>
-                            <span ng-show="outerForm.submitted && innerForm.foo.$invalid" class="required">{{'required'| translate}}</span>
-                        </div>
-                        <div ng-switch-when="trueOnly">
-                            <input type="checkbox"                                                                      
-                                   ng-model="currentEvent[eventGridColumn.id]"                                                               
-                                   ng-required={{eventGridColumn.compulsory}}
-                                   name="foo"/>
-                            <span ng-show="outerForm.submitted && innerForm.foo.$invalid" class="required">{{'required'| translate}}</span>
-                        </div>
-                    </div>
-                </ng-form>
-            </td>
-        </tr>        
-    </tbody>
-</table>
+<div ng-if='!selectedProgramStage.programStageSections.length'>
+    <table class="dhis2-list-table-striped">                    
+        <thead>                        
+            <tr>
+                <th>
+                    {{'data_element'| translate}}                    
+                </th>
+                <th>
+                    {{'value'| translate}}                    
+                </th>         
+            </tr>                        
+        </thead>
+        <tbody id="list">
+            <tr ng-if="selectedProgramStage.preGenerateUID && currentEvent['uid']">
+                <td>
+                    {{'form_id' | translate}}
+                </td>
+                <td>
+                    <input type="text" ng-disabled="true" ng-model="currentEvent['uid']" style="width:99%;">
+                </td>
+            </tr>
+            <tr>
+                <td>
+                    {{selectedProgramStage.reportDateDescription ? selectedProgramStage.reportDateDescription : 'incident_date'| translate }}
+                </td>
+                <td>
+                    <input type="text"                                                   
+                           placeholder="yyyy-mm-dd" 
+                           ng-date 
+                           ng-model="currentEvent.eventDate"
+                           ng-disabled="editingEventInFull"    
+                           ng-required="true" 
+                           name="eventDate" 
+                           style="width:99%;">
+                    <span ng-show="outerForm.submitted && outerForm.eventDate.$invalid" class="required">{{'required'| translate}}</span>
+                </td>
+            </tr>
+            <tr ng-if="selectedProgramStage.captureCoordinates">
+                <td>
+                    {{'latitude'| translate}}
+                </td>
+                <td>
+                    <input type="number"
+                           ng-model="currentEvent.coordinate.latitude"                                                                
+                           name="latitude"
+                           min="-90"
+                           max="90"
+                           ng-required="false"
+                           style="width:99%;"/>
+                    <span ng-show="outerForm.submitted && outerForm.latitude.$invalid" class="required">{{'number_required'| translate}} [-90 ... 90]</span>
+                </td>                                            
+            </tr>
+            <tr ng-if="selectedProgramStage.captureCoordinates">
+                <td>
+                    {{'longitude'| translate}}
+                </td>
+                <td>
+                    <input type="number"
+                           ng-model="currentEvent.coordinate.longitude"                                                                
+                           name="longitude" 
+                           min="-180"
+                           max="180"
+                           ng-required="false"
+                           style="width:99%;"/>
+                    <span ng-show="outerForm.submitted && outerForm.longitude.$invalid" class="required">{{'number_required'| translate}}[-180 ... 180]</span>
+                </td>                                            
+            </tr>        
+            <tr ng-repeat="eventGridColumn in eventGridColumns" ng-if="eventGridColumn.id !== 'comment' && eventGridColumn.id !== 'uid' && eventGridColumn.id !== 'event_date'">
+                <td >
+                    {{eventGridColumn.name}}                                    
+                </td>
+                <td >
+                    <ng-form name="innerForm">
+                        <div ng-switch="eventGridColumn.type">
+                            <div ng-switch-when="int">
+                                <input type="number"
+                                       ng-model="currentEvent[eventGridColumn.id]"                                                                
+                                       ng-required={{eventGridColumn.compulsory}}
+                                       name="foo" 
+                                       style="width:99%;"/>
+                                <span ng-show="outerForm.submitted && innerForm.foo.$invalid" class="required">{{'required'| translate}}</span>
+                            </div>
+                            <div ng-switch-when="string">                                        
+
+                                <div class="container-fluid">                                
+                                    <span ng-if="!selectedProgram.dataEntryMethod || programStageDataElements[eventGridColumn.id].dataElement.optionSet.options.length > 8">
+                                        <input type="text"
+                                               ng-model="currentEvent[eventGridColumn.id]"                                                                    
+                                               typeahead="option.code as option.name for option in programStageDataElements[eventGridColumn.id].dataElement.optionSet.options | filter:$viewValue | limitTo:20" 
+                                               typeahead-open-on-focus
+                                               ng-required={{eventGridColumn.compulsory}}
+                                               name="foo" 
+                                               style="width:99%;"/>
+                                        <span ng-show="outerForm.submitted && innerForm.foo.$invalid" class="required">{{'required'| translate}}</span>
+                                    </span>
+                                    <span ng-if="selectedProgram.dataEntryMethod && programStageDataElements[eventGridColumn.id].dataElement.optionSet.options.length < 7">                                    
+                                        <label>
+                                            <input type="radio" 
+                                                   name="foo" 
+                                                   ng-required={{eventGridColumn.compulsory}}
+                                                   ng-model="currentEvent[eventGridColumn.id]"
+                                                   value=""> {{'no_value' | translate}}<br>
+                                        </label>                                    
+                                        <label ng-repeat="option in  programStageDataElements[eventGridColumn.id].dataElement.optionSet.options">
+                                            <input type="radio" 
+                                                   name={{eventGridColumn.id}}   
+                                                   ng-required={{eventGridColumn.compulsory}}
+                                                   ng-model="currentEvent[eventGridColumn.id]"
+                                                   value={{option.code}}> {{option.name}}<br>                                        
+                                        </label>                                    
+                                        <span ng-show="outerForm.submitted && innerForm.foo.$invalid" class="required">{{'required'| translate}}</span>                                    
+                                    </span>
+                                </div>                            
+                            </div>
+                            <div ng-switch-when="bool">
+                                <select ng-model="currentEvent[eventGridColumn.id]"                                                                
+                                        ng-required={{eventGridColumn.compulsory}}
+                                        name="foo" 
+                                        style="width:99%;"/>
+                                <option value="">{{'please_select'| translate}}</option>                        
+                                <option value="0">{{'no'| translate}}</option>
+                                <option value="1">{{'yes'| translate}}</option>
+                                </select>
+                                <span ng-show="outerForm.submitted && innerForm.foo.$invalid" class="required">{{'required'| translate}}</span>
+                            </div>
+                            <div ng-switch-when="date">
+                                <input type="text"                                                                
+                                       placeholder="yyyy-mm-dd" 
+                                       ng-date 
+                                       ng-model="currentEvent[eventGridColumn.id]"                                                               
+                                       ng-required={{eventGridColumn.compulsory}}
+                                       name="foo" 
+                                       style="width:99%;"/>
+                                <span ng-show="outerForm.submitted && innerForm.foo.$invalid" class="required">{{'required'| translate}}</span>
+                            </div>
+                            <div ng-switch-when="trueOnly">
+                                <input type="checkbox"                                                                      
+                                       ng-model="currentEvent[eventGridColumn.id]"                                                               
+                                       ng-required={{eventGridColumn.compulsory}}
+                                       name="foo"/>
+                                <span ng-show="outerForm.submitted && innerForm.foo.$invalid" class="required">{{'required'| translate}}</span>
+                            </div>
+                        </div>
+                    </ng-form>
+                </td>
+            </tr>        
+        </tbody>
+    </table>    
+</div>
+<div ng-class="" ng-if='selectedProgramStage.programStageSections.length'>
+    <table class="dhis2-list-table-striped">                    
+        <thead>                        
+            <tr>
+                <th>
+                    {{'data_element'| translate}}                    
+                </th>
+                <th>
+                    {{'value'| translate}}                    
+                </th>         
+            </tr>                        
+        </thead>
+        <tbody id="list">
+            <tr ng-if="selectedProgramStage.preGenerateUID && currentEvent['uid']">
+                <td>
+                    {{'form_id' | translate}}
+                </td>
+                <td>
+                    <input type="text" ng-disabled="true" ng-model="currentEvent['uid']" style="width:99%;">
+                </td>
+            </tr>
+            <tr>
+                <td>
+                    {{selectedProgramStage.reportDateDescription ? selectedProgramStage.reportDateDescription : 'incident_date'| translate }}
+                </td>
+                <td>
+                    <input type="text"                                                   
+                           placeholder="yyyy-mm-dd" 
+                           ng-date 
+                           ng-model="currentEvent.eventDate"
+                           ng-disabled="editingEventInFull"    
+                           ng-required="true" 
+                           name="eventDate" 
+                           style="width:99%;">
+                    <span ng-show="outerForm.submitted && outerForm.eventDate.$invalid" class="required">{{'required'| translate}}</span>
+                </td>
+            </tr>
+            <tr ng-if="selectedProgramStage.captureCoordinates">
+                <td>
+                    {{'latitude'| translate}}
+                </td>
+                <td>
+                    <input type="number"
+                           ng-model="currentEvent.coordinate.latitude"                                                                
+                           name="latitude"
+                           min="-90"
+                           max="90"
+                           ng-required="false"
+                           style="width:99%;"/>
+                    <span ng-show="outerForm.submitted && outerForm.latitude.$invalid" class="required">{{'number_required'| translate}} [-90 ... 90]</span>
+                </td>                                            
+            </tr>
+            <tr ng-if="selectedProgramStage.captureCoordinates">
+                <td>
+                    {{'longitude'| translate}}
+                </td>
+                <td>
+                    <input type="number"
+                           ng-model="currentEvent.coordinate.longitude"                                                                
+                           name="longitude" 
+                           min="-180"
+                           max="180"
+                           ng-required="false"
+                           style="width:99%;"/>
+                    <span ng-show="outerForm.submitted && outerForm.longitude.$invalid" class="required">{{'number_required'| translate}}[-180 ... 180]</span>
+                </td>                                            
+            </tr>        
+            <!--<tr ng-repeat="eventGridColumn in eventGridColumns" ng-if="eventGridColumn.id !== 'comment' && eventGridColumn.id !== 'uid' && eventGridColumn.id !== 'event_date'">
+                <td >
+                    {{eventGridColumn.name}}                                    
+                </td>
+                <td >
+                    <ng-form name="innerForm">
+                        <div ng-switch="eventGridColumn.type">
+                            <div ng-switch-when="int">
+                                <input type="number"
+                                       ng-model="currentEvent[eventGridColumn.id]"                                                                
+                                       ng-required={{eventGridColumn.compulsory}}
+                                       name="foo" 
+                                       style="width:99%;"/>
+                                <span ng-show="outerForm.submitted && innerForm.foo.$invalid" class="required">{{'required'| translate}}</span>
+                            </div>
+                            <div ng-switch-when="string">                                        
+
+                                <div class="container-fluid">                                
+                                    <span ng-if="!selectedProgram.dataEntryMethod || programStageDataElements[eventGridColumn.id].dataElement.optionSet.options.length > 8">
+                                        <input type="text"
+                                               ng-model="currentEvent[eventGridColumn.id]"                                                                    
+                                               typeahead="option.code as option.name for option in programStageDataElements[eventGridColumn.id].dataElement.optionSet.options | filter:$viewValue | limitTo:20" 
+                                               typeahead-open-on-focus
+                                               ng-required={{eventGridColumn.compulsory}}
+                                               name="foo" 
+                                               style="width:99%;"/>
+                                        <span ng-show="outerForm.submitted && innerForm.foo.$invalid" class="required">{{'required'| translate}}</span>
+                                    </span>
+                                    <span ng-if="selectedProgram.dataEntryMethod && programStageDataElements[eventGridColumn.id].dataElement.optionSet.options.length < 7">                                    
+                                        <label>
+                                            <input type="radio" 
+                                                   name="foo" 
+                                                   ng-required={{eventGridColumn.compulsory}}
+                                                   ng-model="currentEvent[eventGridColumn.id]"
+                                                   value=""> {{'no_value' | translate}}<br>
+                                        </label>                                    
+                                        <label ng-repeat="option in  programStageDataElements[eventGridColumn.id].dataElement.optionSet.options">
+                                            <input type="radio" 
+                                                   name={{eventGridColumn.id}}   
+                                                   ng-required={{eventGridColumn.compulsory}}
+                                                   ng-model="currentEvent[eventGridColumn.id]"
+                                                   value={{option.code}}> {{option.name}}<br>                                        
+                                        </label>                                    
+                                        <span ng-show="outerForm.submitted && innerForm.foo.$invalid" class="required">{{'required'| translate}}</span>                                    
+                                    </span>
+                                </div>                            
+                            </div>
+                            <div ng-switch-when="bool">
+                                <select ng-model="currentEvent[eventGridColumn.id]"                                                                
+                                        ng-required={{eventGridColumn.compulsory}}
+                                        name="foo" 
+                                        style="width:99%;"/>
+                                <option value="">{{'please_select'| translate}}</option>                        
+                                <option value="0">{{'no'| translate}}</option>
+                                <option value="1">{{'yes'| translate}}</option>
+                                </select>
+                                <span ng-show="outerForm.submitted && innerForm.foo.$invalid" class="required">{{'required'| translate}}</span>
+                            </div>
+                            <div ng-switch-when="date">
+                                <input type="text"                                                                
+                                       placeholder="yyyy-mm-dd" 
+                                       ng-date 
+                                       ng-model="currentEvent[eventGridColumn.id]"                                                               
+                                       ng-required={{eventGridColumn.compulsory}}
+                                       name="foo" 
+                                       style="width:99%;"/>
+                                <span ng-show="outerForm.submitted && innerForm.foo.$invalid" class="required">{{'required'| translate}}</span>
+                            </div>
+                            <div ng-switch-when="trueOnly">
+                                <input type="checkbox"                                                                      
+                                       ng-model="currentEvent[eventGridColumn.id]"                                                               
+                                       ng-required={{eventGridColumn.compulsory}}
+                                       name="foo"/>
+                                <span ng-show="outerForm.submitted && innerForm.foo.$invalid" class="required">{{'required'| translate}}</span>
+                            </div>
+                        </div>
+                    </ng-form>
+                </td>
+            </tr>-->        
+        </tbody>
+    </table>
+    
+    <accordion close-others='false'>
+        <accordion-group heading="{{section.name}}" ng-repeat='section in selectedProgramStage.programStageSections'>
+            <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="de in section.programStageDataElements">
+                        <td >
+                            {{programStageDataElements[de.dataElement.id].dataElement.name}}
+                        </td>
+                        <td >
+                            <ng-form name="innerForm">
+                                <div ng-switch="programStageDataElements[de.dataElement.id].dataElement.type">
+                                    <div ng-switch-when="int">
+                                        <input type="number"
+                                               ng-model="currentEvent[de.dataElement.id]"                                                                
+                                               ng-required={{programStageDataElements[de.dataElement.id].compulsory}}
+                                               name="foo" 
+                                               style="width:99%;"/>
+                                        <span ng-show="outerForm.submitted && innerForm.foo.$invalid" class="required">{{'required'| translate}}</span>
+                                    </div>
+                                    <div ng-switch-when="string">                                        
+
+                                        <div class="container-fluid">                                
+                                            <span ng-if="!selectedProgram.dataEntryMethod || programStageDataElements[de.dataElement.id].dataElement.optionSet.options.length > 8">
+                                                <input type="text"
+                                                       ng-model="currentEvent[de.dataElement.id]"                                                                    
+                                                       typeahead="option.code as option.name for option in programStageDataElements[de.dataElement.id].dataElement.optionSet.options | filter:$viewValue | limitTo:20" 
+                                                       typeahead-open-on-focus
+                                                       ng-required={{programStageDataElements[de.dataElement.id].compulsory}}
+                                                       name="foo" 
+                                                       style="width:99%;"/>
+                                                <span ng-show="outerForm.submitted && innerForm.foo.$invalid" class="required">{{'required'| translate}}</span>
+                                            </span>
+                                            <span ng-if="selectedProgram.dataEntryMethod && programStageDataElements[de.dataElement.id].dataElement.optionSet.options.length < 7">                                    
+                                                <label>
+                                                    <input type="radio" 
+                                                           name="foo" 
+                                                           ng-required={{programStageDataElements[de.dataElement.id].compulsory}}
+                                                           ng-model="currentEvent[de.dataElement.id]"
+                                                           value=""> {{'no_value' | translate}}<br>
+                                                </label>                                    
+                                                <label ng-repeat="option in  programStageDataElements[de.dataElement.id].dataElement.optionSet.options">
+                                                    <input type="radio" 
+                                                           name={{de.dataElement.id}}   
+                                                           ng-required={{programStageDataElements[de.dataElement.id].compulsory}}
+                                                           ng-model="currentEvent[de.dataElement.id]"
+                                                           value={{option.code}}> {{option.name}}<br>                                        
+                                                </label>                                    
+                                                <span ng-show="outerForm.submitted && innerForm.foo.$invalid" class="required">{{'required'| translate}}</span>                                    
+                                            </span>
+                                        </div>                            
+                                    </div>
+                                    <div ng-switch-when="bool">
+                                        <select ng-model="currentEvent[de.dataElement.id]"                                                                
+                                                ng-required={{programStageDataElements[de.dataElement.id].compulsory}}
+                                                name="foo" 
+                                                style="width:99%;"/>
+                                        <option value="">{{'please_select'| translate}}</option>                        
+                                        <option value="0">{{'no'| translate}}</option>
+                                        <option value="1">{{'yes'| translate}}</option>
+                                        </select>
+                                        <span ng-show="outerForm.submitted && innerForm.foo.$invalid" class="required">{{'required'| translate}}</span>
+                                    </div>
+                                    <div ng-switch-when="date">
+                                        <input type="text"                                                                
+                                               placeholder="yyyy-mm-dd" 
+                                               ng-date 
+                                               ng-model="currentEvent[de.dataElement.id]"                                                               
+                                               ng-required={{programStageDataElements[de.dataElement.id].compulsory}}
+                                               name="foo" 
+                                               style="width:99%;"/>
+                                        <span ng-show="outerForm.submitted && innerForm.foo.$invalid" class="required">{{'required'| translate}}</span>
+                                    </div>
+                                    <div ng-switch-when="trueOnly">
+                                        <input type="checkbox"                                                                      
+                                               ng-model="currentEvent[de.dataElement.id]"                                                               
+                                               ng-required={{programStageDataElements[de.dataElement.id].compulsory}}
+                                               name="foo"/>
+                                        <span ng-show="outerForm.submitted && innerForm.foo.$invalid" class="required">{{'required'| translate}}</span>
+                                    </div>
+                                </div>
+                            </ng-form>
+                        </td>
+                    </tr>
+                </tbody>
+            </table>
+        </accordion-group> 
+    </accordion>
+</div>
+
+<!-- comment section starts -->
 <h4>
     {{'comments'| translate}}
 </h4>
 <textarea rows="3" ng-model="note.value" placeholder="{{'add_your_comment_here'| translate}}" style="width:99%;"></textarea>
-
-<div ng-if="currentEvent.notes">
-    
+<div ng-if="currentEvent.notes">    
     <table class="listTable dhis2-list-table-striped"> 
         <thead>
             <tr>
@@ -148,4 +417,20 @@
             </td>
         </tr>
     </table>
-</div>
\ No newline at end of file
+</div>
+<!-- comment section ends -->
+
+
+<!-- buttons for event registration / update begins -->
+<div style="clear: both;">                        
+    <span ng-if="editingEventInFull">
+        <button ng-click="updateEvent()" class="button not-printable">{{'update'| translate}}</button>
+        <button ng-click="showEventList()" class="button not-printable">{{'go_back'| translate}}</button>
+    </span>
+    <span ng-if="eventRegistration">
+        <button ng-disabled="disableSaveAndAddNew" ng-click="addEvent(true)" class="button not-printable">{{'save_and_add_new'| translate}}</button>
+        <button ng-click="addEvent()" class="button not-printable">{{'save_and_back'| translate}}</button>
+        <button ng-click="showEventList(null)" class="button not-printable">{{'go_back'| translate}}</button>
+    </span> 
+</div>
+<!-- buttons for event registration / update ends -->
\ No newline at end of file

=== modified file 'dhis-2/dhis-web/dhis-web-apps/src/main/webapp/dhis-web-event-capture/views/eventList.html'
--- dhis-2/dhis-web/dhis-web-apps/src/main/webapp/dhis-web-event-capture/views/eventList.html	2014-08-19 11:45:47 +0000
+++ dhis-2/dhis-web/dhis-web-apps/src/main/webapp/dhis-web-event-capture/views/eventList.html	2014-08-21 16:30:01 +0000
@@ -131,10 +131,19 @@
                                             <span ng-show="outerForm.submitted && innerFormGrid.foo.$invalid" class="red"><em title="{{'required'| translate}}" class="required">*</em></span>
                                         </div>
                                         <div ng-switch-when="string">                                        
-                                            <div class="container-fluid">                                                
-                                                <input type="text" 
+                            
+                                            <div class="container-fluid">
+                                                <span ng-if="eventGridColumn.id == 'uid'">
+                                                    <input type="text"
+                                                           ng-model="currentEvent[eventGridColumn.id]"                                                                    
+                                                           ng-disabled=true
+                                                           name="foo" 
+                                                           style="width:99%;"/>                                                    
+                                                </span>
+                                                <span ng-if="eventGridColumn.id !== 'uid' && !selectedProgram.dataEntryMethod || programStageDataElements[eventGridColumn.id].dataElement.optionSet.options.length > 8">
+                                                    <input type="text" 
                                                        ng-model="dhis2Event[eventGridColumn.id]" 
-                                                       ng-blur="updateEventDataValue(dhis2Event, eventGridColumn.id)" 
+                                                       ng-change="updateEventDataValue(dhis2Event, eventGridColumn.id)" 
                                                        typeahead="option.code as option.name for option in programStageDataElements[eventGridColumn.id].dataElement.optionSet.options | filter:$viewValue | limitTo:20" 
                                                        typeahead-open-on-focus
                                                        ng-required={{eventGridColumn.compulsory}}
@@ -144,9 +153,32 @@
                                                        ng-class="{true: 'update-success'} [currentElement.updated == true && currentElement.id == eventGridColumn.id]"
                                                        ng-class="{true: 'update-error'} [!currentElement.updated == true && currentElement.id == eventGridColumn.id]"
                                                        />
-                                                <span ng-show="outerForm.submitted && innerFormGrid.foo.$invalid" class="red"><em title="{{'required'| translate}}" class="required">*</em></span>
-                                            </div>
-                                        </div>
+                                                    <span ng-show="outerForm.submitted && innerFormGrid.foo.$invalid" class="red"><em title="{{'required'| translate}}" class="required">*</em></span>
+                                                </span>
+                                                <span ng-if="eventGridColumn.id !== 'uid' && selectedProgram.dataEntryMethod && programStageDataElements[eventGridColumn.id].dataElement.optionSet.options.length < 7">                                    
+                                                    <label>
+                                                        <input type="radio" 
+                                                               name="foo" 
+                                                               ng-required={{eventGridColumn.compulsory}}
+                                                               ng-model="dhis2Event[eventGridColumn.id]" 
+                                                               ng-change="updateEventDataValue(dhis2Event, eventGridColumn.id)" 
+                                                               value=""> {{'no_value' | translate}}<br>                                     
+                                                    </label>                                    
+                                                    <label ng-repeat="option in  programStageDataElements[eventGridColumn.id].dataElement.optionSet.options">
+                                                        <input type="radio" 
+                                                               name={{eventGridColumn.id}}   
+                                                               ng-required={{eventGridColumn.compulsory}}
+                                                               ng-model="dhis2Event[eventGridColumn.id]" 
+                                                               ng-change="updateEventDataValue(dhis2Event, eventGridColumn.id)"
+                                                               ng-class="{true: 'update-success'} [currentElement.updated == true && currentElement.id == eventGridColumn.id]"
+                                                               ng-class="{true: 'update-error'} [!currentElement.updated == true && currentElement.id == eventGridColumn.id]"
+                                                               value={{option.code}}> {{option.name}}<br>                                    
+                                                    </label>                                    
+                                                    <span ng-show="outerForm.submitted && innerForm.foo.$invalid" class="required">{{'required'| translate}}</span>                                    
+                                                </span>
+                                                
+                                            </div>                            
+                                        </div>                                        
                                         <div ng-switch-when="bool">
                                             <select ng-model="dhis2Event[eventGridColumn.id]" 
                                                     ng-change="updateEventDataValue(dhis2Event, eventGridColumn.id)" 
@@ -169,6 +201,7 @@
                                                    ng-model="dhis2Event[eventGridColumn.id]"
                                                    blur-or-change="updateEventDataValue(dhis2Event, eventGridColumn.id)" 
                                                    ng-required={{eventGridColumn.compulsory}}
+                                                   ng-disabled="eventGridColumn.id == 'event_date'"
                                                    name="foo" 
                                                    style="width:98%;"
                                                    ng-class="{true: 'update-success'} [currentElement.updated == true && currentElement.id == eventGridColumn.id]"