Hierarchical checkbox selection with an Infragistics UltraWebGrid
Location: BlogsBrian Dukes    
Posted by: Brian Dukes 4/15/2008 10:40 AM

I was tasked yesterday with adjusting a hierarchical Infragistics WebGrid (2007.2, but I don’t expect that it’s substantially different in any other recent versions) so that when a checkbox was checked in a parent row that the children rows’ checkboxes were also checked.  This proved much more difficult than I expected, in part because I overlooked the client-side event that I needed to use.  After struggling with trying to figure out what server side or client side event would fire after a checkbox was checked, I finally found the AfterCellUpdate client side event.  There were a few other gotchas that cropped up along the way too, so I thought I’d share my final product for anyone else who might want this same behavior.

To wire up the event, you need to set the DisplayLayout.ClientSideEvents.AfterCellUpdateHandler property to the name of the JavaScript function that should handle that event (ugUnitTypes_AfterCellUpdate in my case).  If this isn’t exactly what you need, the WebGrid CSOM topic in Infragistics’ help documentation was indispensible for traversing their particular brand of JavaScript jungle.

I hope this helps you.

function ugUnitTypes_AfterCellUpdate(gridName, cellId) {
var cell = igtbl_getCellById(cellId);
if (cell && cell.Band.Index === 0 && cell.Column.ColumnType === 3) {
var parentValue = cell.getValue();
var children = cell.Row.getChildRows();
for (i = 0; i < children.length; i++) {
var childCell = igtbl_getRowById(children[i].id).getCellFromKey( 'Selected' );
childCell.setValue(parentValue);
}
}
}

 

Permalink |  Trackback

Comments (1)   Add Comment
Re: Hierarchical checkbox selection with an Infragistics UltraWebGrid    By Josh Lipford on 5/16/2008 1:56 PM
great post!<br><br>I altered to to use the following code so that the checkbox will work no matter how many levels of hierarchical data you have.<br><br>function GridCell_CheckAllChildren(cellID)<br><br>{<br><br> var cell = igtbl_getCellById(cellID)<br><br> if (cell)<br><br> { <br><br> var parentValue = cell.getValue(); <br><br> var children = cell.Row.getChildRows();<br><br> if(children && cell.Column.ColumnType === 3)<br><br> { <br><br> for (var i = 0; i < children.length; i++)<br><br> {<br><br> var row = igtbl_getRowById(children[i].id);<br><br> //JLL 05/16/08: childRows() returns more than just rows, so must do a check here that it is real row<br><br> if(row)<br><br> {<br><br> var childCell = row.getCellFromKey('SELECT')<br><br> if(childCell)<br><br> {<br><br> childCell.setValue(parentValue);<br><br> }<br><br> }<br><br> } <br><br> }<br><br> }<br><br>}


Your name:
Title:
Comment:
Add Comment   Cancel