Improved multi selection

Author: rstaib

CHANGELOG.md

@@ -4,7 +4,7 @@
 
 ### Enhancements & Features
 - (Done) New option to switch the search behaviour from case sensitive to case insensitive.
-- Individual column filters
+- Individual basic column filters
 - (Done) Custom CSS classes for header and body cells (solved issue [#7](http://github.com/rstaib/jquery-bootgrid/issues/7))
 - (Done) New data attribute `data-toggle` to initialize bootgrid without writing any line of code (like bootstrap controls support)
 - (Done) Request and response handler to support JSON object transformation (solved issue [#3](http://github.com/rstaib/jquery-bootgrid/issues/3))
@@ -22,6 +22,9 @@
 - (Done) Fixed an AJAX issue where multiple fast clicks could lead to strange results
 - (Done) Fixed multi select issue
 
+### Breaking Changes
+There are breaking changes but some HTML templates changed during development. In case you want to use the full new feature set be sure you did not override any affected templates.
+
 ## 1.0.0
 
 ### Enhancements & Features

build/jQuery.Bootgrid.1.1.0-beta.nupkg

@@ -2,6 +2,10 @@
 .bootgrid-footer {
   margin: 15px 0;
 }
+.bootgrid-header a,
+.bootgrid-footer a {
+  outline: 0;
+}
 .bootgrid-header .search,
 .bootgrid-footer .search {
   display: inline-block;
@@ -61,6 +65,9 @@
 .bootgrid-table {
   table-layout: fixed;
 }
+.bootgrid-table a {
+  outline: 0;
+}
 .bootgrid-table th > .column-header-anchor {
   color: #333;
   cursor: not-allowed;
@@ -86,6 +93,10 @@
   right: 0;
   top: 2px;
 }
+.bootgrid-table th:hover,
+.bootgrid-table th:active {
+  background: #fafafa;
+}
 .bootgrid-table td {
   overflow: hidden;
   -ms-text-overflow: ellipsis;
@@ -106,6 +117,7 @@
 .bootgrid-table th.select-cell .select-box,
 .bootgrid-table td.select-cell .select-box {
   margin: 0;
+  outline: 0;
 }
 .table-responsive .bootgrid-table {
   table-layout: inherit !important;

build/jquery.bootgrid-1.1.0-beta.zip

@@ -115,6 +115,7 @@
                     headerCssClass: data.headerCssClass || "",
                     formatter: that.options.formatters[data.formatter] || null,
                     order: (!sorted && (data.order === "asc" || data.order === "desc")) ? data.order : null,
+                    filterable: (data.filterable === true), // default: false
                     searchable: !(data.searchable === false), // default: true
                     sortable: !(data.sortable === false), // default: true
                     visible: !(data.visible === false) // default: true
@@ -1084,6 +1085,14 @@
          **/
         responseHandler: function (response) { return response; },
 
+        /**
+         * A list of converters.
+         *
+         * @property converters
+         * @type Object
+         * @for defaults
+         * @since 1.0.0
+         **/
         converters: {
             numeric: {
                 from: function (value) { return +value; }, // converts from string to numeric
@@ -1411,13 +1420,15 @@
 
             if (selectedRows.length > 0)
             {
-                var selectBoxSelector = getCssSelector(this.options.css.selectBox);
+                var selectBoxSelector = getCssSelector(this.options.css.selectBox),
+                    selectMultiSelectBox = this.selectedRows.length >= this.currentRows.length;
 
-                // todo: the "if" statement must be refactored for maintain selection feature
-                if (this.selectedRows.length === this.currentRows.length)
+                i = 0;
+                while (!this.options.keepSelection && selectMultiSelectBox && i < this.currentRows.length)
                 {
-                    this.element.find("thead " + selectBoxSelector).prop("checked", true);
+                    selectMultiSelectBox = ($.inArray(this.currentRows[i++][this.identifier], this.selectedRows) !== -1);
                 }
+                this.element.find("thead " + selectBoxSelector).prop("checked", selectMultiSelectBox);
 
                 if (!this.options.multiSelect)
                 {

build/jquery.bootgrid.css

@@ -52,13 +52,13 @@
                     <button id="removeSelected" type="button" class="btn btn-default">Remove Selected</button>
                     <button id="destroy" type="button" class="btn btn-default">Destroy</button>
                     <button id="init" type="button" class="btn btn-default">Init</button>
-                    <div class="table-responsive">
+                    <!--div class="table-responsive"-->
                         <table id="grid" class="table table-condensed table-hover table-striped" data-selection="true" data-multi-select="true" data-row-select="true" data-keep-selection="true">
                             <thead>
                                 <tr>
                                     <th data-column-id="id" data-identifier="true" data-type="numeric" data-align="right">ID</th>
                                     <th data-column-id="sender" data-order="asc" data-align="center" data-header-align="center">Sender</th>
-                                    <th data-column-id="received" data-css-class="cell" data-header-css-class="column">Received</th>
+                                    <th data-column-id="received" data-css-class="cell" data-header-css-class="column" data-filterable="true">Received</th>
                                     <th data-column-id="link" data-formatter="link" data-sortable="false">Link</th>
                                 </tr>
                             </thead>
@@ -131,7 +131,7 @@
                                 </tr>
                             </tbody>
                         </table>
-                    </div>
+                    <!--/div-->
                 </div>
             </div>
         </div>

build/jquery.bootgrid.js

@@ -105,6 +105,7 @@ function loadColumns()
                 headerCssClass: data.headerCssClass || "",
                 formatter: that.options.formatters[data.formatter] || null,
                 order: (!sorted && (data.order === "asc" || data.order === "desc")) ? data.order : null,
+                filterable: (data.filterable === true), // default: false
                 searchable: !(data.searchable === false), // default: true
                 sortable: !(data.sortable === false), // default: true
                 visible: !(data.visible === false) // default: true

build/jquery.bootgrid.min.js

@@ -27,6 +27,8 @@
 {
     margin: 15px 0;
 
+    a { outline: 0; }
+
     .search
     {
         display: inline-block;
@@ -91,6 +93,8 @@
 {
     table-layout: fixed;
 
+    a { outline: 0; }
+
     th
     {
         & > .column-header-anchor
@@ -118,6 +122,8 @@
                 top: 2px;
             }
         }
+
+        &:hover, &:active { background: #fafafa; }
     }
 
     td
@@ -136,7 +142,7 @@
         text-align: center;
         width: 30px;
 
-        .select-box { margin: 0; }
+        .select-box { margin: 0; outline: 0; }
     }
 }
 

demo/index.htm

@@ -169,6 +169,14 @@ Grid.defaults = {
      **/
     responseHandler: function (response) { return response; },
 
+    /**
+     * A list of converters.
+     *
+     * @property converters
+     * @type Object
+     * @for defaults
+     * @since 1.0.0
+     **/
     converters: {
         numeric: {
             from: function (value) { return +value; }, // converts from string to numeric
@@ -496,13 +504,15 @@ Grid.prototype.select = function(rowIds)
 
         if (selectedRows.length > 0)
         {
-            var selectBoxSelector = getCssSelector(this.options.css.selectBox);
+            var selectBoxSelector = getCssSelector(this.options.css.selectBox),
+                selectMultiSelectBox = this.selectedRows.length >= this.currentRows.length;
 
-            // todo: the "if" statement must be refactored for maintain selection feature
-            if (this.selectedRows.length === this.currentRows.length)
+            i = 0;
+            while (!this.options.keepSelection && selectMultiSelectBox && i < this.currentRows.length)
             {
-                this.element.find("thead " + selectBoxSelector).prop("checked", true);
+                selectMultiSelectBox = ($.inArray(this.currentRows[i++][this.identifier], this.selectedRows) !== -1);
             }
+            this.element.find("thead " + selectBoxSelector).prop("checked", selectMultiSelectBox);
 
             if (!this.options.multiSelect)
             {