How To Create A Dojo Data Grid With One Of Column Being A Button In Header Row?

I have a dojo(v1.6) data grid which have checkbox to select rows as left most column. I need to have header column of these checkbox as delete button instead of Select All check

Solution 1:

You can implement your own CheckBoxSelector from the existing one. I discovered the methods by looking at the _Selector.js source. The interesting methods to override were generateHtml and doclick.

See updated fiddle.

    dojo.declare('my.grid._CheckBoxSelector', [dojox.grid._CheckBoxSelector], {
    _headerBuilderClass: dojo.extend(function (view) {
        dojox.grid._HeaderBuilder.call(this, view);
    }, dojox.grid._HeaderBuilder.prototype, {
        generateHtml: function () {
            var w = this.view.contentWidth || 0;
            return'<table style="width:' + w + 'px;" ' +
                'border="0" cellspacing="0" cellpadding="0" ' +
                'role="presentation"><tr><th style="text-align: center;">' +
                '<button data-dojo-type="dijit.form.Button" type="button">x</button><div class="dojoxGridCheckSelector dijitReset dijitInline dijitCheckBox" style="display:none"></div></th></tr></table>';
        },
        doclick: function (e) {
            this.view.grid.removeSelectedRows();
            returntrue;
        }
    })
});

And

/*set up layout*/var layout = [{
        type: "my.grid._CheckBoxSelector"
    },

    ...

    }]];

To delete the rows

this.view.grid.removeSelectedRows();

You can parse the grid after startup to create the dijit widgets.

grid.startup();
// Not the best practice here but it should give you a starting point// on where to find the header node.
dojo.parser.parse(grid.views.views[0].headerContentNode);