Added the ability to filter text columns.

jdavidheiser · Oct 11, 2014 · ddf33c0 · ddf33c0
1 parent 9241dc1
commit ddf33c0
Show file tree

Hide file tree

Showing 6 changed files with 413 additions and 111 deletions.
diff --git a/qgrid/qgridjs/lib/slick.grid.2.2.js b/qgrid/qgridjs/lib/slick.grid.2.2.js
@@ -2274,7 +2274,11 @@ if (typeof Slick === "undefined") {
         // don't steal it back - keyboard events will still bubble up
         // IE9+ seems to default DIVs to tabIndex=0 instead of -1, so check for cell clicks directly.
         if (e.target != document.activeElement || $(e.target).hasClass("slick-cell")) {
+          var selection = getTextSelection(); //store text-selection and restore it after
           setFocus();
+          if (options.enableTextSelectionOnCells) {
+            setTextSelection(selection);
+          }
         }
       }
 
@@ -2469,6 +2473,23 @@ if (typeof Slick === "undefined") {
       }
     }
 
+    //This get/set methods are used for keeping text-selection. These don't consider IE because they don't loose text-selection.
+    function getTextSelection(){
+      var selection = null;
+      if (window.getSelection && window.getSelection().rangeCount > 0) {
+        selection = window.getSelection().getRangeAt(0);
+      }
+      return selection;
+    }
+
+    function setTextSelection(selection){
+      if (window.getSelection && selection) {
+        var target = window.getSelection();
+        target.removeAllRanges();
+        target.addRange(selection);
+      }
+    }
+
     function scrollCellIntoView(row, cell, doPaging) {
       scrollRowIntoView(row, doPaging);
 

diff --git a/qgrid/qgridjs/qgrid.css b/qgrid/qgridjs/qgrid.css
@@ -122,6 +122,8 @@
 .q-grid .slick-cell {
   border-bottom: 1px solid #e1e8ed !important;
   border-right: none !important;
+  border-top: 1px solid transparent;
+  border-left: 1px solid transparent;
   font-size: 14px;
   font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
   padding-top: 3px;
@@ -135,6 +137,10 @@
   padding-left: 6px;
 }
 
+.q-grid .slick-cell.selected {
+  background-color: #deeaf7;
+}
+
 /* Filter button */
 
 .q-grid .slick-header-column.active .filter-button, .filter-button:hover {
@@ -266,6 +272,74 @@
   top: 4px;
 }
 
+.text-filter-grid * {
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+}
+
+.text-filter .slick-viewport {
+  overflow: auto !important;
+}
+
+.text-filter .input-area {
+  padding: 12px;
+}
+
+.text-filter .search-input {
+  height: 30px;
+  width: 100%;
+  margin-bottom: 0px;
+  box-sizing: border-box;
+}
+
+.text-filter .text-filter-grid {
+  width: 300px;
+  height: 250px;
+  box-sizing: border-box;
+}
+
+.text-filter .slick-header {
+  border: none;
+}
+
+.text-filter .slick-header-columns {
+  height: 0px;
+}
+
+.text-filter .slick-cell {
+  line-height: 30px;
+  border-left: none;
+  border-right: none;
+  background-color: #ffffff !important;
+  border-bottom: 1px solid #e1e8ed !important;
+  padding: 0;
+  text-align: left;
+  cursor: pointer;
+}
+
+.text-filter .slick-row.odd .slick-cell {
+  background: #fafafa !important;
+}
+
+.text-filter .slick-row.active .slick-cell {
+  background-color: #deeaf7 !important;
+  border-top: 1px solid transparent !important;
+}
+
+.text-filter .check-box-cell {
+  text-align: center;
+  line-height: 28px;
+}
+
+.text-filter .check-box-cell input {
+  margin: 0;
+}
+
+/*.text-filter .slick-row:hover .slick-cell {
+  background-color: transparent;
+}*/
+
 /* from custom-bootstrap *****************/
 
 .q-grid-container input.datepicker {

diff --git a/qgrid/qgridjs/qgrid.filterbase.js b/qgrid/qgridjs/qgrid.filterbase.js
@@ -108,11 +108,13 @@ define([
       this.disabled_tooltip_showing = false;
     }
   }
-//
-//  handle_body_key_up: (e) =>
-//    if e.keyCode == 27 # esc key
-//      this.hide_filter()
-//
+
+  FilterBase.prototype.handle_body_key_up = function(e){
+    if (e.keyCode == 27){ // esc key
+      this.hide_filter();
+    }
+  }
+
   FilterBase.prototype.handle_body_mouse_down = function (e){
     if (this.filter_elem[0] != e.target &&
       !$.contains(this.filter_elem[0], e.target) &&

diff --git a/qgrid/qgridjs/qgrid.js b/qgrid/qgridjs/qgrid.js
@@ -3,8 +3,9 @@ define([
     "underscore",
     'moment',
     'date_filter',
-    'slider_filter'
-], function ($, _, moment, date_filter, slider_filter) {
+    'slider_filter',
+    'text_filter'
+], function ($, _, moment, date_filter, slider_filter, text_filter) {
   "use strict";
 
   var dependencies_loaded = false;
@@ -23,7 +24,7 @@ define([
     this.sort_ascending = true;
 
     this.python_types = {
-      Character: "string",
+      Character: "text",
       Float: "number",
       Complex: "number",
       Datetime: "date",
@@ -38,7 +39,7 @@ define([
         var cur_column = column_types[i];
 
         if (!cur_column.type){
-          cur_column.type = "string";
+          cur_column.type = "text";
         }else{
           cur_column.type = this.python_types[cur_column.type];
         }
@@ -99,7 +100,8 @@ define([
       syncColumnCellResize: true,
       forceFitColumns: true,
       rowHeight: 28,
-      enableColumnReorder: false
+      enableColumnReorder: false,
+      enableTextSelectionOnCells: true
     };
 
     var max_height = options.rowHeight * 15;
@@ -118,6 +120,7 @@ define([
     }
 
     this.slick_grid = new Slick.Grid(this.grid_elem_selector, this.data_view, this.columns, options);
+    this.slick_grid.setSelectionModel(new Slick.RowSelectionModel())
     this.update_sort_indicators();
     this.slick_grid.render();
 
@@ -252,15 +255,15 @@ define([
     return new slider_filter.SliderFilter(field);
   }
 
+  QGrid.prototype.create_text_filter = function(field){
+    return new text_filter.TextFilter(field);
+  }
+
 //
 //  QGrid.prototype.create_ticker_filter = function(field){
 //    return new quanto.SecurityFilter(@$tab_elem, field);
 //  }
 //
-//  QGrid.prototype.create_text_filter = function(field){
-//    return new quanto.TextFilter(@$tab_elem, field);
-//  }
-
 //  QGrid.prototype.format_money = function(row, cell, value, columnDef, dataContext){
 //    if (!value.value)
 //      return "<span class='number no-value'>- -</span>";