=== modified file 'dhis-2/dhis-web/dhis-web-apps/src/main/webapp/dhis-web-tracker-capture/components/report/overdue-events-controller.js'
--- dhis-2/dhis-web/dhis-web-apps/src/main/webapp/dhis-web-tracker-capture/components/report/overdue-events-controller.js	2015-03-30 10:40:41 +0000
+++ dhis-2/dhis-web/dhis-web-apps/src/main/webapp/dhis-web-tracker-capture/components/report/overdue-events-controller.js	2015-04-27 08:24:30 +0000
@@ -5,7 +5,7 @@
                 $modal,
                 $location,
                 $translate,
-                orderByFilter,
+                $filter,
                 DateUtils,
                 Paginator,
                 EventReportService,
@@ -132,11 +132,14 @@
                 });
                 
                 //sort overdue events by their due dates - this is default
-                $scope.overdueEvents = orderByFilter($scope.overdueEvents, '-dueDate');
-                $scope.overdueEvents.reverse();
-
+                if(!$scope.sortColumn.id){                                      
+                    $scope.sortGrid({id: 'dueDate', name: $translate('due_date'), valueType: 'date', displayInListNoProgram: false, showFilter: false, show: true});
+                    $scope.reverse = false;
+                }
+        
                 $scope.reportFinished = true;
                 $scope.reportStarted = false;
+                
             });
         }
     };    
@@ -146,8 +149,10 @@
         if (angular.isObject($scope.selectedProgram)){
             
             $scope.programStages = [];
+            $scope.sortColumn = {};
             $scope.filterTypes = {};
             $scope.filterText = {};
+            $scope.reverse = false;
 
             angular.forEach($scope.selectedProgram.programStages, function(stage){
                 $scope.programStages[stage.id] = stage;
@@ -156,12 +161,16 @@
             AttributesFactory.getByProgram($scope.selectedProgram).then(function(atts){            
                 var grid = TEIGridService.generateGridColumns(atts, $scope.selectedOuMode);
                 $scope.gridColumns = grid.columns;
+                
+                angular.forEach($scope.gridColumns, function(col){
+                    col.eventCol = false;
+                });
 
-                $scope.gridColumns.push({name: $translate('event_orgunit_name'), id: 'orgUnitName', type: 'string', displayInListNoProgram: false, showFilter: false, show: true});
+                $scope.gridColumns.push({name: $translate('event_orgunit_name'), id: 'orgUnitName', type: 'string', displayInListNoProgram: false, showFilter: false, show: true, eventCol: true});
                 $scope.filterTypes['orgUnitName'] = 'string';
-                $scope.gridColumns.push({name: $translate('event_name'), id: 'eventName', type: 'string', displayInListNoProgram: false, showFilter: false, show: true});
+                $scope.gridColumns.push({name: $translate('event_name'), id: 'eventName', type: 'string', displayInListNoProgram: false, showFilter: false, show: true, eventCol: true});
                 $scope.filterTypes['eventName'] = 'string';
-                $scope.gridColumns.push({name: $translate('due_date'), id: 'dueDate', type: 'date', displayInListNoProgram: false, showFilter: false, show: true});
+                $scope.gridColumns.push({name: $translate('due_date'), id: 'dueDate', type: 'date', displayInListNoProgram: false, showFilter: false, show: true, eventCol: true});
                 $scope.filterTypes['dueDate'] = 'date';
                 $scope.filterText['dueDate']= {};                
             });
@@ -197,21 +206,31 @@
         }, function () {
         });
     };
-    
+
+    //sortGrid
     $scope.sortGrid = function(gridHeader){
-        if ($scope.sortHeader === gridHeader.id){
+        if ($scope.sortColumn && $scope.sortColumn.id === gridHeader.id){
             $scope.reverse = !$scope.reverse;
             return;
         }        
-        $scope.sortHeader = gridHeader.id;
-        $scope.reverse = false;
-        
-        $scope.overdueEvents = orderByFilter($scope.overdueEvents, $scope.sortHeader);
-        
-        if($scope.reverse){
-            $scope.overdueEvents.reverse();
-        }
-    };
+        $scope.sortColumn = gridHeader;
+        if($scope.sortColumn.valueType === 'date'){
+            $scope.reverse = true;
+        }
+        else{
+            $scope.reverse = false;    
+        }
+    };
+    
+    
+    $scope.d2Sort = function(overDueEvent){ 
+        if($scope.sortColumn && $scope.sortColumn.valueType === 'date'){            
+            var d = overDueEvent[$scope.sortColumn.id];         
+            return DateUtils.getDate(d);
+        }
+        return overDueEvent[$scope.sortColumn.id];
+    };
+    
     
     $scope.searchInGrid = function(gridColumn){
         

=== modified file 'dhis-2/dhis-web/dhis-web-apps/src/main/webapp/dhis-web-tracker-capture/components/report/overdue-events.html'
--- dhis-2/dhis-web/dhis-web-apps/src/main/webapp/dhis-web-tracker-capture/components/report/overdue-events.html	2015-04-21 07:42:41 +0000
+++ dhis-2/dhis-web/dhis-web-apps/src/main/webapp/dhis-web-tracker-capture/components/report/overdue-events.html	2015-04-27 08:24:30 +0000
@@ -125,30 +125,29 @@
                 <div class="vertical-spacing">
                     <table class="listTable dhis2-table-striped-border dhis2-table-hover">               
                         <thead>                        
-                            <tr>
-                                <th ng-show="gridColumn.show" ng-repeat="gridColumn in gridColumns">
+                            <tr>                               
+                                <th ng-repeat="gridColumn in gridColumns | filter:{show: true}">
 
                                     <!-- sort icon begins -->
                                     <span ng-click="sortGrid(gridColumn)">
+                                        <span ng-class="{true: 'red'} [sortColumn.id === gridColumn.id]"><i class="fa fa-sort hideInPrint"></i></span>
                                         {{gridColumn.name}}
-                                        <i ng-if="sortHeader == gridColumn.id && reverse" class="fa fa-sort-desc hideInPrint"></i>
-                                        <i ng-if="sortHeader == gridColumn.id && !reverse" class="fa fa-sort-asc hideInPrint"></i>
                                     </span>
                                     <!-- sort icon ends -->
 
                                     <!-- filter icon begins -->
                                     <span class='pull-right hideInPrint'>
-                                        <span ng-show="gridColumn.type != 'date' && gridColumn.type != 'int'">
+                                        <span ng-if="gridColumn.type != 'date' && gridColumn.type != 'int'">
                                             <a href ng-click="searchInGrid(gridColumn)" title="{{'search'| translate}}"><span ng-class="{true: 'filter-without-content', false: 'filter-with-content'} [filterText[gridColumn.id] == undefined || filterText[gridColumn.id] == '']"><i class="fa fa-search"></i></span></a>
                                         </span>
-                                        <span ng-show="gridColumn.type === 'date' || gridColumn.type === 'int'">
+                                        <span ng-if="gridColumn.type === 'date' || gridColumn.type === 'int'">
                                             <a href ng-click="searchInGrid(gridColumn)" title="{{'search'| translate}}"><span ng-class="{true: 'filter-without-content', false: 'filter-with-content'} [(filterText[gridColumn.id].start == undefined || filterText[gridColumn.id].start == '') && (filterText[gridColumn.id].end == undefined || filterText[gridColumn.id].end == '')]"><i class="fa fa-search"></i></span></a>
                                         </span>                                                    
                                     </span>
                                     <!-- filter icon ends -->
 
                                     <!-- filter input field begins -->
-                                    <span ng-show="gridColumn.showFilter" class="hideInPrint">  
+                                    <span ng-if="gridColumn.showFilter" class="hideInPrint">  
                                         <span ng-switch="gridColumn.type">
                                             <span ng-switch-when="int">
                                                 <input style="width: 45%;" placeholder="{{'lower_limit'| translate}}" type="number" ng-model="filterText[gridColumn.id].start" ng-blur="searchInGrid(gridColumn)">
@@ -170,22 +169,25 @@
                                         </span>                                                    
                                     </span>
                                     <!-- filter input field ends -->
-
+                                    
                                 </th>
                             </tr>                        
                         </thead>
-                        <tbody id="list">
-                            <tr ng-repeat="overdueEvent in overdueEvents | orderBy:sortHeader:reverse | gridFilter:filterText:filterTypes"
+                        <tbody>
+                            <tr ng-repeat="overdueEvent in overdueEvents | orderBy:[d2Sort, 'trackedEntityInstance']:reverse | gridFilter:filterText:filterTypes"
                                 ng-click="showDashboard(overdueEvent.trackedEntityInstance)"
                                 title="{{'go_to_dashboard'| translate}}">
-                                <td ng-show="gridColumn.show"                                            
-                                    ng-repeat="gridColumn in gridColumns" ng-if='displayMode.onlyMarkedFollowup ? overdueEvent.followup:true'>                                                
-                                    {{overdueEvent[gridColumn.id]}}                                                
-                                </td>                                
+                                <td ng-repeat="gridColumn in gridColumns | filter:{show: true, eventCol: false}" 
+                                    ng-if='displayMode.onlyMarkedFollowup ? overdueEvent.followup:true'>                                                
+                                    {{overdueEvent[gridColumn.id]}}
+                                </td>
+                                <td ng-repeat="gridColumn in gridColumns | filter:{show: true, eventCol: true}" ng-if='displayMode.onlyMarkedFollowup ? overdueEvent.followup:true'>                                                
+                                    {{overdueEvent[gridColumn.id]}}
+                                </td> 
                             </tr>
-                        </tbody>        
+                        </tbody>
                     </table>
-                    <serverside-paginator></serverside-paginator>
+                    <!--<serverside-paginator></serverside-paginator>-->
                 </div>
 
                 <!-- report ends -->

=== modified file 'dhis-2/dhis-web/dhis-web-apps/src/main/webapp/dhis-web-tracker-capture/components/report/upcoming-events-controller.js'
--- dhis-2/dhis-web/dhis-web-apps/src/main/webapp/dhis-web-tracker-capture/components/report/upcoming-events-controller.js	2015-03-30 10:40:41 +0000
+++ dhis-2/dhis-web/dhis-web-apps/src/main/webapp/dhis-web-tracker-capture/components/report/upcoming-events-controller.js	2015-04-27 08:24:30 +0000
@@ -129,9 +129,11 @@
 
             });
 
-            //sort overdue events by their due dates - this is default
-            $scope.upcomingEvents = orderByFilter($scope.upcomingEvents, '-dueDate');
-            $scope.upcomingEvents.reverse();
+            //sort upcoming events by their due dates - this is default
+            if(!$scope.sortColumn.id){                                      
+                $scope.sortGrid({id: 'dueDate', name: $translate('due_date'), valueType: 'date', displayInListNoProgram: false, showFilter: false, show: true});
+                $scope.reverse = false;
+            }
 
             $scope.reportFinished = true;
             $scope.reportStarted = false;
@@ -143,8 +145,10 @@
         if (angular.isObject($scope.selectedProgram)){
             
             $scope.programStages = [];
+            $scope.sortColumn = {};
             $scope.filterTypes = {};
             $scope.filterText = {};
+            $scope.reverse = false;;
 
             angular.forEach($scope.selectedProgram.programStages, function(stage){
                 $scope.programStages[stage.id] = stage;
@@ -155,11 +159,15 @@
                 var grid = TEIGridService.generateGridColumns(atts, $scope.selectedOuMode);
                 $scope.gridColumns = grid.columns;
                 
-                $scope.gridColumns.push({name: $translate('event_orgunit_name'), id: 'eventOrgUnitName', type: 'string', displayInListNoProgram: false, showFilter: false, show: true});
+                angular.forEach($scope.gridColumns, function(col){
+                    col.eventCol = false;
+                });
+                
+                $scope.gridColumns.push({name: $translate('event_orgunit_name'), id: 'orgUnitName', type: 'string', displayInListNoProgram: false, showFilter: false, show: true, eventCol: true});
                 $scope.filterTypes['orgUnitName'] = 'string';
-                $scope.gridColumns.push({name: $translate('event_name'), id: 'eventName', type: 'string', displayInListNoProgram: false, showFilter: false, show: true});
+                $scope.gridColumns.push({name: $translate('event_name'), id: 'eventName', type: 'string', displayInListNoProgram: false, showFilter: false, show: true, eventCol: true});
                 $scope.filterTypes['eventName'] = 'string';
-                $scope.gridColumns.push({name: $translate('due_date'), id: 'dueDate', type: 'date', displayInListNoProgram: false, showFilter: false, show: true});
+                $scope.gridColumns.push({name: $translate('due_date'), id: 'dueDate', type: 'date', displayInListNoProgram: false, showFilter: false, show: true, eventCol: true});
                 $scope.filterTypes['dueDate'] = 'date';
                 $scope.filterText['dueDate']= {};                
             });
@@ -197,18 +205,25 @@
     };
     
     $scope.sortGrid = function(gridHeader){
-        if ($scope.sortHeader === gridHeader.id){
+        if ($scope.sortColumn && $scope.sortColumn.id === gridHeader.id){
             $scope.reverse = !$scope.reverse;
             return;
         }        
-        $scope.sortHeader = gridHeader.id;
-        $scope.reverse = false;
-        
-        $scope.upcomingEvents = orderByFilter($scope.upcomingEvents, $scope.sortHeader);
-        
-        if($scope.reverse){
-            $scope.upcomingEvents.reverse();
-        }
+        $scope.sortColumn = gridHeader;
+        if($scope.sortColumn.valueType === 'date'){
+            $scope.reverse = true;
+        }
+        else{
+            $scope.reverse = false;    
+        }
+    };
+    
+    $scope.d2Sort = function(upcomingDueEvent){ 
+        if($scope.sortColumn && $scope.sortColumn.valueType === 'date'){            
+            var d = upcomingDueEvent[$scope.sortColumn.id];         
+            return DateUtils.getDate(d);
+        }
+        return upcomingDueEvent[$scope.sortColumn.id];
     };
     
     $scope.searchInGrid = function(gridColumn){

=== modified file 'dhis-2/dhis-web/dhis-web-apps/src/main/webapp/dhis-web-tracker-capture/components/report/upcoming-events.html'
--- dhis-2/dhis-web/dhis-web-apps/src/main/webapp/dhis-web-tracker-capture/components/report/upcoming-events.html	2015-04-21 07:42:41 +0000
+++ dhis-2/dhis-web/dhis-web-apps/src/main/webapp/dhis-web-tracker-capture/components/report/upcoming-events.html	2015-04-27 08:24:30 +0000
@@ -152,29 +152,28 @@
                     <table class="listTable dhis2-table-striped-border dhis2-table-hover">               
                         <thead>                        
                             <tr>
-                                <th ng-show="gridColumn.show" ng-repeat="gridColumn in gridColumns">
+                                 <th ng-repeat="gridColumn in gridColumns | filter:{show: true}">
 
                                     <!-- sort icon begins -->
                                     <span ng-click="sortGrid(gridColumn)">
-                                        {{gridColumn.name| translate}}
-                                        <i ng-if="sortHeader === gridColumn.id && reverse" class="fa fa-sort-desc"></i>
-                                        <i ng-if="sortHeader === gridColumn.id && !reverse" class="fa fa-sort-asc"></i>
+                                        <span ng-class="{true: 'red'} [sortColumn.id === gridColumn.id]"><i class="fa fa-sort hideInPrint"></i></span>
+                                        {{gridColumn.name}}
                                     </span>
                                     <!-- sort icon ends -->
 
                                     <!-- filter icon begins -->
-                                    <span class='pull-right'>
-                                        <span ng-show="gridColumn.type !== 'date' && gridColumn.type !== 'int'">
-                                            <a href ng-click="searchInGrid(gridColumn)" title="{{'search'| translate}}"><span ng-class="{true: 'filter-without-content', false: 'filter-with-content'} [filterText[gridColumn.id] === undefined || filterText[gridColumn.id] === '']"><i class="fa fa-search"></i></span></a>
+                                    <span class='pull-right hideInPrint'>
+                                        <span ng-if="gridColumn.type != 'date' && gridColumn.type != 'int'">
+                                            <a href ng-click="searchInGrid(gridColumn)" title="{{'search'| translate}}"><span ng-class="{true: 'filter-without-content', false: 'filter-with-content'} [filterText[gridColumn.id] == undefined || filterText[gridColumn.id] == '']"><i class="fa fa-search"></i></span></a>
                                         </span>
-                                        <span ng-show="gridColumn.type === 'date' || gridColumn.type === 'int'">
-                                            <a href ng-click="searchInGrid(gridColumn)" title="{{'search'| translate}}"><span ng-class="{true: 'filter-without-content', false: 'filter-with-content'} [(filterText[gridColumn.id].start === undefined || filterText[gridColumn.id].start === '') && (filterText[gridColumn.id].end === undefined || filterText[gridColumn.id].end === '')]"><i class="fa fa-search"></i></span></a>
+                                        <span ng-if="gridColumn.type === 'date' || gridColumn.type === 'int'">
+                                            <a href ng-click="searchInGrid(gridColumn)" title="{{'search'| translate}}"><span ng-class="{true: 'filter-without-content', false: 'filter-with-content'} [(filterText[gridColumn.id].start == undefined || filterText[gridColumn.id].start == '') && (filterText[gridColumn.id].end == undefined || filterText[gridColumn.id].end == '')]"><i class="fa fa-search"></i></span></a>
                                         </span>                                                    
                                     </span>
                                     <!-- filter icon ends -->
 
                                     <!-- filter input field begins -->
-                                    <span ng-show="gridColumn.showFilter">  
+                                    <span ng-if="gridColumn.showFilter" class="hideInPrint">  
                                         <span ng-switch="gridColumn.type">
                                             <span ng-switch-when="int">
                                                 <input style="width: 45%;" placeholder="{{'lower_limit'| translate}}" type="number" ng-model="filterText[gridColumn.id].start" ng-blur="searchInGrid(gridColumn)">
@@ -182,11 +181,11 @@
                                             </span>
                                             <span ng-switch-when="date">
                                                 <input style="width: 70%;" placeholder="{{'start_date'| translate}}" type="text" ng-model="filterText[gridColumn.id].start" data-d2-date readonly="readonly">
-                                                <span ng-hide="filterText[gridColumn.id].start === undefined || filterText[gridColumn.id].start === ''">
+                                                <span ng-hide="filterText[gridColumn.id].start == undefined || filterText[gridColumn.id].start == ''">
                                                     <a href ng-click='removeStartFilterText(gridColumn.id)'><span class='black'><i class="fa fa-trash-o"></i></span></a>                                                        
                                                 </span>
                                                 <input style="width: 70%;" placeholder="{{'end_date'| translate}}" type="text" ng-model="filterText[gridColumn.id].end" data-d2-date readonly="readonly">
-                                                <span ng-hide="filterText[gridColumn.id].end === undefined || filterText[gridColumn.id].end === ''">
+                                                <span ng-hide="filterText[gridColumn.id].end == undefined || filterText[gridColumn.id].end == ''">
                                                     <a href ng-click='removeEndFilterText(gridColumn.id)'><span class='black'><i class="fa fa-trash-o"></i></span></a>                                                        
                                                 </span> 
                                             </span>
@@ -196,22 +195,25 @@
                                         </span>                                                    
                                     </span>
                                     <!-- filter input field ends -->
-
+                                    
                                 </th>
                             </tr>                        
                         </thead>
                         <tbody id="list">
-                            <tr ng-repeat="upcomingEvent in upcomingEvents| orderBy:sortHeader:reverse | gridFilter:filterText:filterTypes"
+                            <tr ng-repeat="upcomingEvent in upcomingEvents | orderBy:[d2Sort, 'trackedEntityInstance']:reverse | gridFilter:filterText:filterTypes"
                                 ng-click="showDashboard(upcomingEvent.trackedEntityInstance)"
                                 title="{{'go_to_dashboard'| translate}}">
-                                <td ng-show="gridColumn.show"                                            
-                                    ng-repeat="gridColumn in gridColumns" ng-if='displayMode.onlyMarkedFollowup ? upcomingEvent.followup:true'>                                                
-                                    {{upcomingEvent[gridColumn.id]}}                                                
-                                </td>                                
+                                <td ng-repeat="gridColumn in gridColumns | filter:{show: true, eventCol: false}" 
+                                    ng-if='displayMode.onlyMarkedFollowup ? overdueEvent.followup:true'>                                                
+                                    {{upcomingEvent[gridColumn.id]}}
+                                </td>
+                                <td ng-repeat="gridColumn in gridColumns | filter:{show: true, eventCol: true}" ng-if='displayMode.onlyMarkedFollowup ? overdueEvent.followup:true'>                                                
+                                    {{upcomingEvent[gridColumn.id]}}
+                                </td>                               
                             </tr>
                         </tbody>        
                     </table>
-                    <serverside-paginator></serverside-paginator>
+                    <!--<serverside-paginator></serverside-paginator>-->
                 </div>
                 <!-- report ends -->
             </div>

=== modified file 'dhis-2/dhis-web/dhis-web-apps/src/main/webapp/dhis-web-tracker-capture/scripts/services.js'
--- dhis-2/dhis-web/dhis-web-apps/src/main/webapp/dhis-web-tracker-capture/scripts/services.js	2015-04-23 15:18:14 +0000
+++ dhis-2/dhis-web/dhis-web-apps/src/main/webapp/dhis-web-tracker-capture/scripts/services.js	2015-04-27 08:24:30 +0000
@@ -999,7 +999,7 @@
         	var pg = pager ? pager.page : 1;
             pgSize = pgSize > 1 ? pgSize  : 1;
             pg = pg > 1 ? pg : 1; 
-            var url = '../api/events/eventRows.json?' + 'orgUnit=' + orgUnit + '&ouMode='+ ouMode + '&program=' + program + '&programStatus=' + programStatus + '&eventStatus='+ eventStatus + '&pageSize=' + pgSize + '&page=' + pg;
+            var url = '../api/events/eventRows.json?' + 'orgUnit=' + orgUnit + '&ouMode='+ ouMode + '&program=' + program + '&programStatus=' + programStatus + '&eventStatus='+ eventStatus;
             if(startDate && endDate){
                 url = url + '&startDate=' + startDate + '&endDate=' + endDate ;
             }