Implementing YUI header checkbox is a three step process:
Step 1:
(Draw/Display/Render) the header checkbox with a unique Identifier along with your data table.
Example :
<script type="text/javascript">
var myPage = function()
{
return {
HeaderChanged: function()
{
var myHeaderCheckbox = document.getElementById("header_checkbox");
if (myHeaderCheckbox.checked == true)
{
myPage.CheckAll();
}
else
{
myPage.UncheckAll();
}
return true;
},
FormatCell: function(elCell, oRecord, oColumn, oData)
{
//Create checkbox
var checkboxId = 'row_' + oRecord.getData()["id"];
var checkbox = document.getElementById(checkboxId);
if (checkbox == null)
{
checkbox = document.createElement('input');
checkbox.setAttribute('type', 'checkbox');
checkbox.setAttribute('id', checkboxId);
checkbox.setAttribute('class', YAHOO.widget.DataTable.CLASS_CHECKBOX);
elCell.innerHTML = "";
elCell.appendChild(checkbox);
}
},
CheckAll : function()
{
alert("Add code to check all checkboxes");
},
UncheckAll : function()
{
alert("Add code to un-check all checkboxes");
}
//Kunal-TODO : Write function that does book keeping for XHR datasource objects.
};
} ();
YAHOO.util.Event.addListener(window, "load", function() {
YAHOO.example.Basic = function() {
var myColumnDefs = [
{ key: "checkbox", label: "
", sortable: false, resizeable: false,
formatter: myPage.FormatCell
},
{key:"id", sortable:true, resizeable:true},
{key:"date", formatter:YAHOO.widget.DataTable.formatDate, sortable:true, sortOptions:{defaultDir:YAHOO.widget.DataTable.CLASS_DESC},resizeable:true},
{key:"quantity", formatter:YAHOO.widget.DataTable.formatNumber, sortable:true, resizeable:true},
{key:"amount", formatter:YAHOO.widget.DataTable.formatCurrency, sortable:true, resizeable:true},
{key:"title", sortable:true, resizeable:true}
];
var myDataSource = new YAHOO.util.DataSource(YAHOO.example.Data.bookorders);
myDataSource.responseType = YAHOO.util.DataSource.TYPE_JSARRAY;
myDataSource.responseSchema = {
fields: ["id","date","quantity","amount","title"]
};
var myDataTable = new YAHOO.widget.DataTable("basic",
myColumnDefs, myDataSource);
return {
oDS: myDataSource,
oDT: myDataTable
};
}();
</script>
Source code page : http://kunalcholera.com/Code/checkbox.html
Step 2:
Attach an asynchronous java-script onclick event to this displayed header checkbox. Depending on type of your data source, this event would mark all the rows in your data table. If your data source is local data source, then you can manipulate the data source in client side only to check all the rows. After checking all the rows, you would have to re-render/re-draw the data table with the newly modified object. If your data source is XHR object, then you would have to call your web service to mark all the rows as checked and re-draw your data table with the updated object.
Step 3:
Having checked all the rows, you would have to update the server side with the new object with all checked/unchecked rows.
I will provide some sample working code soon.