v7.3.0

Tree
Feature

Feature that makes the grid work more like a tree. Included by default in TreeGrid. Requires exactly one TreeColumn among grids columns. That column will have its renderer replaced with a tree renderer that adds padding and icon to give the appearance of a tree. The original renderer is preserved and also called.

This feature is disabled by default. When enabled, the feature cannot be disabled during runtime.

Keyboard shortcuts

This feature has the following default keyboard shortcuts:

Keys Action Action description
Space toggleCollapseByKey When focus on a parent node, this expands or collapses its children
ArrowRight expandIfSingleColumn Expands a focused parent node if grid consist of one column only
Shift+ArrowRight expandByKey Expands a focused parent node
ArrowLeft collapseIfSingleColumn Collapses a focused parent node if grid consist of one column only
Shift+ArrowLeft collapseByKey Collapses a focused parent node
Please note that Ctrl is the equivalent to Command and Alt is the equivalent to Option for Mac users

For more information on how to customize keyboard shortcuts, please see our guide

See also

No results

Configs

Configs are options you supply in a configuration object when creating an instance of this class

Properties

Properties are getters/setters or publicly accessible variables on this class
  • isTree : Booleantrue
    READONLY
    static
    ADVANCED
    Identifies an object as an instance of Tree class, or subclass thereof.

Functions

Functions are methods available for calling on the class
    • onElementClick( )
      private

      Called when user clicks somewhere in the grid. Expand/collapse node on icon click.

    • toggleCollapseByKey( )
      private

      Called on key down in grid. Expand/collapse node on Space

    • collapseAll( )
      : Promise
      ASYNC
      ON-OWNER

      Collapse all nodes. This function is exposed on Grid and can thus be called as grid.collapseAll()

    • expandAll( )
      : Promise
      ASYNC
      ON-OWNER

      Expand all nodes. This function is exposed on Grid and can thus be called as grid.expandAll()

    Events

    Events are triggered for certain actions in this class and can be listened for to react to those actions in your code

    Event handlers

    Event handlers are callbacks called as a result of certain actions in this class
    id: tree

    Source path

    Grid/feature/Tree.js

    Demo

    examples/tree

    Contents