fix virtual scroll and double ajax request calls

.gitignore

@@ -5,4 +5,5 @@ build
 node_modules
 reports
 typings
-.idea
+.idea
+coverage

app/modules/main/directives/helpers/mdtAddHtmlContentToCellDirective.js

@@ -4,8 +4,9 @@
     function mdtAddHtmlContentToCellDirective($parse, $compile, $rootScope){
         return {
             restrict: 'A',
-            require: '^mdtTable',
+            require: '^?mdtTable',
             link: function($scope, element, attr, ctrl){
+
                 $scope.$watch(function(){
                     //this needs to be like that. Passing only `attr.mdtAddHtmlContentToCell` will cause digest to go crazy 10 times.
                     // so we has to say explicitly that we only want to watch the content and nor the attributes, or the additional metadata.
@@ -18,7 +19,9 @@
 
                     var originalValue = $parse(attr.mdtAddHtmlContentToCell)($scope);
 
-                    if(originalValue.columnKey && ctrl.tableDataStorageService.customCells[originalValue.columnKey]){
+                    // ctrl doesn't exist on the first row, making html content impossible to show up.
+                    // TODO: make it as a global service .... I know but any better idea?
+                    if(originalValue.columnKey && ctrl && ctrl.tableDataStorageService.customCells[originalValue.columnKey]){
                         var customCellData = ctrl.tableDataStorageService.customCells[originalValue.columnKey];
 
                         var clonedHtml = customCellData.htmlContent;

app/modules/main/directives/mdtTableDirective.js

@@ -128,7 +128,7 @@
                 mdtTriggerRequest: '&?',
                 mdtTranslations: '=?'
             },
-            controller: function mdtTable($scope){
+            controller: function mdtTable($scope, $element){
                 var vm = this;
 
                 setDefaultTranslations();
@@ -138,7 +138,7 @@
                 vm.addHeaderCell = addHeaderCell;
 
                 function initTableStorageServiceAndBindMethods(){
-                    vm.tableDataStorageService = TableDataStorageFactory.getInstance();
+                    vm.tableDataStorageService = TableDataStorageFactory.getInstance(vm.virtualRepeat);
 
                     if(!$scope.mdtRowPaginator){
                         $scope.mdtPaginationHelper = mdtPaginationHelperFactory
@@ -299,4 +299,4 @@
     angular
         .module('mdDataTable')
         .directive('mdtTable', mdtTableDirective);
-}());
+}());

app/modules/main/directives/tablecard/mdtCardFooterDirective.js

@@ -13,7 +13,9 @@
                 $scope.rowsPerPage = $scope.mdtPaginationHelper.rowsPerPage;
 
                 $scope.$watch('rowsPerPage', function(newVal, oldVal){
-                    $scope.mdtPaginationHelper.setRowsPerPage(newVal);
+                    if(newVal != oldVal){
+                        $scope.mdtPaginationHelper.setRowsPerPage(newVal);  
+                    }
                 });
             }
         };
@@ -22,4 +24,4 @@
     angular
         .module('mdDataTable')
         .directive('mdtCardFooter', mdtCardFooterDirective);
-}());
+}());

app/modules/main/factories/TableDataStorageFactory.js

@@ -3,13 +3,14 @@
 
     function TableDataStorageFactory($log, _){
 
-        function TableDataStorageService(){
+        function TableDataStorageService(isVirtualRepeatEnabled){
             this.storage = [];
             this.header = [];
             this.customCells = {};
 
             this.sortByColumnLastIndex = null;
             this.orderByAscending = true;
+            this.isVirtualRepeatEnabled = isVirtualRepeatEnabled;
         }
 
         TableDataStorageService.prototype.addHeaderCellData = function(ops){
@@ -170,8 +171,8 @@
         };
 
         return {
-            getInstance: function(){
-                return new TableDataStorageService();
+            getInstance: function(isVirtualRepeatEnabled){
+                return new TableDataStorageService(isVirtualRepeatEnabled);
             }
         };
     }

app/modules/main/factories/mdtAjaxPaginationHelperFactory.js

@@ -156,4 +156,4 @@
     angular
         .module('mdDataTable')
         .service('mdtAjaxPaginationHelperFactory', mdtAjaxPaginationHelperFactory);
-}());
+}());

app/modules/main/templates/generateTable.html

@@ -1,5 +1,5 @@
-<table cellpadding="0" cellspacing="0">
-    <thead class="originalHeader">
+<table ng-if="virtualRepeat" cellpadding="0" cellspacing="0" md-virtual-repeat-container class="md-virtual-repeat-container">
+    <thead>
         <tr class="theadTrRow"
             mdt-animate-sort-icon-handler>
 
@@ -22,6 +22,101 @@
             </th>
         </tr>
     </thead>
-    <tbody md-virtual-repeat-container ng-include="'/main/templates/generateRowsVirtualRepeat.html'" ng-if="virtualRepeat" style="display: table-row-group;"></tbody>
-    <tbody ng-include="'/main/templates/generateRows.html'" ng-if="!virtualRepeat"></tbody>
-</table>
+    <tbody>
+        <tr md-virtual-repeat="rowData in mdtPaginationHelper.getRows()"
+            ng-class="{'selectedRow': rowData.optionList.selected}"
+            ng-show="(isPaginationEnabled() === false || rowData.optionList.visible === true) && rowData.optionList.deleted === false">
+
+            <td class="checkboxCell" ng-show="selectableRows">
+                <md-checkbox aria-label="select" ng-model="rowData.optionList.selected" ng-change="onCheckboxChange()"></md-checkbox>
+            </td>
+
+            <td
+                    class="column"
+                    ng-repeat="cellData in rowData.data"
+                    mdt-add-align-class="headerData[$index].alignRule">
+
+                <span mdt-add-html-content-to-cell="cellData"></span>
+            </td>
+        </tr>
+        <tr ng-show="mdtPaginationHelper.isLoading">
+            <td colspan="999">
+                <md-progress-linear md-mode="indeterminate"></md-progress-linear>
+            </td>
+        </tr>
+        <tr ng-show="mdtPaginationHelper.isLoadError">
+            <td colspan="999">
+                {{mdtPaginationHelper.mdtRowPaginatorErrorMessage}}
+            </td>
+        </tr>
+    </tbody>
+</table>
+
+<table ng-if="!virtualRepeat" cellpadding="0" cellspacing="0">
+    <tr class="theadTrRow"
+        mdt-animate-sort-icon-handler>
+
+        <!-- TODO: fix text-align:left, in theory it should not be there to make it work -->
+        <th class="checkboxCell"
+            style="text-align:left;"
+            ng-show="selectableRows"
+            mdt-select-all-rows-handler>
+            <md-checkbox aria-label="select all" ng-model="selectAllRows"></md-checkbox>
+        </th>
+
+        <th class="column"
+            ng-repeat="headerRowData in headerData track by $index"
+            ng-class="{'clickable': sortableColumns}"
+            mdt-add-align-class="headerRowData.alignRule"
+            mdt-sort-handler
+            md-ink-ripple="{{rippleEffect}}">
+
+            <mdt-generated-header-cell-content></mdt-generated-header-cell-content>
+        </th>
+    </tr>
+
+    <tr class="tbodyTrRow"
+        ng-repeat="rowData in mdtPaginationHelper.getRows() track by $index"
+        ng-class="{'selectedRow': rowData.optionList.selected}"
+        ng-show="(isPaginationEnabled() === false || rowData.optionList.visible === true) && rowData.optionList.deleted === false">
+
+        <td class="checkboxCell" ng-show="selectableRows">
+            <md-checkbox aria-label="select" ng-model="rowData.optionList.selected" ng-change="onCheckboxChange()"></md-checkbox>
+        </td>
+
+        <td class="column"
+            ng-repeat="cellData in rowData.data track by $index"
+            mdt-add-align-class="headerData[$index].alignRule"
+            style="position:relative;">
+
+            <!-- editable field -->
+            <ng-md-icon icon="edit" size="16"
+                        style="cursor:pointer;float:right;height:16px;padding-left:5px;outline: none;"
+                        ng-if="cellData.attributes.editableField"
+                        ng-click="showEditDialog($event, cellData, rowData)"></ng-md-icon>
+
+            <span mdt-add-html-content-to-cell="cellData"
+                  style="cursor:pointer;outline: none;"
+                  ng-if="cellData.attributes.editableField"
+                  ng-click="showEditDialog($event, cellData, rowData)"></span>
+
+            <!-- non editable field -->
+            <span mdt-add-html-content-to-cell="cellData" ng-if="cellData.attributes.editableField == false"></span>
+        </td>
+    </tr>
+    <tr ng-show="mdtPaginationHelper.isLoading">
+        <td colspan="999">
+            <md-progress-linear md-mode="indeterminate"></md-progress-linear>
+        </td>
+    </tr>
+    <tr ng-show="mdtPaginationHelper.isLoadError">
+        <td colspan="999" class="errorMessage">
+            <ng-bind-html ng-bind-html="mdtPaginationHelper.mdtRowPaginatorErrorMessage"></ng-bind-html>
+        </td>
+    </tr>
+    <tr ng-show="mdtPaginationHelper.isNoResults && !mdtPaginationHelper.isLoadError">
+        <td colspan="999" class="noResultMessage">
+            <ng-bind-html ng-bind-html="mdtPaginationHelper.mdtRowPaginatorNoResultsMessage"></ng-bind-html>
+        </td>
+    </tr>
+</table>

app/scss/main.scss

@@ -57,14 +57,14 @@
             .hoverSortIcons ng-md-icon{
                 display:none;
             }
-                   
+
             ng-md-icon{
                 /* specified 16px is a fix now cause angular materia generates a 24x24 icon even the passed value is 16  */
                 width: 16px;
                 height: 16px;
 
                 fill: darken($whiteColor, 87%);
- 
+
                 /* sort icon rotated 90 degrees for ascending sort (default) */
                 svg{
                     -webkit-transform:rotate(90deg);
@@ -77,18 +77,18 @@
             &.descending ng-md-icon>svg{
                 -webkit-transform:rotate(-90deg);
                 transform:rotate(-90deg);
-            }                    
+            }
 
         }
     }
-    
+
     /* optional animation of sort icons: add class 'animate-sort-icon' to mdt-header-row to activate animation */
-    thead tr.animate-sort-icon .sortedColumn ng-md-icon svg{
+    tr.animate-sort-icon .sortedColumn ng-md-icon svg{
         -webkit-transition: 0.3s linear all;
         transition: 0.3s linear all;
     }
 
-    
+
     /* 64dp card header height */
     .mdt-header{
         height: 64px;
@@ -199,16 +199,7 @@
 
     .md-inactive ng-md-icon { fill: rgba(0, 0, 0, 0.26); }
 
-    /* virtual repeat needed classes */
-    .virtualRepeatEnabled .originalHeader tr th{
-        height: 0px !important;
-        line-height: 0px !important;
-        margin:0px !important;
-        overflow: hidden !important;
-        border: none !important;
-    }
-
-    .virtualRepeatEnabled .originalHeader md-checkbox{
-        display: none;
+    .md-virtual-repeat-scroller{
+        top: 57px;
     }
-}
+}

bower.json

@@ -1,6 +1,6 @@
 {
   "name": "md-data-table",
-  "version": "1.6.9",
+  "version": "1.6.10",
   "homepage": "https://github.com/iamisti/mdDataTable",
   "author":"Istvan Fodor <programtervezo@gmail.com>",
   "main": [

demo/developmentArea.html

@@ -13,4 +13,10 @@
             <mdt-column align-rule="right">Iron (%)</mdt-column>
         </mdt-header-row>
     </mdt-table>
-</div>
+</div>
+
+<style>
+    .md-virtual-repeat-container{
+        height:301px;
+    }
+</style>

dist/md-data-table-style.css

@@ -10,7 +10,6 @@
   /* border separation color */
   /* INTERACTION */
   /* default icon color */
-  /* virtual repeat needed classes */
 }
 .mdtTable table {
   width: 100%;
@@ -77,7 +76,7 @@
   -webkit-transform: rotate(-90deg);
   transform: rotate(-90deg);
 }
-.mdtTable thead tr.animate-sort-icon .sortedColumn ng-md-icon svg {
+.mdtTable tr.animate-sort-icon .sortedColumn ng-md-icon svg {
   -webkit-transition: 0.3s linear all;
   transition: 0.3s linear all;
 }
@@ -159,13 +158,6 @@
 .mdtTable .md-inactive ng-md-icon {
   fill: rgba(0, 0, 0, 0.26);
 }
-.mdtTable .virtualRepeatEnabled .originalHeader tr th {
-  height: 0px !important;
-  line-height: 0px !important;
-  margin: 0px !important;
-  overflow: hidden !important;
-  border: none !important;
-}
-.mdtTable .virtualRepeatEnabled .originalHeader md-checkbox {
-  display: none;
+.mdtTable .md-virtual-repeat-scroller {
+  top: 57px;
 }