TreeView: toggle checkbox via click on label?

TreeView: toggle checkbox via click on label?

Posted by: leungw on 4 June 2018, 6:05 pm EST

• 

  leungw

  • Post Options:
  • Link
    Copy
  • Jump To Answer

  Posted 4 June 2018, 6:05 pm EST

  We started to use TreeView combined with checkboxes (autoCollapse=false), which basically works, but we prefer to also support clicking on the text LABEL of the node to toggle the checkbox state, because it reduces the precision required from human mouse navigation.

  My first attempt, was adding a custom event listener on the “itemClicked” attribute from the TreeView, and at first sight, this worked fine.

  However, clicking on the arrow left to expand/collapse, ALSO fires the event handler and toggles the state. This is NOT what we intended, because in our opinion, this should ONLY expand/collapse without toggling the checkbox state.

  Tried to remediate it by adding a “onCollapsedChanged” handler to “cancel” the event, but that did not have the intended effect.

  Anything else I should try to reach our intended UI behavior?

  Some other “solutions” I have in mind:

  • adding click handler on the label ONLY (span class=“wj-node-text”)
  • avoid propagating click event to surrounding DIV in case expand/collapse

  Many thanks in advance!

  Tung

  –
  
  Mazda Logistics Europe

• 

  leungw

  • Post Options:
  • Link
    Copy

  Posted 4 June 2018, 6:29 pm EST

  Another “wild” idea: replace the current “span” containing the label by a HTML “label” element, and link it to the checkbox using the “for” attribute, relying on standard HTML behavior.

  Maybe by combining with “formatItem” and custom node content?

• 

  manish.gupta

  

  • Post Options:
  • Link
    Copy

  Posted 5 June 2018, 5:41 pm EST

  Hi,
  
  Thank you for sharing workaround tried at your end.

  The best possibility is to add click event for TreeView and toggle checkbox if target element is not checkbox.

  Please refer to the following demo sample:
  
  https://stackblitz.com/edit/js-ka6fr7?file=index.js

  ~Manish

• 

  leungw

  • Post Options:
  • Link
    Copy

  Posted 5 June 2018, 11:44 pm EST

  Thanks a lot, this seems to work fine!

  I think it slightly conflicts with the idea of a clean UI “component”, but it doesn’t bother me that much.

  I tried to get it working with “formatItem”, by generating a checkbox with ID and label with “for” reference (instead of the “span”) and it seems to work as well. There is some need to generate/choose an unique ID for each checkbox, however.