Forums Ignite UI for jQuery
Your Privacy Matters: We use our own and third-party cookies to improve your experience on our website. By continuing to use the website we understand that you accept their use. Cookie Policy
Close
Mike Siewert
455
Expand/Collapse ALL
posted

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. 

Parents
  • 23953
    Verified Answer
    Offline posted

    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: 

    Code Snippet
    1. function expandAllRows(rootGrid) {
    2.     var level = 1, children, id, ad;
    3.     ad = rootGrid.igHierarchicalGrid("option", "animationDuration");
    4.     rootGrid.igHierarchicalGrid("option", "animationDuration", 0);
    5.     $(rootGrid.igGrid("allRows")).each(function (index, element) {
    6.         rootGrid.igHierarchicalGrid("expand", element);
    7.     });
    8.     id = setInterval(function () {
    9.         children = rootGrid.igHierarchicalGrid("allChildren").filter("table[data-level='" + level + "']");
    10.         if (children.length > 0) {
    11.             $(children).each(function (index, element) {
    12.                 $($(element).igGrid("allRows")).each(function (index, element) {
    13.                     if ($(element).find("td.ui-iggrid-expandcolumn").length > 0 && ($(element).attr("state") === undefined || $(element).attr("state") === "c")) {
    14.                         rootGrid.igHierarchicalGrid("expand", element);
    15.                     }
    16.                 });
    17.             });
    18.             level++;
    19.         } else {
    20.             clearInterval(id);
    21.             rootGrid.igHierarchicalGrid("option", "animationDuration", ad);
    22.         }
    23.     }, 1000);
    24. }

    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 Pavlov
    Infragistics, Inc. 

  • 23953
    Offline posted in reply to Krystal Maxwell

    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.

Reply Children