Expand/Collapse ALL | Infragistics Forums

455

Expand/Collapse ALL

Mike Siewert posted over 10 years ago

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.

23953

Offline Martin Pavlov posted over 6 years ago in reply to Krystal Maxwell

Hello Krystal,

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.

Best regards,
Martin Pavlov
Infragistics, Inc.

0

Offline Krystal Maxwell posted over 6 years ago in reply to Martin Pavlov

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.
Cancel
Reply

Cancel
0

Offline Krystal Maxwell posted over 6 years ago in reply to Martin Pavlov

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
Cancel
Reply

Cancel

23953

Offline Martin Pavlov posted over 6 years ago in reply to Krystal Maxwell

Hello Krystal,

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.

Best regards,
Martin Pavlov
Infragistics, Inc.

0

Offline Krystal Maxwell posted over 6 years ago in reply to Martin Pavlov

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?
Cancel
Reply

Cancel