Core: Updates header row on refresh

tabalinas · Jun 6, 2016 · ae86a46 · ae86a46
1 parent a327bc8
commit ae86a46
Show file tree

Hide file tree

Showing 2 changed files with 59 additions and 0 deletions.
diff --git a/src/jsgrid.core.js b/src/jsgrid.core.js
@@ -119,6 +119,8 @@
         pageClass: "jsgrid-pager-page",
         currentPageClass: "jsgrid-pager-current-page",
 
+        refreshHeader: false,
+
         customLoading: false,
         pageLoading: false,
 
@@ -300,6 +302,7 @@
                 case "filtering":
                 case "inserting":
                 case "paging":
+                case "refreshHeader":
                     this.refresh();
                     break;
                 case "loadStrategy":
@@ -520,6 +523,7 @@
             this._refreshContent();
             this._refreshPager();
             this._refreshSize();
+            this._refreshHeaderRow();
 
             this._callEventHandler(this.onRefreshed);
         },
@@ -554,6 +558,33 @@
             }
         },
 
+        _refreshHeaderRow: function() {
+            if (this.refreshHeader) {
+                var $headerRow = this._headerRow;
+                this._eachField(function(field, index) {
+                    this._refreshHeaderCell($headerRow.children().eq(index), field, index);
+                });
+            }
+        },
+
+        _refreshHeaderCell: function($cell, field, index) {
+            var sortableDirClass = $cell.hasClass(this.sortAscClass) ? this.sortAscClass :
+                                    $cell.hasClass(this.sortDescClass) ? this.sortDescClass : '';
+
+            $cell.removeClass();
+
+            this._prepareCell($cell, field, "headercss");
+
+            $cell.off("click");
+            if(this.sorting && field.sorting) {
+                $cell.addClass(sortableDirClass)
+                    .addClass(this.sortableClass)
+                    .on("click", $.proxy(function() {
+                        this.sort(index);
+                    }, this));
+            }
+        },
+
         _createNoDataRow: function() {
             var noDataContent = getOrApply(this.noDataContent, this);
 

diff --git a/tests/jsgrid.tests.js b/tests/jsgrid.tests.js
@@ -975,6 +975,34 @@ $(function() {
         equal($grid.find("." + grid.evenRowClass).eq(0).children().length, 1, "even data row single cell");
     });
 
+    test("refresh updates header row", function() {
+        var $element = $("#jsGrid"),
+            gridOptions = {
+                fields: [
+                    { name: "field", align: "right", sorting: true},
+                ],
+                sorting: true
+            };
+
+        var grid = new Grid($element, gridOptions);
+
+        var $th = grid._headerRow.find("th").eq(0);
+        $th.trigger("click");
+
+
+        $element.jsGrid('option', 'fields')[0].align = 'left';
+        $element.jsGrid('option', 'refreshHeader', true);
+
+        ok(!$th.hasClass('jsgrid-align-right'), 'align right class is removed');
+        ok($th.hasClass('jsgrid-align-left'), 'align left class is attached');
+        ok($th.hasClass(grid.sortAscClass), 'sort direction class is kept');
+
+        $element.jsGrid('option', 'fields')[0].sorting = false;
+        $element.jsGrid('refresh');
+
+        ok(!$th.hasClass(grid.sortAscClass), 'sort direction class is removed');
+        ok(!$th.hasClass(grid.sortableClass), 'sortable class is removed');
+    });
 
     module("inserting");