As an alternative to what Petar provided earlier in this thread, you can accomplish this without using a template by putting a html input in the Header Text:

<ig:BoundCheckBoxField DataFieldName="OnSite" Key="OnSite">
    <Header Text="On Site <input type='checkbox' onchange='headerCheckedChangedHandler(this);'"></Header>
</ig:BoundCheckBoxField>

Note that I also modified the onchange handler so that it can be used for multiple columns in the same grid:

function headerCheckedChangedHandler(checkbox) {
    var grid = $find("WebDataGrid1");
    var checkBoxState = checkbox.checked;
    var columnKey = checkbox.parentElement.getAttribute("key");
    var rows = grid.get_rows();
    // iterate through the rows and set the checkBox states and cell values
    for (i = 0; i < rows.get_length() ; i++) {
        var cell = rows.get_row(i).get_cellByColumnKey(columnKey);
        cell._setCheckState(checkBoxState);
        cell.set_value(checkBoxState);
    }
}

Hi,

I am also getting same problem in IE8 and Chrome. IE9 above give script working fine. Please tell me any suggestion for working in IE8 and Chrome.

Hi Sameem

Try to use onClick event

onClick="BLOCKED SCRIPTcheckedChangedHandler()"

Hi,
Some how the onchange="checkedChangedHandler();" event is not firing for me?

Can you help?

Thanks
Sameem