added features to json behavior

abc91199 · Apr 24, 2015 · 9dc0ec3 · 9dc0ec3
1 parent 9f149b7
commit 9dc0ec3
Show file tree

Hide file tree

Showing 42 changed files with 210 additions and 42 deletions.
diff --git a/README.md b/README.md
@@ -155,6 +155,16 @@ cellProvider.getCell = function(config) {
     var renderer = cellProvider.cellCache.simpleCellRenderer;
     config.halign = 'left';
     var x = config.x;
+
+    //setting properties for an entire row, just use modulo operator
+    if (y % 3 === 0) {
+        //change the background color to green on every 3rd row
+        config.bgColor = '#00ff00';
+    } else if ((y - 1) % 3 === 0) {
+        //change the background color to blue and foreground to white just below every 3rd row
+        config.bgColor = '#0000ff';
+        config.fgColor = '#ffffff';
+    }
     if (x === 0) {
         renderer = cellProvider.cellCache.linkCellRenderer;
     } else if (x === 2) {
@@ -361,6 +371,8 @@ fin-grid-rendered|this is fired after a repaint occurs
 
 # JSON behavior
 
+By far the most common behavior to use will be the JSON behavior.  If you're not sure which one to start with, select this one.
+
 ## Populating a JSON behavior with data
 
 To populate the json behavior with data simply provide hypergrid with an array of same shaped objects.   
@@ -417,6 +429,22 @@ There are several ways to specify fields and headers with hypergrid.
     ]);
 ```
 
+# JSON behavior totals rows
+
+adding totals rows just under the column headers is a simple.  Call setTotals function on the JSON behavior an array of arrays of the content you want displayed.
+
+```
+    var totals =
+        [['','1st',251,'XXXX-XX-XX','1 of 50','1 of 50','T/F','$$$$$','£££££']];
+
+    myJSONBehavior.setTotals(totals);
+
+    //update the totals and see the change
+    totals[0][2] = 300;
+    myJSONBehavior.changed();
+
+```
+
 ## JSON behavior table state
 Hypergrid allows you to snapshot the user configured state and then reapply it later(memento pattern) this includes.
 * column order

diff --git a/demo.html b/demo.html
@@ -468,6 +468,15 @@ <h3>fin-hypergrid-behavior-gol</h3> This element is another custom Polymer web c
 
             //make the first col fixed;
             jsonModel.setFixedColumnCount(1);
+            jsonModel.setFixedRowCount(2);
+
+
+            //lets set 2 rows of totals
+            var totals =
+                [['','1st',251,'XXXX-XX-XX','1 of 50','1 of 50','T/F','$$$$$','£££££']];
+
+            jsonModel.setTotals(totals);
+
 
             //sort ascending on the first column (first name)
             //jsonModel.toggleSort(0);
@@ -477,7 +486,16 @@ <h3>fin-hypergrid-behavior-gol</h3> This element is another custom Polymer web c
                 var renderer = cellProvider.cellCache.simpleCellRenderer;
                 config.halign = 'left';
                 var x = config.x;
-                if (x === 0) {
+                var y = config.y;
+
+                if ((y % 3) === 0 && x < 7){
+                    config.bgColor = '#00ff00';
+                    config.font = 'italic 15px Arial';
+                } else if (((y - 1) % 3) === 0 && x < 7){
+                    config.bgColor = '#0000ff';
+                    config.fgColor = '#ffffff';
+                }
+                if (x === 1) {
                     renderer = cellProvider.cellCache.linkCellRenderer;
                 } else if (x === 2) {
                     config.halign = 'center';
@@ -540,6 +558,7 @@ <h3>fin-hypergrid-behavior-gol</h3> This element is another custom Polymer web c
             jsonGrid.addFinEventListener('fin-scroll-y', function(e){
                 console.log('fin-scroll-y', e.detail.value);
             });
+
             // lets setup a cell update
             // var g = document.querySelector('#json-example');
             // var model = g.getBehavior();row = model.data[0];