=== 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-20 11:41:24 +0000
+++ dhis-2/dhis-web/dhis-web-event-capture/src/main/webapp/dhis-web-event-capture/app/i18n/en.json	2014-02-21 17:56:00 +0000
@@ -21,7 +21,7 @@
     "cancel": "Cancel",
     "remove": "Remove",
     "are_you_sure_to_remove": "Are you sure you want to remove the selected item?",
-    "show_hide_columns": "Show/Hide grid columns",
+    "show_hide_columns": "Show/Hide columns",
     "show_all": "Show all",
     "hide": "Hide",
     "show_details": "Show details",
@@ -75,6 +75,7 @@
     "not_selected": "NOT_SELECTED",   
     "search": "Search",
     "register_new": "Register New",
+    "empty_event_list": "There are no events",
     "empty_search_result": "Empty Search Result",
     "no": "NO",
     "yes": "YES",    

=== 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-20 13:58:38 +0000
+++ dhis-2/dhis-web/dhis-web-event-capture/src/main/webapp/dhis-web-event-capture/app/index.html	2014-02-21 17:56:00 +0000
@@ -48,9 +48,8 @@
         <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="scripts/ouwt.js"></script>
-        <script type="text/javascript" src="scripts/ouSelection.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/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>
@@ -85,12 +84,14 @@
                     {{'event_capture'| translate}}
                     <a href ng-click="getHelpContent()" title="{{'help'| translate}}"><i class="fa fa-question-circle"></i></a>
                 </h1>
-
+                
+                <!-- selection -->
                 <div id="selectDiv">
                     <table>
                         <tr>
                             <td><label>{{'registering_unit'| translate}}</label></td>
-                            <td><input type="text" id="orgUnitName" name="orgUnitName" value="{{selectedOrgUnit.name| translate}}" disabled></td>
+                            <!--<td><input type="text" id="orgUnitName" name="orgUnitName" value="{{selectedOrgUnit.name| translate}}" disabled></td>-->
+                            <td><input type="text" selected-org-unit ng-model="selectedOrgUnit.name" value="{{selectedOrgUnit.name || 'please_select'| translate}}" disabled=""></td>
                         </tr>
                         <tr>
                             <td><label>{{'program'| translate}}<em title="{{'required'| translate}}" class="required">*</em></label></td>
@@ -98,8 +99,9 @@
                                 <select id="programId" 
                                         name="programId" 
                                         ng-model="pr" 
-                                        ng-options="program as program.label for program in programs | orderBy: 'label'" 
-                                        ng-change="loadEvents(pr)">
+                                        ng-options="program as program.name for program in programs | orderBy: 'name'" 
+                                        ng-change="loadEvents(pr)"
+                                        ng-disabled="eventRegistration || editingEventInFull || editingEventInGrid">
                                     <option value="">{{'please_select'| translate}}</option>
                                 </select>      
                             </td>
@@ -115,34 +117,30 @@
                     </table>
                 </div>
 
-                <div id="listDiv" ng-show="selectedProgramStage && !eventRegistration && !editingEventInFull">
+                <!-- event grid begins -->
+                <div id="listDiv" ng-show="selectedProgramStage && !eventRegistration && !editingEventInFull">                    
                     
-                    <!-- visible when editing grid columns - need to think better way to display this-->
-                    <div class="bordered-div" ng-show="editGridColumns">
-                        <h3>{{'show_hide_columns'| translate}}</h3>
-                        <table class="listTable dhis2-table-striped" width='100%'>
-                            <tr>
-                                <th>
-                                    {{'column' | translate}}
-                                </th>
-                                <th ng-repeat="eventGridColumn in eventGridColumns">
-                                    {{eventGridColumn.name}}
-                                </th>
-                            </tr>
-                            <tr>
-                                <th>
-                                    {{'hide' | translate}}
-                                </th>
-                                <th ng-repeat="eventGridColumn in eventGridColumns">
-                                    <input type="checkbox" ng-model="eventGridColumn.hide">
-                                </th>
-                            </tr>                            
-                        </table>
-                        <button ng-click="showHideColumns(false)">{{'close'| translate}}</button>
-                        &nbsp;&nbsp;&nbsp;
-                        <button ng-click="showHideColumns(true)">{{'show_all'| translate}}</button>
+                    <div class="right">
+                        <accordion>
+                            <accordion-group>
+                                <accordion-heading>
+                                    {{'show_hide_columns' | translate}}
+                                </accordion-heading>
+                                <table width='100%'>                                    
+                                    <tr ng-repeat="eventGridColumn in eventGridColumns">
+                                        <td>
+                                            {{eventGridColumn.name}}
+                                        </td>
+                                        <td>
+                                            <input type="checkbox" ng-model="eventGridColumn.hide" ng-change="showHideColumns(eventGridColumn,false)" ng-disabled="hiddenGridColumns + 1 == eventGridColumns.length && !eventGridColumn.hide">
+                                        </td>
+                                    </tr>                                    
+                                </table>
+                                <button ng-click="showHideColumns(null,true)">{{'show_all'| translate}}</button>
+                            </accordion-group>
+                        </accordion>
                     </div>
-                    
+                                        
                     <h2>
                         {{'registered_events'| translate}}                                                 
                     </h2>               
@@ -151,7 +149,7 @@
 
                         <div ng-switch-when="undefined">
                             <p>
-                                {{'empty_search_result'| translate}}
+                                {{'empty_event_list'| translate}}
                             </p>
                         </div>
 
@@ -160,15 +158,14 @@
                             <!-- context menu for event grid -->
                             <div id="contextMenu" class="contextMenu" style="width: 180px;">
                                 <ul id="contextMenuItems" class="contextMenuItems">
+                                    <li><a href ng-click="showEditEventInFull()"><i class="fa fa-edit"></i>&nbsp;&nbsp;{{'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>        
+                                    <li><a href ng-click="removeEvent()"><i class="fa fa-trash-o"></i>&nbsp;&nbsp;{{'remove'| translate}}</a></li>                                       
                                 </ul>
                             </div>
                             <!-- context menu ends -->
 
-                            <!-- event grid begins -->
+                            <!-- grid begins -->
                             <form name="outerForm" novalidate>                              
 
                                 <table class="listTable dhis2-table-striped-border dhis2-table-hover">                    
@@ -184,18 +181,16 @@
                                                     {{eventGridColumn.name}}
                                                 </span>
                                                 
-                                                <span class="pull-right">
-                                                    <a href ng-click="searchInGrid(eventGridColumn)" title="{{'search'| translate}}"><span class='black'><i class="fa fa-search"></i></span></a>                                                    
-                                                </span>                                               
+                                                <span class='pull-right'>
+                                                    <a href ng-click="searchInGrid(eventGridColumn)" title="{{'search'| translate}}"><span ng-class="{true: 'filter-without-content', false: 'filter-with-content'} [filterText[eventGridColumn.id] == undefined || filterText[eventGridColumn.id] == '']"><i class="fa fa-search"></i></span></a>                                                    
+                                                </span>
                                                 
                                                 <div ng-show="eventGridColumn == filteringGrid">
                                                     <input type="text" ng-model="filterText[eventGridColumn.id]" ng-blur="searchInGrid()">
                                                 </div>                                                
                                                 
                                             </th>
-                                            <th ng-hide="editGridColumns">
-                                                <a href ng-click="showHideColumns(false)" title="{{'show_hide_columns'| translate}}"><i class="fa fa-cog"></i></a>
-                                            </th>         
+                                            <th></th>
                                         </tr>                        
                                     </thead>
                                     <tbody id="list">
@@ -283,22 +278,23 @@
                                                             <span ng-show="outerForm.submitted && innerFormGrid.foo.$invalid" class="red">{{'required'| translate}}</span>
                                                         </div>
                                                     </div>
-                                                </ng-form>
-                                            </td>                            
-                                            <td>                                
+                                                </ng-form>                                                
+                                            </td>
+                                           <td>                                
                                                 <span ng-show="currentEvent.event == dhis2Event.event">
                                                     <a href ng-click="showEventList()" title="{{'close_editing'| translate}}"><span class='black'><i class="fa fa-times-circle-o fa-2x"></i></span></a>                                                    
                                                 </span>
-                                            </td>                            
+                                            </td>                           
                                         </tr>
                                     </tbody>        
                                 </table>
                                 <paginator></paginator>
                             </form>
-                            <!-- event grid ends -->
+                            <!-- grid ends -->
                         </div>
                     </div>
-                </div>               
+                </div> 
+                <!-- event grid ends -->
 
                 <!-- event update in full begins-->
                 <div ng-show="editingEventInFull">
@@ -493,7 +489,7 @@
                         </form>
                     </div>
                 </div>                
-                <!-- event registration ends -->
+                <!-- event registration ends -->                
             </div>           
         </div>
     </body>

=== modified file 'dhis-2/dhis-web/dhis-web-event-capture/src/main/webapp/dhis-web-event-capture/app/lib/bootstrap/css/bootstrap.min.css'
--- dhis-2/dhis-web/dhis-web-event-capture/src/main/webapp/dhis-web-event-capture/app/lib/bootstrap/css/bootstrap.min.css	2014-02-14 10:59:22 +0000
+++ dhis-2/dhis-web/dhis-web-event-capture/src/main/webapp/dhis-web-event-capture/app/lib/bootstrap/css/bootstrap.min.css	2014-02-21 17:56:00 +0000
@@ -4049,6 +4049,7 @@
 	margin-bottom: 0;
 	line-height: 1.3
 }
+
 .panel {
 	margin-bottom: 20px;
 	background-color: #fff;

=== 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-20 14:31:59 +0000
+++ dhis-2/dhis-web/dhis-web-event-capture/src/main/webapp/dhis-web-event-capture/app/scripts/controllers.js	2014-02-21 17:56:00 +0000
@@ -7,7 +7,6 @@
 .controller('MainController',
         function($scope,
                 CurrentUserProfile,
-                OrgUnitFactory,
                 ProgramFactory,
                 ProgramStageFactory,
                 DHIS2EventFactory,
@@ -24,80 +23,60 @@
         $translate.uses(profile.settings.keyUiLocale);
     });    
     
+    //Paging
     $scope.rowsPerPage = 50;
     $scope.currentPage = Paginator.getPage() + 1;
     
-    //selections
-    $scope.selectedOrgUnit = {name: 'please_select'};
-    $scope.selectedProgram = '';
-    $scope.selectedProgramStage = '';
-    $scope.programStageDataElements = [];
-    $scope.dhis2Events = [];
+    //Filtering
+    $scope.reverse = false;
+    $scope.filterText = {}; 
+    
+    //Editing
     $scope.eventRegistration = false;
     $scope.editGridColumns = false;
+    $scope.editingEventInFull = false;
+    $scope.editingEventInGrid = false;   
+    
+    $scope.programStageDataElements = [];
+    $scope.dhis2Events = [];    
+    
     $scope.eventGridColumns = [];
+    $scope.hiddenGridColumns = 0;
     $scope.newDhis2Event = {dataValues: []};
     $scope.currentEvent = {dataValues: []};
-    $scope.currentEventOrginialValue = '';
-    
-    $scope.editingEventInFull = false;
-    $scope.editingEventInGrid = false;
-    
-    $scope.sortHeader = '';
-    $scope.reverse = false;
-    $scope.filterText = {};   
-   
-    //Get orgunits for the logged in user
-    OrgUnitFactory.getMine().then(function(orgUnits) {
-        $scope.orgUnits = orgUnits;
+    $scope.currentEventOrginialValue = '';     
+  
+       
+    $scope.$watch('selectedOrgUnit', function(newObj, oldObj) {
         
-        //expand root orgunit (the expansion is only if we have one root)
-        if($scope.orgUnits.length === 1 ){
-            $scope.orgUnits[0].show = true;
-        }
+        if( angular.isObject($scope.selectedOrgUnit)){            
+            $scope.loadPrograms($scope.selectedOrgUnit);            
+        }        
     });
     
-    //controll expand/collapse of orgunit tree
-    $scope.expandCollapse = function(orgUnit) {
-
-        if( !angular.isUndefined( orgUnit.hasChildren ) ){
-            
-            //Get children for the selected orgUnit
-            OrgUnitFactory.get(orgUnit.id).then(function(data) {
-                orgUnit.show = !orgUnit.show;  
-                delete orgUnit.hasChildren;
-                orgUnit.children = data.children;                   
-            });           
-        }
-        else{
-            orgUnit.show = !orgUnit.show;   
-        }        
-    };
-    
     //load programs of type=3 for the selected orgunit
-    $scope.loadPrograms = function(orgUnit){            
+    $scope.loadPrograms = function(orgUnit){     
+        
         $scope.selectedOrgUnit = orgUnit;
         $scope.selectedProgram = null;
         $scope.selectedProgramStage = null;
+        $scope.eventGridColumns = [];
         $scope.dhis2Events = [];
         $scope.newDhis2Event = {dataValues: []};
         if (angular.isObject($scope.selectedOrgUnit)) {   
 
             $scope.programs = [];
-            ProgramFactory.getMine(3).then(function(data) {
-                angular.forEach(data.organisationUnits, function(ou) {
-                    if (ou.id === $scope.selectedOrgUnit.id) {
-                        angular.forEach(ou.programs, function(p) {
-                            $scope.programs.push(p);                                                   
-                        });                        
-                    }
-                });
+            
+            ProgramFactory.getEventProgramsByOrgUnit($scope.selectedOrgUnit.id,3).then(function(data) {
+                $scope.programs = data.programs;               
                 
-                if($scope.programs.length === 1){
-                    $scope.pr = $scope.programs[0];
-                    $scope.loadEvents($scope.pr);
-                }
-            });            
+                if( !angular.isUndefined($scope.programs)){                    
+                    if($scope.programs.length === 1){
+                        $scope.pr = $scope.programs[0];
+                        $scope.loadEvents($scope.pr);
+                    }                    
+                }                               
+            });
         }
     };    
     
@@ -165,24 +144,30 @@
     };
     
     $scope.sortEventGrid = function(gridHeader){
+        
         if ($scope.sortHeader === gridHeader.id){
             $scope.reverse = !$scope.reverse;
             return;
-        }
-        
+        }        
         $scope.sortHeader = gridHeader.id;
         $scope.reverse = false;    
     };
     
-    $scope.showHideColumns = function(showAllColumns){
+    $scope.showHideColumns = function(gridColumn, showAllColumns){
         if(showAllColumns){
             angular.forEach($scope.eventGridColumns, function(gridHeader){
-                gridHeader.hide = false;
+                gridHeader.hide = false;                
             });
+            $scope.hiddenGridColumns = 0;
         }
-        else{
-            $scope.editGridColumns = !$scope.editGridColumns;
-        }        
+        if(!showAllColumns){            
+            if(gridColumn.hide){
+                $scope.hiddenGridColumns++;
+            }
+            else{
+                $scope.hiddenGridColumns--;
+            }
+        }      
     };
     
     $scope.searchInGrid = function(gridColumn){        
@@ -220,13 +205,11 @@
         $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.currentEvent.hasOwnProperty(prStDe.dataElement.id)){
-                    $scope.currentEvent[prStDe.dataElement.id] = '';
-                }
-            });
-        }
+        angular.forEach($scope.selectedProgramStage.programStageDataElements, function(prStDe){
+            if(!$scope.currentEvent.hasOwnProperty(prStDe.dataElement.id)){
+                $scope.currentEvent[prStDe.dataElement.id] = '';
+            }
+        });
     };
     
     $scope.addEvent = function(addingAnotherEvent){                
@@ -347,7 +330,8 @@
     
     $scope.generateReport = function(){
         console.log('I need to generate the report....');  
-    };     
+    };   
+    
 })
 
 //Controller for the main page

=== modified file 'dhis-2/dhis-web/dhis-web-event-capture/src/main/webapp/dhis-web-event-capture/app/scripts/directives.js'
--- dhis-2/dhis-web/dhis-web-event-capture/src/main/webapp/dhis-web-event-capture/app/scripts/directives.js	2014-02-20 11:41:24 +0000
+++ dhis-2/dhis-web/dhis-web-event-capture/src/main/webapp/dhis-web-event-capture/app/scripts/directives.js	2014-02-21 17:56:00 +0000
@@ -18,6 +18,23 @@
     };   
 })
 
+.directive('selectedOrgUnit', function() {        
+
+    return {        
+        restrict: 'A',        
+        link: function(scope, element, attrs){
+            
+            selection.setListenerFunction( organisationUnitSelected );            
+            selection.responseReceived();
+            
+            function organisationUnitSelected( orgUnits, orgUnitNames ) {
+                scope.selectedOrgUnit = {id: orgUnits[0], name: orgUnitNames[0]};    
+                scope.$apply();                
+            }
+        }  
+    };
+})
+
 .directive('dhisContextMenu', function(ContextMenuSelectedItem) {
         
     return {        

=== modified file 'dhis-2/dhis-web/dhis-web-event-capture/src/main/webapp/dhis-web-event-capture/app/scripts/services.js'
--- dhis-2/dhis-web/dhis-web-event-capture/src/main/webapp/dhis-web-event-capture/app/scripts/services.js	2014-02-20 14:31:59 +0000
+++ dhis-2/dhis-web/dhis-web-event-capture/src/main/webapp/dhis-web-event-capture/app/scripts/services.js	2014-02-21 17:56:00 +0000
@@ -33,6 +33,15 @@
                 });
             }
             return programsPromise;    
+        },
+        
+        getEventProgramsByOrgUnit: function(orgUnit, type){
+                       
+            var promise = $http.get( dhis2Url + '/api/programs.json?orgUnit=' + orgUnit + '&type=' + type ).then(function(response){
+                programs = response.data;
+                return programs;
+            });            
+            return promise;
         }
     };
 })
@@ -63,7 +72,7 @@
 })
 
 /* factory for loading logged in user profiles from DHIS2 */
-.factory('CurrentUserProfile', function($http, storage) { 
+.factory('CurrentUserProfile', function($http, storage, TrackerApp) { 
     
     var dhis2Url = storage.get('CONFIG').activities.dhis.href;      
            
@@ -635,6 +644,12 @@
             
             return configurationPromise; 
         }
+        
+        /*getConfiguration: function(){
+            return this.loadConfiguration().then(function(appConfiguration){
+                return appConfiguration;
+            });
+        }*/
     };
 })
 

=== 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-20 13:58:38 +0000
+++ dhis-2/dhis-web/dhis-web-event-capture/src/main/webapp/dhis-web-event-capture/app/styles/style.css	2014-02-21 17:56:00 +0000
@@ -681,9 +681,9 @@
     color: #000;
 }
 
-a {
+/*a {
     margin-left: 5px;    
-}
+}*/
 
 div.paging a.active
 {
@@ -704,6 +704,10 @@
     color: red;
 }
 
+.right {
+    float: right !important;
+    margin-bottom: 20px;
+}
 .black {
     color: black;
 }
@@ -826,8 +830,14 @@
     display:none;
 }
 
-.pull-right {
-    float: right !important
+.filter-with-content {
+    float: right !important;
+    color: red;
+}
+
+.filter-without-content {
+    float: right !important;
+    color: black;
 }
 
 .bold {
@@ -1096,4 +1106,218 @@
 }
 .open > .dropdown-menu {
     display: block
+}
+
+
+/*----------------------------------------------------------------------------*/
+/* Bootstrap panel style
+/*----------------------------------------------------------------------------*/
+
+.panel {
+    font-family: LiberationSansRegular, arial, sans-serif !important;
+    font-size: 9pt !important;
+    margin-bottom: 20px;
+    background-color: #fff;
+    border: 1px solid transparent;
+    
+    -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: 10px
+}
+.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 {
+    font-family: LiberationSansRegular, arial, sans-serif !important;
+    font-size: 9pt !important;
+    padding: 5px 10px;
+    border-bottom: 1px solid transparent;
+
+}
+.panel-heading > .dropdown .dropdown-toggle {
+    color: inherit
+}
+.panel-title {
+    margin-top: 0;
+    margin-bottom: 0;
+    font-family: LiberationSansRegular, arial, sans-serif !important;
+    font-size: 9pt !important;
+}
+.panel-title > a {
+    color: #000;
+}
+.panel-footer {
+    padding: 10px 15px;
+    background-color: #f5f5f5;
+    border-top: 1px solid #ddd;
+
+}
+.panel-group .panel {
+    margin-bottom: 0;
+    overflow: hidden;
+
+}
+.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
 }
\ 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-18 12:33:44 +0000
+++ dhis-2/dhis-web/dhis-web-event-capture/src/main/webapp/dhis-web-event-capture/app/views/eventList.html	2014-02-21 17:56:00 +0000
@@ -1,114 +1,181 @@
-<div id="contextMenu" class="contextMenu" style="width: 180px;">
-    <ul id="contextMenuItems" class="contextMenuItems">
-        <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>
+<!-- visible when editing grid columns - need to think better way to display this-->
+<div class="bordered-div" ng-show="editGridColumns">
+    <h3>{{'show_hide_columns'| translate}}</h3>
+    <table class="listTable dhis2-table-striped" width='100%'>
+        <tr>
+            <th>
+                {{'column' | translate}}
+            </th>
+            <th ng-repeat="eventGridColumn in eventGridColumns">
+                {{eventGridColumn.name}}
+            </th>
+        </tr>
+        <tr>
+            <th>
+                {{'hide' | translate}}
+            </th>
+            <th ng-repeat="eventGridColumn in eventGridColumns">
+                <input type="checkbox" ng-model="eventGridColumn.hide">
+            </th>
+        </tr>                            
+    </table>
+    <button ng-click="showHideColumns(false)">{{'close'| translate}}</button>
+    &nbsp;&nbsp;&nbsp;
+    <button ng-click="showHideColumns(true)">{{'show_all'| translate}}</button>
 </div>
 
-<form name="outerForm" novalidate>
-    <table class="mainPageTable">
-        <tr>
-            <td style="vertical-align:top">
-                <div id="content">
-
-                    <!-- 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="eventGridColumn in eventGridColumns">
-                                <td>
-                                    {{eventGridColumn.name}}
-                                </td>
-                                <td>
-                                    <input type="checkbox" ng-model="eventGridColumn.hide">{{'hide'| translate}}
-                                </td>
-                            </tr>                    
-                            <tr>
-                                <td>
-                                    <button ng-click="showHideColumns(false)">{{'close'| translate}}</button>
-                                </td>
-                                <td>
-                                    <button ng-click="showHideColumns(true)">{{'show_all'| translate}}</button>
-                                </td>                        
-                            </tr>
-                        </table>
-                    </div>
-
-                    <table class="listTable dhis2-table-striped dhis2-table-hover">                    
-                        <thead>                        
-                            <tr>
-                                <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="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)">
-
-                                <!-- 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>
-
-                                <!-- 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">
-                                    <ng-form name="innerForm">
-                                        <div ng-switch="programStageDataElements[eventGridColumn.id].dataElement.type">
-                                            <div ng-switch-when="int">
-                                                <input type="number" ng-model="currentEvent[eventGridColumn.id]" ng-required="programStageDataElements[eventGridColumn.id].compulsory" name="foo" style="width:98%;"/>
-                                                <span ng-show="outerForm.submitted && innerForm.foo.$invalid" class="error">{{'required'| translate}}</span>
-                                            </div>
-                                            <div ng-switch-when="string">                                        
-                                                <div ng-switch="programStageDataElements[eventGridColumn.id].dataElement.optionSet.options.length > 20">
-                                                    <div ng-switch-when="true">
-                                                        <div class="container-fluid">
-                                                            <input type="text" ng-model="currentEvent[eventGridColumn.id]" typeahead="option for option in programStageDataElements[eventGridColumn.id].dataElement.optionSet.options | filter:$viewValue | limitTo:20" ng-required="programStageDataElements[eventGridColumn.id].compulsory" name="foo" style="width:98%;">                                            
-                                                            <span ng-show="outerForm.submitted && innerForm.foo.$invalid" class="error">{{'required'| translate}}</span>
-                                                        </div>
-                                                    </div>
-                                                    <div ng-switch-default>
-                                                        <select ng-model="currentEvent[eventGridColumn.id]" ng-options="option for option in programStageDataElements[eventGridColumn.id].dataElement.optionSet.options" ng-required="programStageDataElements[eventGridColumn.id].compulsory" name="foo" style="width:98%;">
-                                                            <option value="">{{'please_select'| translate}}</option>
-                                                        </select>
-                                                        <span ng-show="outerForm.submitted && innerForm.foo.$invalid" class="error">{{'required'| translate}}</span>
-                                                    </div>
+<h2>
+    {{'registered_events'| translate}}                                                 
+</h2>               
+
+<div ng-switch="dhis2Events.length">
+
+    <div ng-switch-when="undefined">
+        <p>
+            {{'empty_search_result'| translate}}
+        </p>
+    </div>
+
+    <div ng-switch-default>
+
+        <!-- context menu for event grid -->
+        <div id="contextMenu" class="contextMenu" style="width: 180px;">
+            <ul id="contextMenuItems" class="contextMenuItems">
+                <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>
+        </div>
+        <!-- context menu ends -->
+
+        <!-- grid begins -->
+        <form name="outerForm" novalidate>                              
+
+            <table class="listTable dhis2-table-striped-border dhis2-table-hover">                    
+                <thead>                        
+                    <tr>
+                        <th ng-show="!eventGridColumn.hide" 
+                            class="max-column-width"                                                
+                            ng-repeat="eventGridColumn in eventGridColumns">
+
+                            <span ng-hide="eventGridColumn == filteringGrid" class="bold" ng-click="sortEventGrid(eventGridColumn)">
+                                <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>
+                                {{eventGridColumn.name}}
+                            </span>
+
+                            <span class="pull-right">
+                                <a href ng-click="searchInGrid(eventGridColumn)" title="{{'search'| translate}}"><span class='black'><i class="fa fa-search"></i></span></a>                                                    
+                            </span>                                               
+
+                            <div ng-show="eventGridColumn == filteringGrid">
+                                <input type="text" ng-model="filterText[eventGridColumn.id]" ng-blur="searchInGrid()">
+                            </div>                                                
+
+                        </th>
+                        <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 | filter:filterText" 
+                        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>
+
+                        <!-- Visible when event is under editing - in grid -->
+                        <td class="max-column-width"
+                            style="cursor:default;"                                                
+                            ng-show="(currentEvent.event == dhis2Event.event) && !eventGridColumn.hide" 
+                            ng-repeat="eventGridColumn in eventGridColumns">
+                            <ng-form name="innerFormGrid">
+                                <div ng-switch="programStageDataElements[eventGridColumn.id].dataElement.type">
+                                    <div ng-switch-when="int">
+                                        <input type="number" 
+                                               input-validator
+                                               program-stage-data-element={{programStageDataElements[eventGridColumn.id]}}
+                                               ng-model="currentEvent[eventGridColumn.id]" 
+                                               ng-blur="updateEventDataValue(currentEvent, eventGridColumn.id)" 
+                                               ng-required={{programStageDataElements[eventGridColumn.id].compulsory}} 
+                                               name="foo" 
+                                               style="width:98%;" 
+                                               ng-class="{'input-error': (outerForm.submitted && innerFormGrid.foo.$invalid), 'input-success': (outerForm.submitted && innerFormGrid.foo.$valid)}"
+                                               />
+                                        <span ng-show="outerForm.submitted && innerFormGrid.foo.$invalid" class="red">{{'required'| translate}}</span>
+                                    </div>
+                                    <div ng-switch-when="string">                                        
+                                        <div ng-switch="programStageDataElements[eventGridColumn.id].dataElement.optionSet.options.length > 20">
+                                            <div ng-switch-when="true">
+                                                <div class="container-fluid">
+                                                    <input type="text" 
+                                                           ng-model="currentEvent[eventGridColumn.id]" 
+                                                           ng-blur="updateEventDataValue(currentEvent, eventGridColumn.id)" 
+                                                           typeahead="option for option in programStageDataElements[eventGridColumn.id].dataElement.optionSet.options | filter:$viewValue | limitTo:20" 
+                                                           ng-required={{programStageDataElements[eventGridColumn.id].compulsory}} 
+                                                           name="foo" 
+                                                           style="width:98%;"
+                                                           />                                            
+                                                    <span ng-show="outerForm.submitted && innerFormGrid.foo.$invalid" class="red">{{'required'| translate}}</span>
                                                 </div>
                                             </div>
-                                            <div ng-switch-when="bool">
-                                                <select ng-model="currentEvent[eventGridColumn.id]" ng-required="programStageDataElements[eventGridColumn.id].compulsory" name="foo" style="width:98%;">
-                                                    <option value="">{{'please_select'| translate}}</option>                        
-                                                    <option value="0">{{'no'| translate}}</option>
-                                                    <option value="1">{{'yes'| translate}}</option>
+                                            <div ng-switch-default>
+                                                <select ng-model="currentEvent[eventGridColumn.id]" 
+                                                        ng-change="updateEventDataValue(currentEvent, eventGridColumn.id)" 
+                                                        ng-options="option for option in programStageDataElements[eventGridColumn.id].dataElement.optionSet.options" 
+                                                        ng-required={{programStageDataElements[eventGridColumn.id].compulsory}} 
+                                                        name="foo" 
+                                                        style="width:98%;">
+                                                    <option value="">{{'please_select'| translate}}</option>
                                                 </select>
-                                                <span ng-show="outerForm.submitted && innerForm.foo.$invalid" class="error">{{'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="programStageDataElements[eventGridColumn.id].compulsory" name="foo" style="width:98%;">
-                                                <span ng-show="outerForm.submitted && innerForm.foo.$invalid" class="error">{{'required'| translate}}</span>
+                                                <span ng-show="outerForm.submitted && innerFormGrid.foo.$invalid" class="red">{{'required'| translate}}</span>
                                             </div>
                                         </div>
-                                    </ng-form>
-                                </td>                            
-                                <td>                                
-                                    <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>                            
-                            </tr>
-                        </tbody>        
-                    </table>
-                    <p></p>
-                    <paginator></paginator>    
-                </div>
-            </td>
-        </tr>
-    </table>    
-</form>
+                                    </div>
+                                    <div ng-switch-when="bool">
+                                        <select ng-model="currentEvent[eventGridColumn.id]" 
+                                                ng-change="updateEventDataValue(currentEvent, eventGridColumn.id)" 
+                                                ng-required={{programStageDataElements[eventGridColumn.id].compulsory}} 
+                                                name="foo" 
+                                                style="width:98%;">
+                                            <option value="">{{'please_select'| translate}}</option>                        
+                                            <option value="0">{{'no'| translate}}</option>
+                                            <option value="1">{{'yes'| translate}}</option>
+                                        </select>
+                                        <span ng-show="outerForm.submitted && innerFormGrid.foo.$invalid" class="red">{{'required'| translate}}</span>
+                                    </div>
+                                    <div ng-switch-when="date">
+                                        <input type="text" 
+                                               placeholder="yyyy-mm-dd" 
+                                               ng-date 
+                                               ng-model="currentEvent[eventGridColumn.id]"
+                                               blur-or-change="updateEventDataValue(currentEvent, eventGridColumn.id)" 
+                                               ng-required={{programStageDataElements[eventGridColumn.id].compulsory}} 
+                                               name="foo" 
+                                               style="width:98%;"/>
+                                        <span ng-show="outerForm.submitted && innerFormGrid.foo.$invalid" class="red">{{'required'| translate}}</span>
+                                    </div>
+                                </div>
+                            </ng-form>
+                        </td>                            
+                        <td>                                
+                            <span ng-show="currentEvent.event == dhis2Event.event">
+                                <a href ng-click="showEventList()" title="{{'close_editing'| translate}}"><span class='black'><i class="fa fa-times-circle-o fa-2x"></i></span></a>                                                    
+                            </span>
+                        </td>                            
+                    </tr>
+                </tbody>        
+            </table>
+            <paginator></paginator>
+        </form>
+        <!-- grid ends -->
+    </div>
+</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/eventRegistration.html'
--- 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
+++ dhis-2/dhis-web/dhis-web-event-capture/src/main/webapp/dhis-web-event-capture/app/views/eventRegistration.html	2014-02-21 17:56:00 +0000
@@ -1,56 +1,92 @@
-<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" >                                            
+<h2>
+    {{'new_event_registration'| translate}}                                                 
+</h2>   
+<div style="width:50%;">
+    <form name="outerForm" novalidate>
+        <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">
+                        <ng-form name="innerFormAdd">
+                            <div ng-switch="programStageDataElements[eventGridColumn.id].dataElement.type">
+                                <div ng-switch-when="int">
+                                    <input type="number" 
+                                           ng-model="currentEvent[eventGridColumn.id]" 
+                                           ng-required={{programStageDataElements[eventGridColumn.id].compulsory}} 
+                                           name="foo" 
+                                           style="width:98%;"/>
+                                    <span ng-show="outerForm.submitted && innerFormAdd.foo.$invalid" class="red">{{'required'| translate}}</span>
+                                </div>
+                                <div ng-switch-when="string">                                        
+                                    <div ng-switch="programStageDataElements[eventGridColumn.id].dataElement.optionSet.options.length > 20">
+                                        <div ng-switch-when="true">
+                                            <div class="container-fluid">
+                                                <input type="text" 
+                                                       ng-model="currentEvent[eventGridColumn.id]" 
+                                                       typeahead="option for option in programStageDataElements[eventGridColumn.id].dataElement.optionSet.options | filter:$viewValue | limitTo:20" 
+                                                       ng-required={{programStageDataElements[eventGridColumn.id].compulsory}} 
+                                                       name="foo" 
+                                                       style="width:98%;">                                            
+                                                <span ng-show="outerForm.submitted && innerFormAdd.foo.$invalid" class="red">{{'required'| translate}}</span>
+                                            </div>
+                                        </div>
+                                        <div ng-switch-default>
+                                            <select ng-model="currentEvent[eventGridColumn.id]" 
+                                                    ng-options="option for option in programStageDataElements[eventGridColumn.id].dataElement.optionSet.options" 
+                                                    ng-required={{programStageDataElements[eventGridColumn.id].compulsory}} 
+                                                    name="foo" 
+                                                    style="width:98%;">
+                                                <option value="">{{'please_select'| translate}}</option>
+                                            </select>
+                                            <span ng-show="outerForm.submitted && innerFormAdd.foo.$invalid" class="red">{{'required'| translate}}</span>
+                                        </div>
                                     </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>
+                                <div ng-switch-when="bool">
+                                    <select ng-model="currentEvent[eventGridColumn.id]" 
+                                            ng-required={{programStageDataElements[eventGridColumn.id].compulsory}} 
+                                            name="foo" 
+                                            style="width:98%;">
+                                        <option value="">{{'please_select'| translate}}</option>                        
+                                        <option value="0">{{'no'| translate}}</option>
+                                        <option value="1">{{'yes'| translate}}</option>
                                     </select>
+                                    <span ng-show="outerForm.submitted && innerFormAdd.foo.$invalid" class="red">{{'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={{programStageDataElements[eventGridColumn.id].compulsory}} 
+                                           name="foo" 
+                                           style="width:98%;">
+                                    <span ng-show="outerForm.submitted && innerFormAdd.foo.$invalid" class="red">{{'required'| translate}}</span>
                                 </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>  
+                        </ng-form>
+                    </td>
+                </tr>
+            </tbody>        
+        </table>
+
+        <button ng-click="addEvent(true)" class="button">{{'save_and_add_new'| translate}}</button>
+        &nbsp;&nbsp;&nbsp;&nbsp;
+        <button ng-click="addEvent()" class="button">{{'save_and_close'| translate}}</button>
+        &nbsp;&nbsp;&nbsp;&nbsp;
+        <button ng-click="showEventList(null)" class="button">{{'close'| translate}}</button>
+    </form>
 </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-18 09:41:26 +0000
+++ dhis-2/dhis-web/dhis-web-event-capture/src/main/webapp/dhis-web-event-capture/app/views/orgUnitTree.html	2014-02-21 17:56:00 +0000
@@ -1,4 +1,4 @@
-<div class="org-unit-tree">
+<!--<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>
@@ -15,10 +15,10 @@
     <ul class="tree" id="tree">
         <li ng-repeat="orgUnit in orgUnits| orderBy: 'name'" ng-include="'orgUnitTree.html'"></li>
     </ul>
-</div>
-<!--<div id="orgUnitTree">
+</div>-->
+<div id="orgUnitTree">
     <ul>
     </ul>
 </div>
 
-<img id="ouwt_loader" src="../../images/ajax-loader-bar.gif"/>-->
\ No newline at end of file
+<img id="ouwt_loader" src="../../images/ajax-loader-bar.gif"/>
\ No newline at end of file