Inconsistent data with SlickGrid checkbox formatter/editor

Question

I was looking at the SlickGrid'seditors/formatters features to see how these would modify the data object used to build the grid (because as far as I understand, modifications made to the table are automatically replicated to the data object).

I was looking at a particular example which shows how booleans can be edited and formatted as checkboxes (instead of dealing with a true or false string) and noticed that the values replicated to the data object were inconsistent.

To see what I mean, edit the effortDriven column for the first 4 rows as follows:
-Task 0: don't touch
-Task 1: check
-Task 2: don't touch
-Task 3: check and uncheck

Now in your firebug console, alert the data object:

Here are the values you will get for the effortDriven field:
-Task 0: true
-Task 1: checked
-Task 2: false
-Task 3: (void 0)

As you can see, for a field that's initially supposed to be a boolean, we end up with 4 different values. As a general comment, I thought the logic with formatters/editors was only to check the visualization, but preserve integrity of the data object: I would therefore strongly recommend people using SlickGrid to double-check how their data object is being updated when using formatters/editors, and don't assume data integrity is preserved).

How can I make sure my data object retains 2 boolean values while still using a checkbox on the UI?

Answer 1

Edit the CheckboxEditor function in slick.editors.js as follows:

this.applyValue = function (item, state) {
  //item[args.column.field] = state;  <-- remove that line, add lines below
  if (state == 'checked') {
      item[args.column.field] = true;
  } else {
      item[args.column.field] = false;  
  }
};

Answer 2

I found this problem as well. In the custom CheckboxEditor in slick.editors.js just change the value serializer:

function CheckboxEditor(args) {

    ...

    this.serializeValue = function () {
        return $select.attr("checked") ? true : false;
    };

    ...

}