Hierarchical checkbox selection with an Infragistics UltraWebGrid

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

[Cross-posted from http://www.engagesoftware.com/Blog/EntryID/141.aspx]

7 Comments

  • great post!

    I altered to to use the following code so that the checkbox will work no matter how many levels of hierarchical data you have.

    function GridCell_CheckAllChildren(cellID)
    {
    var cell = igtbl_getCellById(cellID)

    if (cell)
    {
    var parentValue = cell.getValue();
    var children = cell.Row.getChildRows();

    if(children && cell.Column.ColumnType === 3)
    {
    for (var i = 0; i < children.length; i++)
    {
    var row = igtbl_getRowById(children[i].id);

    //JLL 05/16/08: childRows() returns more than just rows, so must do a check here that it is real row
    if(row)
    {
    var childCell = row.getCellFromKey('SELECT')

    if(childCell)
    {
    childCell.setValue(parentValue);
    }
    }

    }
    }

    }
    }

  • Good article.

    I have a problem for this requirement. AfterCellUpdate event handler is NOT called for templated column. I have a check box as TemplatedColumn in the Grid at multiple levels. Could you please tell me which event handler should be used for checking children rows’ checkboxes if parent row is checked.

    If possible, provide me the sample code as what you have implemented.

  • Rao, unfortunately I'm not really an expert on Infragistics, this just happened to be what worked for my situation. I'd suggest trying their forums for a better answer (http://news.infragistics.com/forums/p/6399/27314.aspx#27314).

    I would probably start trying to wire-up a click event handler to the parent checkbox on the grid's initialize event, and then follow the basic logic of the code above to find the children checkboxes.

    Hope that helps,

  • Thank duke.

    I got a soluation after spending more than one day on this. Might be useful for others.

    Solution is:

    Wire up click event handler for all checkboxe's on the grid's initialize event (Added checkbox in Templatedcolumn at different levels). Name of the checkbox is same at each level i.e."chkLevel".

    protected void UltraWebGrid1_InitializeRow(object sender, RowEventArgs e)
    {
    Infragistics.WebUI.UltraWebGrid.TemplatedColumn col = (Infragistics.WebUI.UltraWebGrid.TemplatedColumn)e.Row.Cells[0].Column;
    Infragistics.WebUI.UltraWebGrid.CellItem item = (CellItem)col.CellItems[e.Row.BandIndex];
    CheckBox chkLevel = (CheckBox)(item.FindControl("chkLevel"));
    if (chkLevel != null)
    {
    chkLevel.Attributes.Add("OnClick", "javascript:ugInspectionScope_CheckAllChildrenAndParents('" + chkLevel.ClientID + "' );");
    }
    }


    Java scripts for Hierarchial checkbox selection:

    // this method is called on clicking check box
    function ugInspectionScope_CheckAllChildrenAndParents(checkBoxID)
    {
    var checkBox = document.getElementById(checkBoxID);
    var el=igtbl_getElementById(checkBoxID);
    var cell= igtbl_getCellByElement(el);
    if (cell)
    {
    // to chek child checkboxes
    GridCell_CheckAllChildren(cell,checkBox.checked);

    // this should be called only when checkbox is checked
    if (checkBox.checked)
    {
    // to chek parent checkboxes
    GridCell_CheckAllParents(cell,checkBox.checked);
    }
    }

    }

    function GridCell_CheckAllChildren(cell,checked)
    {
    if (cell)
    {
    // get child rows
    var children = cell.Row.getChildRows();
    if(children)
    {
    for (var i = 0; i < children.length; i++)
    {
    var row = igtbl_getRowById(children[i].id;
    if(row)
    {
    var childCell = row.getCellFromKey('CheckBoxCol');
    if(childCell)
    {
    childCell.getElement().children[0].checked = checked;

    // call recursively to chek child checkbox

    GridCell_CheckAllChildren(childCell,checked);
    }
    }
    }
    }
    }
    }


    function GridCell_CheckAllParents(cell,checked)
    {
    if (cell)
    {
    // get parent row
    var row = cell.Row.ParentRow;
    if (row)
    {
    var parentCell = row.getCellFromKey('CheckBoxCol');
    if(parentCell)
    {
    parentCell.getElement().children[0].checked = checked;

    // call recursively to chek parent checkbox
    GridCell_CheckAllParents(parentCell,checked);
    }
    }
    }
    }

  • Very good stuff

  • I do not have js file having igtbl_getCellByElement, igtbl_getRowById functions. Can somebody please provide me the same.

  • Manasi, it looks like the JavaScript API for Infragistics controls has changed quite a bit since I wrote this in 2008 (there isn't even a control still called WebGrid). So I don't think this post will end up being very helpful (aside, perhaps, from the general logic of the code, ignoring the specifics).

Comments have been disabled for this content.