Usage

Use the Tree View to organize and present objects (Ex files and folders) in a navigable hierarchy.

• It is the best solution when:
  • The primary task is to navigate a hierarchy to find an object.
  • The primary task is organizing objects within a hierarchy.

Alternatives

• Accordion - Affords the user an opportunity to read, compare, and/or act on the content in different sections (containers) concurrently, unlike the Treeview which only allows interaction with a single child container at a time.
• Expandable DataGrid - Use when the activity only has a small number of uniform fields that need to viewed or acted upon.
• Shuttle - Use when the activity is primarily to select from a hierarchy

Options

• Search - A Search Box at the top of the treeview provides a mechanism to search for items in the tree. If an item is found within a closed folder it is opened to expose the resultant folder/file.
• Search Navigation - This gives a summary of the search results and provides a mechanism to navigate them.
• Expand/Collapse All - Toggle control that provides a means to open, or close, all of the children at once.
• Reorder - Gripper icon on the far left that allows user to reorder each item relative to its peers.
• Multi-Select - Provides a checkbox for each tree item that enables multi select, this is used in conjunction with a toolbar to provide for batch actions on multiple selections
• Single-Select - Is indicated as any list item selection is indicated, with a fill and outline not a radio or explicit control.
• Icon / Line level type indicator - This icon on the left side is used to indicate the object type, e.g. folder, file, image, pdf, etc. It provides for a faster scanning experience.
• Line level Summary - This is small text to the right of the line item used to expose a high level detail of the contents (e.g. the number of items in a folder).
• Line level Toolbar - Allows the user to take action directly on a line item (Add/Rename/Duplicate/Delete)
• Truncation & Wrapping - The tree contents can be configured to either truncate or wrap.