@@ -148,22 +148,55 @@ tree.on('willCheckNode', function(Node) {});
148148
149149#### Creating tree nodes with checkboxes
150150
151+ Sets the checked attribute in your rowRenderer:
152+
151153``` js
152- tree .on (' willSelectNode' , function (node ) {
153- node .props .checked = ! node .props .checked ;
154- tree .updateNode (node);
154+ const tag = require (' html5-tag' );
155+
156+ const checkbox = tag (' input' , {
157+ type: ' checkbox' ,
158+ checked: node .state .checked ,
159+ ' class' : ' checkbox' ,
160+ ' data-indeterminate' : node .state .indeterminate
155161});
156162```
157163
158- Sets the checked attribute in your rowRenderer :
164+ In your tree, add 'click', 'contentDidUpdate', 'clusterDidChange' event listeners as below :
159165
160166``` js
161- const tag = require (' html5-tag' );
167+ // `indeterminate` doesn't have a DOM attribute equivalent, so you need to update DOM on the fly.
168+ const updateIndeterminateState = (tree ) => {
169+ const checkboxes = tree .contentElement .querySelectorAll (' input[type="checkbox"]' );
170+ for (let i = 0 ; i < checkboxes .length ; ++ i) {
171+ const checkbox = checkboxes[i];
172+ if (checkbox .hasAttribute (' data-indeterminate' )) {
173+ checkbox .indeterminate = true ;
174+ } else {
175+ checkbox .indeterminate = false ;
176+ }
177+ }
178+ };
162179
163- const checkbox = tag (' input' , {
164- type: ' checkbox' ,
165- checked: node .props .checked
166- }, ' ' );
180+ tree .on (' click' , function (node ) {
181+ const currentNode = tree .getNodeFromPoint (event .x , event .y );
182+ if (! currentNode) {
183+ return ;
184+ }
185+
186+ if (event .target .className === ' checkbox' ) {
187+ event .stopPropagation ();
188+ tree .checkNode (currentNode);
189+ return ;
190+ }
191+ });
192+
193+ tree .on (' contentDidUpdate' , () => {
194+ updateIndeterminateState (tree);
195+ });
196+
197+ tree .on (' clusterDidChange' , () => {
198+ updateIndeterminateState (tree);
199+ });
167200```
168201
169202#### How to attach click event listeners to nodes?
0 commit comments