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
No Data
Reply
  • 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. 

Children