Guide: AG Grid Tree Data in a Servoy PowerGrid

Questions
1

Although Servoy doesn’t support AG Grid Tree Data mode out-of-the-box, the Servoy PowerGrid does provide the minimal tools required to implement Tree Data within the Server Side model using lazy loading to transverse large data-sets. I’ve developed a working example based on an example provided by AG Grid that I’d like to share with the community. Below I’ll cover the important parts of the implementation, however, I’ve also attached a .servoy file with the complete implementation.

AG Grid Example: JavaScript Grid: SSRM Tree Data | AG Grid
Example Data: https://www.ag-grid.com/example-assets/small-tree-data.json
Servoy Solution: aggrid_treedata_example.servoy - Google Drive (Created with 2024.12 with EcmaScript parser turned on)

Setting up the Grid
Once you’ve got a form with a PowerGrid element the following grid properties need to be configured:

useLazyLoading: true
onLazyLoadingGetRows: onLazyLoadingGetRows (Form Function)

The remaining GridOptions need to be configured programmatically.

Create a form method setGridOptions() that can be called in the forms onLoad/onShow as follows:

function setGridOptions() {
	const isServerSideGroupOpenByDefault = function(params) {
		/** @type {Array} */
		const route = params.rowNode.getRoute();
		if (!route) return null;
		
		return route.length <= 1;
	};
	
	const getServerSideGroupKey = function(dataItem) {
		return dataItem.employeeId;
	};
	
	const isServerSideGroup = function(dataItem) {
		return dataItem.group;
	};
	
	const innerRenderer = function(params) {
		return `<i class="${params.data.icon}"></i>${params.data.employeeName}`;
	};
	
	elements.grid.gridOptions = Object.assign({},
		elements.grid.gridOptions || {},
		{
			autoGroupColumnDef: {
				field: "employeeName",
				minWidth: 200,
				suppressHeaderMenuButton: true,
				cellRendererParams: {
					innerRenderer: clientutils.generateBrowserFunction(String(innerRenderer)),
					suppressDoubleClickExpand: true,
				}
			},
			treeData: true,
			animateRows: true,
			isServerSideGroupOpenByDefault: clientutils.generateBrowserFunction(String(isServerSideGroupOpenByDefault)),
			isServerSideGroup: clientutils.generateBrowserFunction(String(isServerSideGroup)),
			getServerSideGroupKey: clientutils.generateBrowserFunction(String(getServerSideGroupKey))
		}
	);
}

This method turns on Tree Data mode (treeData: true) and provides the two required client side functions (getServerSideGroupKey, isServerSideGroup) as shown in the example. The autoGroupColumnDef property creates an additional column to display the group name and instructions on how to render it. In this example I’m providing a client side function that concatenates two properties (icon, name) from the row data.

isServerSideGroup is used to determine if the row has children. In this example, the value of the group property is determined server-side when generating the data to send to the client.

getServerSideGroupKey returns the value of the key which is sent to the server when requesting more rows.

isServerSideGroupOpenByDefault() is optional, but in my example I open the first level of the tree by default.

Retrieving Data
What makes Tree Data powerful is the use of lazy loading. The child rows of a group are only requested when opening a group. Additionally, if there is a large number of children, the rows can be requested in segments (like a foundset).

The method onLazyLoadingGetRows() is the form method created earlier that is tied to the relevant power grid event:

function onLazyLoadingGetRows(startRow, endRow, rowGroupCols, valueCols, pivotCols, pivotMode, groupKeys, filterModels, sortModels) {
	const _rows = extractRowsFromData(groupKeys, $data);
	const _ds = databaseManager.convertToDataSet(_rows.slice(startRow, endRow), ['group', 'icon', 'employeeId', 'employeeName', 'employmentType', 'jobTitle']);
	
	elements.grid.appendLazyRequestData(_ds, $rowCount);
}

This method calls extractRowsFromData() which is a recursive function that accepts an array of the group keys and the data to transverse and returns a subset of the data. This data is then possibly reduced further with _rows.slice(startRow, endRow) based on the start and end rows that the grid is displaying, then converted into a dataset and appended to the current data using a method supplied by Servoy appendLazyRequestData().

/**
 * @param {Array<String>} groupKeys
 * @param {Array} data
 * @return {Array}
 * 
 * @private
 */
function extractRowsFromData(groupKeys, data) {

	if (groupKeys.length === 0) {
		return data.map(function (d) {
		  const iconClasses = ['star', 'fire', 'web-awesome', 'mug-hot', 'tree', 'rocket', 'microchip', 'brain', 'robot', 'dragon', 'puzzle-piece', 'tractor', 'ticket-simple', 'toilet-paper', 'table-tennis-paddle-ball', 'spaghetti-monster-flying'];
		  const iconColors = ['info', 'success', 'warning', 'danger', 'primary', 'secondary', 'primary-emphasis', 'body-secondary'];
		  return {
		    group: !!d.children,
			icon: `fa-solid me-2 fa-${iconClasses[Math.floor(Math.random() * (iconClasses.length))]} text-${iconColors[Math.floor(Math.random() * (iconColors.length))]}`,
		    employeeId: `${d.employeeId}`, // Group keys must be strings
		    employeeName: d.employeeName,
		    employmentType: d.employmentType,
		    jobTitle: d.jobTitle,
		  };
		});
	}

	const key = parseInt(groupKeys[0]);
	for (let i = 0; i < data.length; i++) {
		if (data[i].employeeId === key) {
			return extractRowsFromData(
				groupKeys.slice(1),
				data[i].children.slice(),
			);
		}
	}
	
	return [];
}

The method for extracting data is the most complex part of the example, but the important part is where it returns the object for each row. Notice the group property is defined by whether that row has further children.

Servoy’s PowerGrid lives up to it’s name, it provides the basic mechanisms to allow developers to implement more advanced AG Grid configurations.

4 Likes