filter example added

abc91199 · Aug 18, 2015 · 925af1e · 925af1e
1 parent 980f18f
commit 925af1e
Show file tree

Hide file tree

Showing 4 changed files with 58 additions and 39 deletions.
diff --git a/examples/bclys/fin-hypergrid.min.html b/examples/bclys/fin-hypergrid.min.html
diff --git a/examples/bclys/index.html b/examples/bclys/index.html
@@ -73,13 +73,28 @@
         //sort ascending on the first column (first name)
         //jsonModel.toggleSort(0);
 
+
+        var onFilterImage = jsonModel.getImage('filter-on');
+        var offFilterImage = jsonModel.getImage('filter-off');
         //all formatting and rendering per cell can be overridden in here
         cellProvider.getCell = function(config) {
             var renderer = cellProvider.cellCache.simpleCellRenderer;
-            config.halign = 'left';
             var x = config.x;
             var y = config.y;
-
+            var image = offFilterImage;
+            if (y < 3 || x === -1) {
+                if (y === 1) {
+                    if (x === -1) {
+                        return renderer;
+                    }
+                    if (config.value !== '') {
+                        image = onFilterImage;
+                    }
+                    config.value = [null, config.value, image]
+                }
+                return renderer;
+            }
+            config.halign = 'left';
             if ((y % 3) === 0){
                 config.backgroundColor = '#E87200';
                 config.font = 'italic 15px Arial';
@@ -201,20 +216,6 @@
             readOnly: false
         });
 
-        jsonGrid.addFinEventListener('fin-request-cell-edit', function(e) {
-            console.log('fin-request-cell-edit', e);
-            //e.preventDefault(); //uncomment to cancel editor popping up
-        });
-
-        jsonGrid.addFinEventListener('fin-before-cell-edit', function(e) {
-            console.log('fin-before-cell-edit', e);
-            //e.preventDefault(); //uncomment to cancel editor popping up
-        });
-
-        jsonGrid.addFinEventListener('fin-after-cell-edit', function(e) {
-            console.log('fin-after-cell-edit', e);
-        });
-
         jsonGrid.addFinEventListener('fin-cell-enter', function(e) {
             var cell = e.detail.gridCell;
             console.log('fin-cell-enter', cell.x, cell.y);
@@ -252,36 +253,53 @@
             console.log('fin-column-selection-changed', e.detail);
         });
 
+        var filterFunction = function(value) {
+            return function(each) {
+                return (each + '').toLowerCase().startsWith(value.toLowerCase());
+            };
+        ;}
+
+        var buildFilters = function() {
+            var filters = {};
+            for (var i = 0; i < totals[0].length; i++) {
+                filters[i] = filterFunction(totals[0][i]);
+            }
+            jsonModel.getData().setFilters(filters);
+            jsonModel.shapeChanged();
+        };
+
         jsonGrid.addFinEventListener('fin-editor-data-change', function(e) {
             console.log('fin-editor-data-change', e.detail);
-            if (e.detail.input.editorPoint.y > 2) {
+
+        });
+
+        jsonGrid.addFinEventListener('fin-request-cell-edit', function(e) {
+            console.log('fin-request-cell-edit', e);
+            //e.preventDefault(); //uncomment to cancel editor popping up
+        });
+
+        jsonGrid.addFinEventListener('fin-before-cell-edit', function(e) {
+            console.log('fin-before-cell-edit', e);
+            //e.preventDefault(); //uncomment to cancel editor popping up
+        });
+
+        jsonGrid.addFinEventListener('fin-after-cell-edit', function(e) {
+            console.log('fin-after-cell-edit', e);
+            if (e.detail.gridCell.y > 2) {
                 return;
             }
             var control = e.detail.input;
-            var col = control.modelPoint.x;
-            var value = control.input.value;
-            console.log(control, col, value);
-            var filters = {};
-            filters[col] = function(each) {
-                return (each + '').toLowerCase().startsWith(value.toLowerCase());
-            };
-            jsonModel.getData().setFilters(filters);
-            jsonModel.shapeChanged();
+            buildFilters();
             control._moveEditor(); //view may have resized....
         });
 
         jsonGrid.addFinEventListener('fin-editor-key-up', function(e) {
             console.log('fin-editor-key-up', e.detail);
+            if (e.detail.input.editorPoint.y > 2) {
+                return;
+            }
             var control = e.detail.input;
-            var col = control.modelPoint.x;
-            var value = control.input.value;
-            console.log(control, col, value);
-            var filters = {};
-            filters[col] = function(each) {
-                return (each + '').toLowerCase().startsWith(value.toLowerCase());
-            };
-            jsonModel.getData().setFilters(filters);
-            jsonModel.shapeChanged();
+            buildFilters();
             control._moveEditor(); //view may have resized....
         });
 
@@ -321,6 +339,7 @@
             console.log('visible rows = ' + jsonGrid.getVisibleRows());
             console.log('visible columns = ' + jsonGrid.getVisibleColumns());
 
+
             setTimeout(function() {
 
                 jsonModel.setFields(fields);
@@ -415,7 +434,7 @@
                             }
                         },
                         columnHeaderBackgroundColor: '#142B6F', //dark blue
-                        columnHeaderColor: 'white'
+                        columnHeaderColor: 'grey'
                     });
 
                 console.log(jsonModel.getHeaders());

diff --git a/images/filter_off.png b/images/filter_off.png
diff --git a/images/filter_on.png b/images/filter_on.png