I am using the igHierarchicalGrid to display rows that can contain children that can contain children that can contain children, down to an unknown depth. I programatically create my child grid layouts on the server based on data in a table and all levels are the same type of record. When my grid is rendered, I could have rows that only go down to a depth of 2, or it could be 8, it is not static.
What I want is an 'Expand All' function that expands all children rows recursively through the grid. Is there an easy way to do this? I cannot seem to find a simple answer for this problem.
Hello Mike,
Sorry for the late response.
We don't have public API which can do this job for you. The igHierarchicalGrid.expand API method can be used for this purpose.
Here is my own implementation of such function:
It's interesting to note that this code expands one level at a time and should wait for the child grids to expand. Given the fact that public methods do not rise events I used the setInterval API to wait 1 second before I try to expand the next level from the hierarchy. Of course this approach may fail on slower browsers where 1 second will be not enough for the child grids to expand, so you may need to change this parameter.
Here is how you use the function:
expandAllRows($("#grid1"));
where $("#grid1") is the placeholder for the igHierarchicalGrid.
P.S.: You can submit a new product idea about this functionality here.
Hope this helps,
Martin PavlovInfragistics, Inc.
We have a similar setup and are attempting to use this code for Expand/ Collapse All Buttons. It is working for all levels but is extremely slow. For some of our grids it is taking over 30 minutes. Why would it be taking this long? Is there a way to speed it up?
Hello Krystal,
The Expand All/Collapse All operation depends on the amount of data in the igHierarchicalGrid. The more the data and the levels the longer it will take to expand them.
As this thread is 4 years old may I suggest you to use the Expand/Collapse function from the following sample:
https://www.igniteui.com/hierarchical-grid/hgrid-api-events
Where you can use the "expandCollapseRowsPerGrid" function. Here is its code:
function expandCollapseRowsPerGrid($gridElement, action, level, callback) { var _root = $("#grid").data("igHierarchicalGrid"); //get all rows in the grid that are not child grid container var rows = $gridElement.children('tbody').find('>tr:not([data-container])'); var rowsCount = rows.length; var gridChildElements = []; var index = 0; //Callback function used for the expand/collapse methods. //Recursively loops through the child grids and calls expandCollapseRowsPerGrid for each. var callbackFuncToggled = function (hGrid, $tr) { var dataRowContainer, $trContainer = $tr.next('tr'); if ($trContainer.attr('data-container')) { gridChildElements.push($trContainer.find('table[data-childgrid]')); } if (++index === rowsCount) { $.each(gridChildElements, function (ind, elem) { expandCollapseRowsPerGrid(elem, action, level + 1, callback); }); callback(gridChildElements, $tr, level) } }; rows.each(function (ind, row) { var $row = $(row); if ((_root.expanded($row) && action === 'expand') || (_root.collapsed($row) && action === 'collapse')) { callbackFuncToggled(_root, $row); } else { if (action === 'expand') { _root.expand($row, callbackFuncToggled) } else { _root.collapse($row, callbackFuncToggled) } } }); }
And you can use it like this:
expandCollapseRowsPerGrid($('#grid'), 'expand', 0, function () { });
Best regards, Martin Pavlov Infragistics, Inc.
Thanks Martin! I had originally tried the function you suggested, but am unable to get it to expand more than one level. Do you happen to have a working example of the function being used on a grid with more than 2 levels?
I found an issue in the function I sent previously. Here is the new version of the function:
//function for expanding/collapsing all rows on all levels in the igHierarhicalGrid function expandCollapseRowsPerGrid($gridElement, action, level, callback) { var _root = $gridElement.data("igHierarchicalGrid") || $gridElement.closest(".ui-iggrid-root").data("igHierarchicalGrid"); //get all rows in the grid that are not child grid container var rows = $gridElement.children('tbody').find('>tr:not([data-container])'); var rowsCount = rows.length; var gridChildElements = []; var index = 0; //Callback function used for the expand/collapse methods. //Recursively loops through the child grids and calls expandCollapseRowsPerGrid for each. var callbackFuncToggled = function (hGrid, $tr) { var dataRowContainer, $trContainer = $tr.next('tr'); if ($trContainer.attr('data-container')) { gridChildElements.push($trContainer.find('table[data-childgrid]')); } if (++index === rowsCount) { $.each(gridChildElements, function (ind, elem) { expandCollapseRowsPerGrid(elem, action, level + 1, callback); }); callback(gridChildElements, $tr, level) } }; rows.each(function (ind, row) { var $row = $(row); if ((_root.expanded($row) && action === 'expand') || (_root.collapsed($row) && action === 'collapse')) { callbackFuncToggled(_root, $row); } else { if (action === 'expand') { _root.expand($row, callbackFuncToggled) } else { _root.collapse($row, callbackFuncToggled) } } }); }
We will update the sample on www.igniteui.com as well to include the new version of the function.
Yes. There is a problem when some of the rows are not expandable. I think I fixed it in this version:
//function for expanding/collapsing all rows on all levels in the igHierarhicalGrid function expandCollapseRowsPerGrid($gridElement, action, level, callback) { var _root = $gridElement.data("igHierarchicalGrid") || $gridElement.closest(".ui-iggrid-root").data("igHierarchicalGrid"); //get all rows in the grid that are not child grid container var rows = $gridElement.children('tbody').find('>tr:not([data-container])'); var rowsCount = rows.find("span.ui-iggrid-expandbutton").length; var gridChildElements = []; var index = 0; //Callback function used for the expand/collapse methods. //Recursively loops through the child grids and calls expandCollapseRowsPerGrid for each. var callbackFuncToggled = function (hGrid, $tr) { var dataRowContainer, $trContainer = $tr.next('tr'); if ($trContainer.attr('data-container')) { gridChildElements.push($trContainer.find('table[data-childgrid]')); } if (++index === rowsCount) { $.each(gridChildElements, function (ind, elem) { expandCollapseRowsPerGrid(elem, action, level + 1, callback); }); callback(gridChildElements, $tr, level) } }; rows.each(function (ind, row) { var $row = $(row); if ((_root.expanded($row) && action === 'expand') || (_root.collapsed($row) && action === 'collapse')) { callbackFuncToggled(_root, $row); } else { if (action === 'expand') { _root.expand($row, callbackFuncToggled) } else { _root.collapse($row, callbackFuncToggled) } } }); }
Also don’t forgot to set animationDuration option to 0. This will disable the animation of the expanding/collapsing a row. You don't need it enabled when you do Expand All/Collapse All rows.
A little more information:
My first row contains child rows, but my second row does not. If I only bring back one row and run the function to expand, it works. It seems like something is going wrong if it encounters a first level row that does not contain child rows.
Martin,
Thank you for the new version. Unfortunately, I am still not able to get it to expand more than the first level. When it gets to this if statement:
if (++index === rowsCount) { $.each(gridChildElements, function (ind, elem) { expandCollapseRowsPerGrid(elem, action, level + 1, callback); }); callback(gridChildElements, $tr, level) }
index never equals rowsCount, so the function never gets called recursively. My first level has 10 rows, which sets rowsCount to 10, but index only gets up to 6.
When I run it with the action set to "collapse", index does eventually equal rowsCount, thus the function gets called recursively and works as expected.
Any ideas why this might be?
-Krystal