File tree Expand file tree Collapse file tree 1 file changed +37
-1
lines changed
Expand file tree Collapse file tree 1 file changed +37
-1
lines changed Original file line number Diff line number Diff line change @@ -10,7 +10,7 @@ A light-weight library for management of hierachical content. Most solutions I f
1010 - :heavy_check_mark : Item moved (drag-and-drop)
1111 - Custom formating of items on the tree based on the ` type ` property. (Coming soon)
1212 - :heavy_check_mark : Customising Icons
13- - Rendering (checkboxes or plain content)
13+ - ✔️ Rendering (checkboxes or plain content)
1414 - Custom Context Menu
15153 . Programmatically toggle item visibility based on the ` type ` property.
1616
@@ -68,4 +68,40 @@ You can customise item based on their `type` property.
6868 < / tree- view>
6969< / template>
7070
71+ ` ` `
72+
73+ ### Making Items Checkable Or Plain Content
74+
75+ You can customise if items of a particular ` type` are checkable or just plain contents.
76+
77+ #### Example
78+
79+
80+ ` ` ` ts
81+ < template>
82+ < tree- view : treeViewItems= " treeViewNodes" @created= " customiseTreeView" / >
83+ < / template>
84+
85+ < script lang= ' ts' >
86+ import { Vue , Component } from ' vue-property-decorator' ;
87+
88+ import { TreeViewCreatedEventPayload , TreeViewItem } from ' @/businessLogic/contracts/types' ;
89+
90+ @Component
91+ export default class App extends Vue {
92+
93+ // This method is called when the tree view is created (on Created hook). And allows you to customise
94+ // items using the payload passed into the function.
95+ customiseTreeView (treeCreatedEvent : TreeViewCreatedEventPayload ) {
96+ const customisations = treeCreatedEvent .itemCustomisations ;
97+
98+ customisations .makeItemsCheckable ([" .doc" , " .excel" , " media" ]);
99+ }
100+
101+ treeViewNodes: TreeViewItem[] = [] // Populate tree items here.
102+ ];
103+ }
104+ </script >
105+
106+
71107```
You can’t perform that action at this time.
0 commit comments