Ensure that boolean checkboxes cycle values in the correct order. Fixes #2448

This commit is contained in:
Surinder Kumar 2017-06-06 11:29:18 +01:00 committed by Dave Page
parent bf06d82870
commit b82e001478

View File

@ -481,7 +481,7 @@
/* Override CheckboxEditor to implement checkbox with three states. /* Override CheckboxEditor to implement checkbox with three states.
* 1) checked=true * 1) checked=true
* 2) unchecked=false * 2) unchecked=false
* 3) indeterminate=null/'' * 3) indeterminate=null
*/ */
function CheckboxEditor(args) { function CheckboxEditor(args) {
var $select, el; var $select, el;
@ -489,32 +489,37 @@
var scope = this; var scope = this;
this.init = function () { this.init = function () {
$select = $("<INPUT type=checkbox value='true' class='editor-checkbox' hideFocus>"); $select = $("<input type=checkbox class='editor-checkbox' hideFocus>");
$select.appendTo(args.container); $select.appendTo(args.container);
$select.focus(); $select.focus();
// The following code is taken from https://css-tricks.com/indeterminate-checkboxes/ // The following code is taken from https://css-tricks.com/indeterminate-checkboxes/
$select.data('checked', 0).bind("click", function (e) { $select.bind("click", function (e) {
el = $(this); el = $(this);
switch(el.data('checked')) { el.prop('indeterminate', false);
var checkbox_status = el.data('checked');
// add new row > checkbox clicked
if (el.data('checked') == undefined) {
checkbox_status = 1;
}
switch(checkbox_status) {
// unchecked, going indeterminate // unchecked, going indeterminate
case 0: case 0:
el.data('checked', 1);
el.prop('indeterminate', true); el.prop('indeterminate', true);
el.data('checked', 2); // determines next checkbox status
break; break;
// indeterminate, going checked // indeterminate, going checked
case 1: case 1:
el.data('checked', 2);
el.prop('indeterminate', false);
el.prop('checked', true); el.prop('checked', true);
el.data('checked', 0);
break; break;
// checked, going unchecked // checked, going unchecked
default: default:
el.data('checked', 0);
el.prop('indeterminate', false);
el.prop('checked', false); el.prop('checked', false);
el.data('checked', 1);
} }
}); });
}; };
@ -529,15 +534,18 @@
this.loadValue = function (item) { this.loadValue = function (item) {
defaultValue = item[args.column.pos]; defaultValue = item[args.column.pos];
if (_.isNull(defaultValue)||_.isUndefined(defaultValue)) { if (_.isNull(defaultValue)|| _.isUndefined(defaultValue)) {
$select.prop('indeterminate', true); $select.prop('indeterminate', true);
$select.data('checked', 2);
} }
else { else {
defaultValue = !!item[args.column.pos]; defaultValue = !!item[args.column.pos];
if (defaultValue) { if (defaultValue) {
$select.prop('checked', true); $select.prop('checked', true);
$select.data('checked', 0);
} else { } else {
$select.prop('checked', false); $select.prop('checked', false);
$select.data('checked', 1);
} }
} }
}; };
@ -554,7 +562,10 @@
}; };
this.isValueChanged = function () { this.isValueChanged = function () {
return (this.serializeValue() !== defaultValue); // var select_value = this.serializeValue();
var select_value = $select.data('checked');
return (!(select_value === 2 && (defaultValue == null || defaultValue == undefined))) &&
(select_value !== defaultValue);
}; };
this.validate = function () { this.validate = function () {
@ -783,31 +794,6 @@
$select = $("<INPUT type=checkbox value='true' class='editor-checkbox' hideFocus disabled>"); $select = $("<INPUT type=checkbox value='true' class='editor-checkbox' hideFocus disabled>");
$select.appendTo(args.container); $select.appendTo(args.container);
$select.focus(); $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 () { this.destroy = function () {
@ -819,16 +805,19 @@
}; };
this.loadValue = function (item) { this.loadValue = function (item) {
defaultValue = item[args.column.field]; defaultValue = item[args.column.pos];
if (_.isNull(defaultValue)||_.isUndefined(defaultValue)) { if (_.isNull(defaultValue)|| _.isUndefined(defaultValue)) {
$select.prop('indeterminate', true); $select.prop('indeterminate', true);
$select.data('checked', 2);
} }
else { else {
defaultValue = !!item[args.column.field]; defaultValue = !!item[args.column.pos];
if (defaultValue) { if (defaultValue) {
$select.prop('checked', true); $select.prop('checked', true);
$select.data('checked', 0);
} else { } else {
$select.prop('checked', false); $select.prop('checked', false);
$select.data('checked', 1);
} }
} }
}; };
@ -841,11 +830,14 @@
}; };
this.applyValue = function (item, state) { this.applyValue = function (item, state) {
item[args.column.field] = state; item[args.column.pos] = state;
}; };
this.isValueChanged = function () { this.isValueChanged = function () {
return (this.serializeValue() !== defaultValue); // var select_value = this.serializeValue();
var select_value = $select.data('checked');
return (!(select_value === 2 && (defaultValue == null || defaultValue == undefined))) &&
(select_value !== defaultValue);
}; };
this.validate = function () { this.validate = function () {