cloudflarearchive / backgrid

Finally, an easily stylable semantic HTML data grid widget with a Javascript API that doesn't suck.
http://backgridjs.com
MIT License
2.01k stars 325 forks source link

BooleanCellEditor initially needs to be clicked twice #557

Closed dexygen closed 8 years ago

dexygen commented 9 years ago

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.

dexygen commented 9 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'));
        }
    });
dexygen commented 9 years ago

My "solution" above does not work properly, it also toggles the previously edited checkbox, apparently on blur.

dexygen commented 9 years ago

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;
            }
        })
    });
wyuenho commented 8 years ago

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.