This walkthrough shows you how to Add RowChecker column in GroupRow. If you expand a child row and click a RowChecker, all of the expanded rows will be checked.
During this walkthrough, you will learn how to do the following :
- Add a new column and set the column to RowChecker.
- Attach an event to CheckBox.
Prerequisites
In order to complete this walkthrough, you will need the following:
- Access to the Microsoft Access Northwind database.
- Visual Studio 2005 Application.
Step-By-Step Instructions
To add RowChecker in GroupRow.
- Add RowChecker column in WebGrid.
- Invoke OnGroupColumn client side event.
JavaScript 
Copy Codefunction OnColumnGroup()
{
window.setTimeout(function() {ChangeRowCheckerBehaviour();}, 1000);
}
- Create a function called ChangeRowCheckerBehaviour().
JavaScript Copy Codefunction ChangeRowCheckerBehaviour()
{
var grid = ISGetObject("WebGrid1");
var index = grid.RootTable.GroupedColumns.length;
var headerColumns = grid.RootTable.GetElement(WG40.COLHEADERGROUP, WG40.HTMLTABLE).childNodes[0];
var headerRowCheckerColumn = headerColumns.childNodes[index + 1];
var checkboxRowChecker = headerRowCheckerColumn.childNodes[0].childNodes[0];
Listener.Unload(checkboxRowChecker);
Listener.Add(checkboxRowChecker, "onclick", function() {SelectiveCheckBoxHeaderClick(checkboxRowChecker);} );
}
- Create a function called SelectiveCheckBoxHeaderClick(el).
JavaScript Copy Codefunction SelectiveCheckBoxHeaderClick(el)
}
{
var grid = ISGetObject("WebGrid1");
var gridBody = grid.RootTable.GetElement(WG40.BODY, WG40.HTMLTABLE);
var groupIndex = -1;
var expanded = false;
for (i = 1 ; i < gridBody.childNodes.length ; i++)
{
var rowEl = gridBody.childNodes[i].childNodes[0];
if (rowEl.type == "GroupHeader")
{
if (rowEl.expanded == "True")
{
groupIndex = rowEl.groupIndex;
expanded = true;
}
else
expanded = false;
}
else if (rowEl.type == "Record")
{
if (expanded && rowEl.parentGroupIndex == groupIndex)
{
var row = wgGetRowByElement(rowEl);
if (el.checked)
row.Check();
else
row.Uncheck();
}
}
}