multi_select_tree 1.0.1 multi_select_tree: ^1.0.1 copied to clipboard
A material multi select tree.
angular-dart-material-tree #
Prerequisites #
Dart packages
- Polymer
- Polymer elements
dependencies :
polymer: 1.0.0-rc.19
polymer_elements: 1.0.0-rc.10
Installing #
Update you pubspec.yaml file to include the above dependencies .
Copy the material-tree/multi-select-tree folder into your lib .
Include the material-tree/multi-select-tree in the imports .
import 'package:angular_dart_data_grid/src/material-tree/material-tree.dart';
Add the CustomMaterialTreeComponent in the directives for material_tree
directives: const [materialDirectives, CustomMaterialTreeComponent],
Add the MultiSelectTreeComponent in the directives for multi_select_tree
directives: const [materialDirectives, MultiSelectTreeComponent],
Get the dependecies and run pub build/serve.
Using it in the HTML. #
Inputs :
`data : List<>`
-- Data to be displayed in the tree. Expecting a list here.
Example:
treeRootNodes=
[
{
name: "parent1" ,
children:[
{
name : "child1"
children : []
},
{
name : "child2"
children : []
},
{
name : "child3"
children : []
}]
},
{
name: "parent2",
children : [
{
name : "child5"
children : []
},
{
name : "child6"
children : []
}
{
name : "child7"
children : [
{
name : "child8"
children : []
},
{
name : "child9"
children : []
},
{
name : "child10"
children : []
}]
}]
}
]
Events :
nodeSelected : AsyncAction<<Node> -- emits the node that is clicked.
Material Tree Usage :
<custom-material-tree (nodeSelected)="nodeSelected($event)" [data]="treeRootNodes" >
</custom-material-tree>
We can write any function in order to handle the emitted event. I wrote a dummy function nodeSelected which will get the selected node as an arguement automcatically.
The above example will show the checkboxes for each of the row, add/delete button and columns as per the column definitions.
Multi-Select Tree Usage : #
<multi-select-tree (selectedNodes)="nodeSelected($event)" [data]="treeRootNodes" >
</multi-select-tree>
Inputs : #
same as material-tree.
Events : #
selectedNodes : AsyncAction<<List<Node>> -- emits the selected nodes.