Adding a column to a dstore backed dgrid

Question

I have a grid with five columns - username, email, enabled, locked and remove.

Username, email, enabled and locked are sourced from the server. Remove is a client-side element used to indicate that a row should be removed.

I would like to either inject the default value of remove in the store on the client side as the grid content is loading, or set it as the user interacts with the CheckBox widget.

How can I catch the code which is requesting the objects from the server and add another column?

Or, is there a better way to do this.

var TrackableRest = declare([Rest, SimpleQuery, Trackable]);
var store = new TrackableRest({target: '/api/users', useRangeHeaders: true, idProperty: 'username'});
aspect.after(store, "fetch", function (deferred) {
    return deferred.then(function (response) {
        response.remove = false;
        return json(response);
    })
});
var grid = new (declare([OnDemandGrid, Selection, Editor]))({
    collection: store,
    className: "dgrid-autoheight",
    columns: {
        username: {
            label: core.username
        },
        email: {
            label: core.email
        },
        enabled: {
            label: core.enabled,
            editor: CheckBox,
            editOn: "click",
            sortable: false,
            renderCell: libGrid.renderGridCheckbox
        },
        locked: {
            label: core.locked,
            editor: CheckBox,
            editOn: "click",
            sortable: false,
            renderCell: libGrid.renderGridCheckbox
        },
        remove: {
            editor: CheckBox,
            editorArgs: {"checked": false},
            editOn: "click",
            label: core.remove,
            sortable: false,
            className: "remove-cb",
            renderHeaderCell: function (node) {
                var inp = domConstruct.create("input", {id: "cb-all", type: "checkbox"});
                return inp;
            },
            renderCell: libGrid.renderGridCheckbox
        }
    },
    selectionMode: "none"
}, 'grid');

In addition, I don't want to send the remove column to the server.

Answer 1

My final implementation was to code the remove column like so:

            remove: {
                editor: CheckBox,
                label: core.remove,
                sortable: false,
                className: "remove-cb",
                renderHeaderCell: function (node) {
                    var inp = domConstruct.create("input", {id: "cb-all", type: "checkbox"});
                    return inp;
                }
            }

The code to perform the removes is as follows:

    var removeBtn = new Button({
        label: core.remove
    }, 'user-remove-btn');
    removeBtn.startup();
    removeBtn.on("click", function (event) {
        var markedForDeletion = query(".dgrid-row .remove-cb input:checked", "user-grid");
        if( markedForDeletion.length > 0 ) {
            lib.confirmAction(core.areyousure, function () {
                markedForDeletion.forEach(function (node) {
                    var row = grid.row(node);
                    store.remove(row.data.username);
                });
            });
        }
    });

Thus the remove column became a client-side only control that was handled by the grid and the event handler.