Skip to content

Commit 71fd701

Browse files
yoavaayoavaa
committed
added docs for multi-selection
1 parent 2304b5b commit 71fd701

File tree

2 files changed

+77
-6
lines changed

2 files changed

+77
-6
lines changed

‎README.md‎

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -107,11 +107,13 @@ Attributes of angular treecontrol
107107
- `treecontrol` : the treeview element.
108108
- element content : the template to evaluate against each node (and the parent scope of the tree) for the node label.
109109
- `tree-model` : [Node|Array[Node]] the tree data on the `$scope`. This can be an array of nodes or a single node.
110-
- `selected-node` : [Node] binding for the selected node in the tree. Updating this value updates the selection displayed in the tree. Selecting a node in the tree will update this value.
110+
- `selected-node` : [Node], used when `multiSelection=false`. Binding for the selected node in the tree. Updating this value updates the selection displayed in the tree. Selecting a node in the tree will update this value.
111+
- `selected-nodes` : [Array[Node]], used when `multiSelection=true`. Binding for the selected nodes in the tree. Updating this value updates the selection displayed in the tree. Selecting a node in the tree will update this value.
111112
- `expanded-nodes` : [Array[Node]] binding for the expanded nodes in the tree. Updating this value updates the nodes that are expanded in the tree.
112-
- `on-selection` : callback called whenever selecting a node in the tree. The callback argument is the selected node.
113-
- `on-node-toggle` : callback called whenever a node expands or collapses in the tree. The function arguments are the toggled node and a boolean which is true for expansion, false for collapse.
113+
- `on-selection` : `(node, selected)` callback called whenever selecting a node in the tree. The callback expression can use the selected node (`node`) and a boolean which indicates if the node was selected or deselected (`selected`).
114+
- `on-node-toggle` : `(node, expanded)` callback called whenever a node expands or collapses in the tree. The callback expression can use the toggled node (`node`) and a boolean which indicates expansion or collapse (`expanded`).
114115
- `options` : different options to customize the tree control.
116+
- `multiSelection` : [Boolean] enable multiple nodes selection in the tree.
115117
- `nodeChildren` : the name of the property of each node that holds the node children. Defaults to 'children'.
116118
- `dirSelectable` : are directories (nodes with children) selectable? If not, clicking on the dir label will expand and contact the dir. Defaults to `true`.
117119
- `equality` : the function used to determine equality between old nodes and new ones when checking whether a replacement node should be expanded and/or marked as selected. Defaults to a function which uses `angular.equals()` on everything except the property indicated in `nodeChildren`.

‎index.html‎

Lines changed: 72 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -427,7 +427,7 @@ <h1>Events <small>(on-expand & on-selection)</small></h1>
427427
<div save-content="events-html">
428428
<treecontrol class="tree-classic"
429429
tree-model="treedata"
430-
on-selection="showSelected(node)"
430+
on-selection="showSelected(node, selected)"
431431
on-node-toggle="showToggle(node, expanded)">
432432
label: {{node.label}} ({{node.id}})
433433
</treecontrol>
@@ -436,6 +436,11 @@ <h1>Events <small>(on-expand & on-selection)</small></h1>
436436
</div>
437437
</div>
438438
<div class="col-md-6">
439+
<P>The tree supports events for selection and expansion of nodes. The events are set using the <code>on-selection</code> and <code>on-node-toggle</code> attributes
440+
which values are evaluated as angular expressions (like `ng-click` value). The expression can use the `node` and `selected` variables (for on-selection) or
441+
the `node` and `expanded` variables (for on-node-toggle) for context of the clicked node and if it was selected / deselected or expanded / collapsed.</P>
442+
<p>Note the events are fired only on the clicked node. If using the tree in single selection mode and one node is selected, when selecting a different node
443+
only one on-selection event will be fired for the newly selected node. The old selected node will not be selected anymore without an on-selected event.</p>
439444
<p>In order to prevent selection of branches (folders) in the tree, set the <code>options.dirSelectable</code> to <code>false</code>.
440445
Clicking folder labels at this point will expand and contract the node.</p>
441446
<p>Events fired:</p>
@@ -460,13 +465,77 @@ <h1>Events <small>(on-expand & on-selection)</small></h1>
460465
$scope.showToggle = function(node, expanded) {
461466
$("#events-listing").append("<li>"+node.label+ (expanded?" expanded":" collapsed") + "</li>");
462467
};
463-
$scope.showSelected = function(node) {
464-
$("#events-listing").append("<li>"+node.label+" selected</li>");
468+
$scope.showSelected = function(node, selected) {
469+
$("#events-listing").append("<li>"+node.label+ (selected?" selected":" deselected") + "</li>");
465470
};
466471
}
467472
</script>
468473
</section>
469474

475+
<section id="multi-selection" ng-controller="MultiSelection">
476+
<div class="page-header">
477+
<h1>Multi Selection <small>(options.multiSelect & selected-nodes)</small></h1>
478+
</div>
479+
<div class="row">
480+
<div class="col-md-6 show-grid">
481+
<div class="panel panel-default">
482+
<div class="panel-body">
483+
<div class="example-caption">EXAMPLE:</div>
484+
<div save-content="events-html">
485+
<treecontrol class="tree-classic"
486+
tree-model="treedata"
487+
selected-nodes="selectedNodes"
488+
on-selection="showSelected(node, selected)"
489+
options="treeOptions">
490+
label: {{node.label}} ({{node.id}})
491+
</treecontrol>
492+
</div>
493+
</div>
494+
</div>
495+
</div>
496+
<div class="col-md-6">
497+
<P>The tree control supports multi-selection using the `options.multiSelect` option and the `selected-nodes` attribute (instead of the `selected-node` attribute in single selection mode).
498+
`selected-nodes` is expected to be an Array which will contain the selected nodes.
499+
When using multi-selection, selecting a node adds it to the selected-nodes array and a second click remove it from the array.</p>
500+
<div class="row">
501+
<div class="col-md-6">
502+
<p>Selected Nodes:</p>
503+
<ul id="multi-selection-listing">
504+
<li ng-repeat="node in selectedNodes">{{node.label}}</li>
505+
</ul>
506+
</div>
507+
<div class="col-md-6">
508+
<p>Selection Events:</p>
509+
<ul id="multi-selection-events-listing">
510+
511+
</ul>
512+
</div>
513+
</div>
514+
</div>
515+
</div>
516+
<div class="row">
517+
<tabset>
518+
<tab heading="Markup" >
519+
<pre class="code" apply-content="events-html" highlight-lang="html"></pre>
520+
</tab>
521+
<tab heading="JavaScript">
522+
<pre class="code" apply-content="events-js" highlight-lang="js"></pre>
523+
</tab>
524+
</tabset>
525+
</div>
526+
<script save-content="multi-selection-js">
527+
function MultiSelection($scope) {
528+
$scope.treeOptions = {multiSelection: true};
529+
$scope.treedata=createSubTree(3, 4, "");
530+
$scope.selectedNodes = [];
531+
$scope.showSelected = function(node, selected) {
532+
$("#multi-selection-events-listing").append("<li>"+node.label+ (selected?" selected":" deselected") + "</li>");
533+
};
534+
}
535+
</script>
536+
</section>
537+
538+
470539
<section id="dirSelection" ng-controller="DirSelection">
471540
<div class="page-header">
472541
<h1>Clicking Labels Expand & Collapse <small>(options.dirSelectable)</small></h1>

0 commit comments

Comments
 (0)