Uploaded image for project: 'PUBLIC - Liferay Alloy UI'
  1. PUBLIC - Liferay Alloy UI
  2. AUI-90

Enhance TreeView to allow configuring whether a node is selected when it is toggled

    Details

    • Type: Improvement
    • Status: Closed
    • Priority: Minor
    • Resolution: Fixed
    • Affects Version/s: 1.0.0
    • Fix Version/s: 1.5.3
    • Component/s: JavaScript
    • Labels:
      None

      Description

      When a node is toggled in a TreeView, the node is also selected. This behavior while not intrinsically wrong is undesirable in some circumstances. For instance, when one has a two pane application with a tree for navigation in the left pane and a content area of arbitrary complexity and loading cost in the right pane, a lot of loading can happen as the user drills down to the node of interest. In this case, it is better to be able to expand the tree, then click on the icon or label to select the node. This is also more consistent with the familiar Windows Explorer navigation (for better or worse).

      The proposed enhancement adds a configuration attribute called selectOnToggle which will allow the user to choose whether or not the node will be selected when it is toggled. The default value is true, which corresponds to the existing behavior. The function _onClickNodeEl is modified to give the desired behavior i.e. bypass the selection code if the expand icon was hit and selectOnToggle is false.

      The new attribute:

      /**

      • Whether or not to select the node when it is expanded
        *
      • @attribute selectOnToggle
      • @default false
      • @type Boolean
        */
        selectOnToggle: { value: true, validator: isBoolean }

        ,

      The modified version of _onClickNodeEl:

      _onClickNodeEl: function(event) {
      var instance = this;
      if (instance.get('selectOnToggle') || !event.target.hasClass(CSS_TREE_HITAREA)) {
      var treeNode = instance.getNodeByChild( event.currentTarget );
      if (treeNode && !treeNode.isSelected()) {
      var lastSelected = instance.get(LAST_SELECTED);

      // select drag node
      if (lastSelected)

      { lastSelected.unselect(); }

      treeNode.select();
      }
      }
      }

      The original version of _onClickNodeEl:

      _onClickNodeEl: function(event) {
      var instance = this;
      var treeNode = instance.getNodeByChild( event.currentTarget );

      if (treeNode && !treeNode.isSelected()) {
      var lastSelected = instance.get(LAST_SELECTED);

      // select drag node
      if (lastSelected)

      { lastSelected.unselect(); }

      treeNode.select();
      }
      },

        Attachments

          Issue Links

            Activity

              People

              Assignee:
              bruno.basto Bruno Basto (Inactive)
              Reporter:
              rowbare Robert Roy
              Participants of an Issue:
              Votes:
              0 Vote for this issue
              Watchers:
              1 Start watching this issue

                Dates

                Created:
                Updated:
                Resolved:
                Days since last comment:
                11 years, 16 weeks, 4 days ago

                  Packages

                  Version Package
                  1.5.3