A12 TreeTable - collapsed nodes on load (second level)

Widgets
1

Is there an easy way to have the nodes in TreeTable collapsed on load? I have taken the example from the A12 showcase.

<INTERNAL_LINK>

I want all my nodes collapsed on load. But I also have my parent hidden so basically all second level nodes should load collapsed.

2

Hi Oliver,

since A12 2020.10-ext, it is possible to define the initial display for nodes ([A12 Ticket]<INTERNAL_LINK>).
All options for this feature can be set inside the Tree Model e.g. via SME. For more information please refer to the [GetA12 Tree Model Documentation]<INTERNAL_LINK>.

Best

3

Thanks!

Is there any way to this programatically?

eg.In the Tree Table object :

			<TreeTable
				root={rootNode}
				columns={COLUMN_TYPES}
				rowEventHandlers={rowEventHandlers}
				rowStyling={rowStyling}
				hideRoot={true}
			/>

or the data structure I am putting into it :

		   "children": [
			   {
				   "children": [
					   {
						   "data": {
							   "version": "V1"
						   },
						   "id": 1
					   }
				   ],
				   "data": {
					   "name": "A12Einheitswertaktenzeichen",
					   "type": "String"
				   },
				   "id": 1
			   },
4

I am not a developer but I guess you can set it inside the “content” → “configuration” section of your data structure (tree model).

Example for expanding 2 node levels

{
  "header": {...
  },
  "content": {
    "subHeaderBox": {...
    },
    "footerBox": {...
    },
    "configuration": {
      "rootRef": ...,
      "hierarchicalColumnRef": ...,
      "initialExpansion": {
        "type": "level_limit",
        "level": 2
      }
    },
    "columns": [...
    ],
    "nodes": [...]
    ]
  }
}

Example for expanding all nodes

{
  "header": {...
  },
  "content": {
    "subHeaderBox": {...
    },
    "footerBox": {...
    },
    "configuration": {
      "rootRef": ...,
      "hierarchicalColumnRef": ...,
      "initialExpansion": {
        "type": "all_levels"
      }
    },
    "columns": [...
    ],
    "nodes": [...]
    ]
  }
}

Best

5

In the Widget Tree Table, the collapsed/expanded state is defined in the rowStyling callback which requires you to prepare your own UI state for it.

const [collapsedNodes, setCollapsedNodes] = React.useState<{ [key: number]: boolean }>({});

const rowStyling: TreeTableRowStyling = React.useCallback(
    ({ row }) => {
        return { collapsed: collapsedNodes[row.id] };
    },
    [collapsedNodes]
);

The above rowStyling callback will lead to a state where all nodes to be expanded initially.

However, in your case, you can use a reversed logic of collapsed nodes so that you can still initiate an empty object. For example:

const [expandedNodes, setExpandedNodes] = React.useState<{ [key: number]: boolean }>({});

const rowStyling: TreeTableRowStyling = React.useCallback(
    ({ row }) => {
        return { collapsed: !expandedNodes[row.id] };
    },
    [expandedNodes]
);

Happy coding.