Closed dexygen closed 8 years ago
I extended BooleanCell as follows and it correctly toggles the checkbox state when entering edit mode, but the mystery (to me at least) is why the checkbox doesn't get toggled in the first place. Anyway hope this helps someone (or perhaps gets baked into the core?)
var MLBooleanCell = Backgrid.BooleanCell.extend({
enterEditMode: function () {
Backgrid.BooleanCell.prototype.enterEditMode.apply(this, arguments);
var checkbox = this.$('input');
checkbox.prop('checked', !checkbox.prop('checked'));
}
});
My "solution" above does not work properly, it also toggles the previously edited checkbox, apparently on blur.
Maybe this?
var BooleanCell = Backgrid.BooleanCell.extend({
editor: Backgrid.BooleanCellEditor.extend({
render: function () {
var model = this.model;
var columnName = this.column.get("name");
var val = this.formatter.fromRaw(model.get(columnName), model);
/*
* Toggle checked property since a click is what triggered enterEditMode
*/
this.$el.prop("checked", !val);
model.set(columnName, !val);
return this;
}
})
});
When you are tabbing across cells, it only makes sense to separate the focus and edit actions. This is the same for all cell types for consistencies. However you do it will only break keyboard navigation.
Whether the value is true or false (and therefore the Boolean cell is checked or unchecked), in order to initially edit a boolean cell, one must click twice to make the first edit. Its as though the first click merely enables editing (not unlike the first click in an InputCellEditor) whereas to me it seems natural that for the BooleanCellEditor, any click will toggle the state from checked to unchecked, even the first click. Thanks in advance.