Get Children of igHierarchicalGrid on 3rd Level

Question

I have created a 3 level infragistics igHierarchicalGrid which looks like this:

I want to select the the third row with ProductNumber programmatically. I am able to do this till the second level(Pizza) but i am unable to achieve the same thing for the third level entries.

Below is my code for selecting pizza

var parentGrid = grid.igHierarchicalGrid("rootWidget");
var row = parentGrid.rowAt(0);
grid.igHierarchicalGrid("expand", row);   
var subGrids = grid.igHierarchicalGrid("allChildren");
$(subGrids).each(function(index, subGrid) {
    $(subGrid).igGridSelection("selectRow", 0);
});

grid.igHierarchicalGrid("allChildren") returns all the children of currently expanded rows but it returns them as grid elements while my problem is that those elements are also HierarchicalGrids which i want to expand and select the children from.

Answer 1

igHierarchicalGrid instance is only on the root grid. With the root grid API you can expand/collapse rows of the children's too. Here is how to select the 3-rd level row:

var grid = $("#grid1");
var parentGrid = grid.igHierarchicalGrid("rootWidget");
var row = parentGrid.rowAt(0);
grid.igHierarchicalGrid("expand", row, function () {
    var subGrids = grid.igHierarchicalGrid("allChildren"), currentGrid;
    if (subGrids && subGrids[0]) {
        currentGrid = $(subGrids[0]); 
        grid.igHierarchicalGrid("expand", currentGrid.igGrid("rowAt", 0), function () {
            var subGrids = grid.igHierarchicalGrid("allChildren");
            if (subGrids && subGrids[1]) {
                $(subGrids[1]).igGridSelection("selectRow", 0);
            }
        });
    }
});

Keep in mind that igHierarchicalGrid.expand is async API and it's best to use the 3rd callback parameter to execute your logic after the expand is done.