Fix display of boolean nulls in the query tool. Fixes #2205

web/pgadmin/static/js/slickgrid/slick.pgadmin.editors.js

@@ -709,14 +709,39 @@
   }
 
   function ReadOnlyCheckboxEditor(args) {
-    var $select;
+    var $select, el;
     var defaultValue;
     var scope = this;
 
     this.init = function () {
-      $select = $("<INPUT type=checkbox value='true' class='editor-checkbox' hideFocus readonly>");
+      $select = $("<INPUT type=checkbox value='true' class='editor-checkbox' hideFocus disabled>");
       $select.appendTo(args.container);
       $select.focus();
+
+      // The following code is taken from https://css-tricks.com/indeterminate-checkboxes/
+      $select.data('checked', 0).bind("click", function (e) {
+        el = $(this);
+        switch(el.data('checked')) {
+          // unchecked, going indeterminate
+          case 0:
+            el.data('checked', 1);
+            el.prop('indeterminate', true);
+            break;
+
+          // indeterminate, going checked
+          case 1:
+            el.data('checked', 2);
+            el.prop('indeterminate', false);
+            el.prop('checked', true);
+            break;
+
+          // checked, going unchecked
+          default:
+            el.data('checked', 0);
+            el.prop('indeterminate', false);
+            el.prop('checked', false);
+        }
+      });
     };
 
     this.destroy = function () {
@@ -728,18 +753,31 @@
     };
 
     this.loadValue = function (item) {
-      defaultValue = !!item[args.column.field];
-      if (defaultValue) {
-        $select.prop('checked', true);
-      } else {
-        $select.prop('checked', false);
+      defaultValue = item[args.column.field];
+      if (_.isNull(defaultValue)) {
+        $select.prop('indeterminate', true);
+      }
+      else {
+        defaultValue = !!item[args.column.field];
+        if (defaultValue) {
+          $select.prop('checked', true);
+        } else {
+          $select.prop('checked', false);
+        }
       }
     };
 
     this.serializeValue = function () {
+      if ($select.prop('indeterminate')) {
+        return null;
+      }
       return $select.prop('checked');
     };
 
+    this.applyValue = function (item, state) {
+      item[args.column.field] = state;
+    };
+
     this.isValueChanged = function () {
       return (this.serializeValue() !== defaultValue);
     };