@wavemaker/app-ng-runtime 11.4.0-next.26251 → 11.4.0-next.27501

app-ng-runtime/scripts/datatable/datatable.js

@@ -534,14 +534,13 @@ $.widget('wm.datatable', {
 
     /* Returns the tbody markup. */
     _getGridTemplate: function () {
-        var self = this, preparedData,$tbody, tbodyExists,pageStartIndex = self.getPageStartIndex(),
+        var self = this, preparedData,$tbody,pageStartIndex = self.getPageStartIndex(),
             startRowIndex = self.options.startRowIndex,
             isScrollorOnDemand = self.options.isNavTypeScrollOrOndemand();
             if(isScrollorOnDemand) {
                 $tbody = this.gridElement;
             } else {
-                tbodyExists = this.gridElement.find('tbody').length;
-                $tbody = tbodyExists > 0 ? this.gridElement.find('tbody:first') : this.gridElement.empty();
+                $tbody = this.gridElement.empty();
             }
 
         if(isScrollorOnDemand) {
@@ -1234,6 +1233,7 @@ $.widget('wm.datatable', {
                 colDef = self.preparedHeaderData[id],
                 $headerCell = self.gridContainer.find('th[data-col-id="' + id + '"]'),
                 $tdCell = self.gridElement.find('td.app-datagrid-cell[data-col-id="' + id + '"]'),
+                $footCell=self.tableContainer.find('tfoot tr.app-datagrid-row td.app-datagrid-cell[data-col-id="' + id + '"]'),
                 $headerCol = $(headerCols[id]),
                 $bodyCol = $(bodyCols[id]),
                 definedWidth,
@@ -1248,11 +1248,13 @@ $.widget('wm.datatable', {
                 $tdCell.hide();
                 $headerCol.hide();
                 $bodyCol.hide();
+                $footCell.hide();
             } else {
                 $headerCell.show();
                 $tdCell.show();
                 $headerCol.show();
                 $bodyCol.show();
+                $footCell.show();
             }
             //If default width is set, reset the width so that correct width is set on reload
             if ($headerCol.length && $headerCol[0].style.width === '90px') {
@@ -1419,6 +1421,9 @@ $.widget('wm.datatable', {
                 this.selectFirstRow(value);
                 break;
             case 'data':
+                if(!this.isResetSortIconsDone) {
+                    this.setSortIconDefault();
+                }
                 this.refreshGridData();
                 break;
             case 'dataStates':
@@ -2372,6 +2377,7 @@ $.widget('wm.datatable', {
     },
     //Method to remove sort icons from the column header cells
     resetSortIcons: function ($el) {
+        this.isResetSortIconsDone = true;
         var $sortContainer;
         //If sort icon is not passed, find out the sort icon from the active class
         if (!$el && this.gridHeaderElement) {
@@ -2381,9 +2387,25 @@ $.widget('wm.datatable', {
         }
         $el.removeClass('desc asc').removeClass(this.options.cssClassNames.descIcon).removeClass(this.options.cssClassNames.ascIcon);
     },
+    setSortIconDefault: function() {
+        const sortInfo = this.options.sortInfo,
+            $e = this.tableContainer,
+            $th = $e.find("[data-col-field='" + sortInfo.field + "']"),
+            $sortContainer = $th.find('.sort-buttons-container'),
+            $sortIcon = $sortContainer.find('i.sort-icon'),
+            direction = sortInfo.direction;
+        if (direction === 'asc') {
+            $sortIcon.addClass(direction + ' ' + this.options.cssClassNames.ascIcon);
+            $sortContainer.addClass('active');
+        } else if (direction === 'desc'){
+            $sortIcon.addClass(direction + ' ' + this.options.cssClassNames.descIcon);
+            $sortContainer.addClass('active');
+        }
+
+    },
     /* Handles table sorting. */
     sortHandler: function (e) {
-        e.stopImmediatePropagation();
+          e.stopImmediatePropagation();
         // If header span is clicked and column selection is enabled, call header click
         if ($(e.target).hasClass('header-data') && this.options.enableColumnSelection) {
             this.headerClickHandler(e);
@@ -2393,7 +2415,7 @@ $.widget('wm.datatable', {
             id = $th.attr('data-col-id'),
             $sortContainer = $th.find('.sort-buttons-container'),
             $sortIcon = $sortContainer.find('i.sort-icon'),
-            direction = $sortIcon.hasClass('asc') ? 'desc' : $sortIcon.hasClass('desc') ? '' : 'asc',
+            direction = $sortIcon.hasClass('asc') ? 'desc' : 'asc',
             sortInfo = this.options.sortInfo,
             $previousSortMarker = this.gridHeaderElement.find('.sort-buttons-container.active'),
             field = $th.attr('data-col-field'),
@@ -2996,6 +3018,9 @@ $.widget('wm.datatable', {
                 }
             });
         }
+        if(!this.isResetSortIconsDone) {
+            this.setSortIconDefault();
+        }
     },
     addOrRemoveScroll: function () {
         var gridContent = this.gridContainer.find('tbody'),
@@ -3126,7 +3151,7 @@ $.widget('wm.datatable', {
                 '<div class="app-grid-header">' +
                 '<div class="app-grid-header-inner">' +
                 '<table tabindex="0" class="' + this.options.cssClassNames.gridDefault + ' ' + this.options.cssClassNames.grid + '">' +
-                '<thead tabindex="0" class="table-header" id="table_header_' + this.tableId + '">' +
+                '<thead tabindex="0" class="table-header thead-sticky" id="table_header_' + this.tableId + '">' +
                 '</thead><tbody class="app-grid-content app-datagrid-body"  id="table_' + this.tableId + '">' +
                 '</tbody></table>' +
                 '</div></div></div>',
@@ -3283,12 +3308,6 @@ $.widget('wm.datatable', {
         }
         this.options[key] = value;
         if (key === 'height') {
-            if(this.options.showHeader) {
-                // this._setStyles(this.gridHeaderElement, 'z-index: 1; position: sticky; top:0px;');
-                $thead = this.gridHeaderElement;
-                $thead.addClass("thead-sticky");
-            }
-
             //  if(this.dataStatus.state != 'loading') {
             var elements = this.gridHeaderElement.find('th');
             // this._setStyles(this.tableContainer, 'border-collapse: separate;');