BooleanCell selection change on click when not in edit mode

[JoshClose]

Is there a way to have the boolean cell when not in edit mode change the selection when clicking the checkbox? Right now I have to click it twice. Once to enable editing, and once to change the selection. I would like to be able to just click it if it's editable.

[wyuenho]

This was done to be consistent with all the other cell types. BooleanCell is really an odd ball because it really shouldn't have a difference between edit mode and display mode. This used to be the old behavior. There are actually many reasons why it is the way it is now, it has to do with keyboard nav and cross-browser issues. I'll see what I can do, but no promises of a quick fix tho.

[JoshClose]

Thanks. This one is actually a big deal for my project.

[JoshClose]

I was able to do this fairly easily. By just changing the model when the input was clicked.

var BooleanCell = Backgrid.BooleanCell = Cell.extend({

  /** @property */
  className: "boolean-cell",

  /** @property */
  editor: BooleanCellEditor,

  /** @property */
  events: {
      "click": "enterEditMode",
      "click input": "inputClick"
  },

  /**
     Renders a checkbox and check it if the model value of this column is true,
     uncheck otherwise.
  */
  render: function () {
    this.$el.empty();
    this.$el.append($("<input>", {
      tabIndex: -1,
      type: "checkbox",
      checked: this.formatter.fromRaw(this.model.get(this.column.get("name")))
    }));
    this.delegateEvents();
    return this;
  },

  inputClick: function (event) {
      var attributes = {};
      attributes[this.column.get("name")] = $(event.target).prop("checked");
      this.model.set(attributes);
  }

});

[ptheofan]

+1

would be nice to add an option for booleanCell to allow toggling on single click

[bengladwell]

@JoshClose - In my case, it wasn't really necessary to change the BooleanCell code. I just extended it in the column definition:

[
...
  {
    name: <column name>,
    cell: Backgrid.BooleanCell.extend({
      events: {
        'change input': function (e) {
          this.model.set(this.column.get('name'), e.target.checked);
        }
      }
    })
  }
]

In this case, I'm just disregarding edit mode.

[jkrehm]

@bengladwell That works great for me, too. It doesn't allow for editable = false, but I think that could be added without much difficulty.

[tnat1031]

@bengladwell thanks, very helpful!

[RokGrdina]

@bengladwell Thank you, this was helpful

[amanpatel]

@bengladwell Thanks for the solution. Very clean.