I am using #treeNodeWrapperTemplate in angular, which allows me to use displayfield for formatting. But I can specify only one column for it. for example: options = {displayField:'column1'} I want to display two values "column1(column2)" in it. Anybody has any idea about it?
2
-
Can you show the code for it? Maybe adding a package link would be useful as well.mike– mike2021-10-08 14:47:35 +00:00Commented Oct 8, 2021 at 14:47
-
options = {displayField: 'value'}; fields = createTree(fields); HTML -> <tree-root [fields]="fields" [options]="options"> <ng-template #treeNodeWrapperTemplete let-field> <tree-node-content [field]="field"></tree-node-content>Priya– Priya2021-10-08 14:58:44 +00:00Commented Oct 8, 2021 at 14:58
Add a comment
|
1 Answer
displayField can be a function that returns a string using the column values.So, you may use something like this to use multiple columns
displayField: (node) => `${node.data.column1}(${node.data.column2})`
Below is a detailed example of its usage.
nodes = [
{
_id: '1',
column1: 'root1',
column2: 'root1_info',
nodes: [{_id: '3', column1: 'child1', column2: 'child1_info'}]
},
{
_id: '2',
column1: 'root2'
column2: 'root2_info',
}
];
options: ITreeOptions = {
idField: '_id',
displayField: (node) => `${node.data.column1}(${node.data.column2})`,
childrenField: 'nodes'
};
4 Comments
Priya
does that mean I need to traverse through nodes[] to get " (node) =>
${node.data.column1}(${node.data.column2}) "
iams0nus
No you dont have to traverse through it... just replace
displayField: 'column1' with displayField: (node) => ${node.data.column1}(${node.data.column2})`. The component will do the traversal for each element (node) in the tree data source and calculate the text to be displayedPriya
not working for me-> stackblitz.com/edit/…
Priya
It is giving me following error -> type '(node:any) => string' is not assignable to type 'string'