jqxTreeGrid Full Expand

[jqwidgetsdevParticipant]

Hello.

I was wondering is there a way to do a full expand. I do see there is expandRow.

Season’s Greetings.

[Peter StoevKeymaster]

Hi jqwidgetsdev,

If the functionality you’re looking for is not in the API or Online Demos, then it is not available. All the features that the widget has are demonstrated in the TreeGrid’s Demos section http://www.jqwidgets.com/jquery-widgets-demo/demos/jqxtreegrid/index.htm

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com/

[jqwidgetsdevParticipant]

Hello Peter.

Yes, it looks like the getRows method and its example on jsfiddle will help with the full expand.

Best regards.

[jrwahlParticipant]

Here’s how I implemented an expand/collapse all. You’ll notice that the functions are not hard coded to any particular tree grid, and instead accept the id of whatever tree grid you want to expand/collapse. Also note that you’ll need to replace “rowId” with whatever id you have set for your data (id: ‘rowId’).

          $("#expandAllButton").jqxButton({});
           $('#expandAllButton').click(function () {
               expandAllTreeGrid("treeGrid");
           });
           $("#collapseAllButton").jqxButton({});
           $('#collapseAllButton').click(function () {
               collapseAllTreeGrid("treeGrid");
           });

            // These methods receive the id of the treeGrid to work with.
            function expandAllTreeGrid(treeGridId) {
               traverseTreeGrid(treeGridId,"expand");
            }
            function collapseAllTreeGrid(treeGridId) {
               traverseTreeGrid(treeGridId,"collapse");
            }
            function traverseTreeGrid(treeGridId, action) {
               var treeGrid = "$(\"#" + treeGridId + "\")";
               var rows = eval(treeGrid).jqxTreeGrid('getRows');
                for(var i = 0; i < rows.length; i++) {
                    if (rows[i].records) {
                        if (action == "expand") {
                           eval(treeGrid).jqxTreeGrid('expandRow',rows[i].rowId);
                        } else if (action == "collapse") {
                           eval(treeGrid).jqxTreeGrid('collapseRow',rows[i].rowId);
                        }
                        traverseTree(rows[i].records);
                    }
                }
            };

[peteParticipant]

For what it’s worth here’s my implementation.

  // Traverse tree grid to do a full "expand" or "collapse"
  function traverseTreeGrid(treeGrid, action) {

    function traverseRows(rows) {
      var idValue;
      for(var i = 0; i < rows.length; i++) {
        if (rows[i].records) {
          idValue = rows[i][idColumn];
          treeGrid.jqxTreeGrid(action+'Row',idValue);
          traverseRows(rows[i].records);
        };
      };
    };

    var idColumn = treeGrid.jqxTreeGrid('source')._source.id;
    traverseRows(treeGrid.jqxTreeGrid('getRows'));
  };

[Author]

Posts