How to create a dojo data grid with one of column being a button in header row?

Question

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 checkbox. On clicking the delete button all selected rows gets deleted.

Please find the Data grid Demo.

I don’t know how to bring the header column of checkbox as button. Please help me to customize the widget. Here is grid js code

dojo.ready(function(){
    /*set up data store*/
    var data = {
      identifier: 'id',
      items: []
    };
    var data_list = [
      { col1: "normal", col2: false, col3: 'But are not followed by two hexadecimal', col4: 29.91},
      { col1: "important", col2: false, col3: 'Because a % sign always indicates', col4: 9.33},
      { col1: "important", col2: false, col3: 'Signs can be selectively', col4: 19.34}
    ];
    var rows = 10;
    for(var i=0, l=data_list.length; i<rows; i++){
      data.items.push(dojo.mixin({ id: i+1 }, data_list[i%l]));
    }
    var store = new dojo.data.ItemFileWriteStore({data: data});

    /*set up layout*/
    var layout = [
        { type: "dojox.grid._CheckBoxSelector" },
        [
          {'name': 'Column 1', 'field': 'id', 'width': '20%'},
          {'name': 'Column 2', 'field': 'col2', 'width': '20%'},
          {'name': 'Column 3', 'field': 'col3', 'width': '25%'},
          {'name': 'Column 4', 'field': 'col4', 'width': '20%'}
        ]
    ];
    /*create a new grid:*/
    var grid = new dojox.grid.DataGrid({
        id: 'grid',
        store: store,
        structure: layout,
        cellOverClass: 'cellover'
      },
      document.createElement('div')
    );
    /*append the new grid to the div*/
    dojo.byId("gridDiv").appendChild(grid.domNode);
    /*Call startup() to render the grid*/
    grid.startup();
});

HTML

<div id="gridDiv"></div>

Answer 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();
            return true;
        }
    })
});

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);