Class kartik\tree\TreeView

Inheritancekartik\tree\TreeView » kartik\base\Widget » yii\base\Widget
Uses Traitskartik\base\TranslationTrait, kartik\base\WidgetTrait
Subclasseskartik\tree\TreeViewInput
Available since version1.0

An enhanced tree view widget for Yii Framework 2 that allows management and manipulation of hierarchical data using nested sets.

Public Properties

Hide inherited properties

PropertyTypeDescriptionDefined By
$alertFadeDuration int Animation duration (ms) for fading in and out alerts that are displayed during manipulation of nodes. kartik\tree\TreeView
$allowNewRoots bool Allow new root creation. kartik\tree\TreeView
$buttonGroupOptions array The HTML attributes for the button groups within the toolbar. kartik\tree\TreeView
$buttonIconOptions string The default HTML attributes for the toolbar button icons kartik\tree\TreeView
$buttonOptions string The default HTML attributes for the toolbar buttons kartik\tree\TreeView
$cacheSettings array Cache settings for displaying the detail form content for each tree node via ajax. kartik\tree\TreeView
$checkedNodeOptions string The HTML attributes for the indicator which will represent a checked checkbox. kartik\tree\TreeView
$childNodeIconOptions array The HTML attributes for the child node icon. kartik\tree\TreeView
$clientMessages array The configuration of various client alert messages kartik\tree\TreeView
$collapseNodeOptions string The HTML attributes for the indicator for collapsing a node. kartik\tree\TreeView
$defaultChildNodeIcon string The icon markup for the child node if no icon was setup in the database. kartik\tree\TreeView
$defaultParentNodeIcon string The icon markup for the collapsed parent node if no icon was setup in the database. kartik\tree\TreeView
$defaultParentNodeOpenIcon string The icon markup for the opened parent node if no icon was setup in the database. kartik\tree\TreeView
$detailOptions array The HTML attributes for the detail form container which will display the details of the selected node kartik\tree\TreeView
$displayValue int The initial value (key) to be selected in the tree and displayed in the detail form. kartik\tree\TreeView
$emptyNodeMsg string Message shown on tree initialization when either the entire tree is empty or no node is found for the selected displayValue. kartik\tree\TreeView
$emptyNodeMsgOptions array HTML attributes for the empty node message displayed. kartik\tree\TreeView
$expandNodeOptions string The HTML attributes for the indicator for expanding a node. kartik\tree\TreeView
$fontAwesome bool Whether to use font awesome icons. kartik\tree\TreeView
$footerOptions array The HTML attributes for the tree footer container. kartik\tree\TreeView
$footerTemplate string The template for rendering the footer kartik\tree\TreeView
$headerOptions array The HTML attributes for the tree header container kartik\tree\TreeView
$headerTemplate string The template for rendering the header kartik\tree\TreeView
$headingOptions string The HTML attributes for the heading. kartik\tree\TreeView
$i18n array The the internalization configuration for this widget kartik\base\Widget
$iconEditSettings array Settings to edit the icon. kartik\tree\TreeView
$isAdmin bool Whether the tree is to be allowed for editing in admin mode. kartik\tree\TreeView
$mainTemplate \kartik\tree\the Main template for rendering the tree view navigation widget and the node detail view form. kartik\tree\TreeView
$multiple bool Whether to allow multiple selection of checkboxes. kartik\tree\TreeView
$nodeActions array The actions for managing, deleting, and moving the tree nodes. kartik\tree\TreeView
$nodeAddlViews array The list of additional view files that will be used to append content at various sections in the nodeView form. kartik\tree\TreeView
$nodeCheckboxOptions array The HTML attributes for the node checkbox indicator for all items in the tree kartik\tree\TreeView
$nodeFormOptions array The HTML attributes for the node detail form. kartik\tree\TreeView
$nodeToggleOptions array The HTML attributes for the node toggle indicator for each parent item in the tree kartik\tree\TreeView
$nodeView string The view file that will render the form for editing the node. kartik\tree\TreeView
$options array The HTML attributes for the input that will store the selected nodes for the widget kartik\tree\TreeView
$parentNodeIconOptions array The HTML attributes for the parent node icon. kartik\tree\TreeView
$pluginEvents array Widget JQuery events. kartik\base\Widget
$pluginOptions array Widget plugin options kartik\base\Widget
$query \yii\db\ActiveQuery The query that will be used as the data source for the TreeView. kartik\tree\TreeView
$rootNodeCheckboxOptions array The HTML attributes for the root node's checkbox indicator kartik\tree\TreeView
$rootNodeToggleOptions array The HTML attributes for the root node's toggle indicator kartik\tree\TreeView
$rootOptions array The HTML attributes for the topmost root node container. kartik\tree\TreeView
$searchClearOptions string The HTML attributes for the search clear indicator kartik\tree\TreeView
$searchContainerOptions string The HTML attributes for the search container kartik\tree\TreeView
$searchOptions string The HTML attributes for the search input kartik\tree\TreeView
$showCheckbox bool Whether to show a checkbox before each tree node label to allow multiple node selection. kartik\tree\TreeView
$showFormButtons bool Whether to show the form action buttons in the node details form/view. kartik\tree\TreeView
$showIDAttribute bool Whether to show the key attribute (ID) in the node details form/view. kartik\tree\TreeView
$showInactive bool Whether to show inactive nodes kartik\tree\TreeView
$showTooltips bool Show toolbar button tooltips (using bootstrap tooltip plugin) kartik\tree\TreeView
$softDelete bool Whether the record will be soft deleted, when remove button is clicked. kartik\tree\TreeView
$toolbar array The settings for the tree management toolbar kartik\tree\TreeView
$toolbarOptions array The HTML attributes for the toolbar. kartik\tree\TreeView
$treeOptions array The HTML attributes for the tree selector container kartik\tree\TreeView
$treeWrapperOptions string The HTML attributes for the wrapper container for the tree header, body, and footer. kartik\tree\TreeView
$uncheckedNodeOptions string The HTML attributes for the indicator which will represent an unchecked checkbox. kartik\tree\TreeView
$value string The comma separated initial value (keys) to be checked and selected in the tree kartik\tree\TreeView
$wrapperTemplate \kartik\tree\the Wrapper template for rendering the tree view navigation widget kartik\tree\TreeView

Protected Properties

Hide inherited properties

PropertyTypeDescriptionDefined By
$_dataVar string The element's HTML5 data variable name storing the pluginOptions kartik\base\Widget
$_encOptions string The Json encoded options kartik\base\Widget
$_hashVar string The hashed global variable name storing the pluginOptions kartik\base\Widget
$_iconPrefix string The icon prefix kartik\tree\TreeView
$_iconsList mixed The icons list kartik\tree\TreeView
$_module kartik\tree\Module The tree management module. kartik\tree\TreeView
$_msgCat string Translation message file category name for i18n kartik\base\Widget
$_nodes array The queried tree nodes kartik\tree\TreeView
$_pluginName string The name of the jQuery plugin kartik\base\Widget

Public Methods

Hide inherited methods

MethodDescriptionDefined By
begin() kartik\tree\TreeView
getConfig() Generates the configuration for the widget based on module level defaults kartik\tree\TreeView
init() kartik\tree\TreeView
initI18N() Yii i18n messages configuration for generating translations kartik\base\TranslationTrait
initOptions() Initialize all options & settings for the widget kartik\tree\TreeView
module() Returns the tree view module kartik\tree\TreeView
registerAssets() Registers the client assets for the widget kartik\tree\TreeView
renderDetail() Renders the markup for the detail form to edit/view the selected tree node kartik\tree\TreeView
renderFooter() Renders the markup for the tree footer container kartik\tree\TreeView
renderHeader() Renders the markup for the tree header container kartik\tree\TreeView
renderHeading() Renders the markup for the tree heading kartik\tree\TreeView
renderRoot() Renders the root markup for the tree kartik\tree\TreeView
renderSearch() Renders the markup for the search input kartik\tree\TreeView
renderToolbar() Renders the markup for the button actions toolbar kartik\tree\TreeView
renderTree() Renders the markup for the tree hierarchy - uses a fast non-recursive mode of tree traversal. kartik\tree\TreeView
renderWidget() Renders the widget markup kartik\tree\TreeView
renderWrapper() Renders the tree wrapper container kartik\tree\TreeView
run() kartik\tree\TreeView
widget() kartik\tree\TreeView

Protected Methods

Hide inherited methods

MethodDescriptionDefined By
addAsset() Adds an asset to the view kartik\base\WidgetTrait
getCheckboxIcon() Gets the checkbox icon based on fontAwesome setting kartik\tree\TreeView
getIconsList() Renders the markup for the detail form to edit/view the selected tree node kartik\tree\TreeView
getNodeIcon() Gets the default node icon markup kartik\tree\TreeView
getPluginScript() Returns the plugin registration script kartik\base\WidgetTrait
getToggleIcon() Gets the default toggle icon based on fontAwesome setting kartik\tree\TreeView
hashPluginOptions() Generates a hashed variable to store the pluginOptions. The following special data attributes will also be setup for the input widget, that can be accessed through javascript : - 'data-krajee-{name}' will store the hashed variable storing the plugin options. The {name} tag will represent the plugin name (e.g. select2, typeahead etc.) - Fixes issue #6. kartik\base\WidgetTrait
initSelectedNode() Initializes the selected node kartik\tree\TreeView
registerPlugin() Registers a specific plugin and the related events kartik\base\WidgetTrait
registerPluginOptions() Registers plugin options by storing it in a hashed javascript variable kartik\base\WidgetTrait
renderCheckboxIcon() Renders the checkbox icon markup based on fontAwesome setting kartik\tree\TreeView
renderCheckboxIconContainer() Renders the checkbox icon container kartik\tree\TreeView
renderIcon() Renders a generic icon using icon suffix kartik\tree\TreeView
renderNodeIcon() Render the default node icon markup kartik\tree\TreeView
renderToggleIcon() Renders the default toggle icon markup based on fontAwesome setting kartik\tree\TreeView
renderToggleIconContainer() Renders the toggle icon container kartik\tree\TreeView
setDataVar() Sets HTML5 data variable kartik\base\WidgetTrait
usesTrait() Check if the trait is used by a specific class or recursively by any of the parent classes or parent traits kartik\tree\TreeView
validateSourceData() Validation of source query data kartik\tree\TreeView

Constants

Hide inherited constants

ConstantValueDescriptionDefined By
BTN_CREATE 'create' kartik\tree\TreeView
BTN_CREATE_ROOT 'create-root' Toolbar buttons kartik\tree\TreeView
BTN_MOVE_DOWN 'move-down' kartik\tree\TreeView
BTN_MOVE_LEFT 'move-left' kartik\tree\TreeView
BTN_MOVE_RIGHT 'move-right' kartik\tree\TreeView
BTN_MOVE_UP 'move-up' kartik\tree\TreeView
BTN_REFRESH 'refresh' kartik\tree\TreeView
BTN_REMOVE 'remove' kartik\tree\TreeView
BTN_SEPARATOR 'separator' kartik\tree\TreeView
ICON_CSS 1 The icon types for each node stored in database kartik\tree\TreeView
ICON_RAW 2 kartik\tree\TreeView
MOVE_DOWN 'd' kartik\tree\TreeView
MOVE_LEFT 'l' kartik\tree\TreeView
MOVE_RIGHT 'r' kartik\tree\TreeView
MOVE_UP 'u' The node reorder/movable directions kartik\tree\TreeView

Property Details

$_iconPrefix protected property

The icon prefix

protected string $_iconPrefix 'glyphicon glyphicon-'
$_iconsList protected property

The icons list

protected mixed $_iconsList null
$_module protected property

The tree management module.

protected kartik\tree\Module $_module null
$_nodes protected property

The queried tree nodes

protected array $_nodes = []
$alertFadeDuration public property

Animation duration (ms) for fading in and out alerts that are displayed during manipulation of nodes.

public int $alertFadeDuration 1000
$allowNewRoots public property

Allow new root creation.

public bool $allowNewRoots true
$buttonGroupOptions public property

The HTML attributes for the button groups within the toolbar.

public array $buttonGroupOptions = ['class' => 'btn-group-sm']
$buttonIconOptions public property

The default HTML attributes for the toolbar button icons

$buttonOptions public property

The default HTML attributes for the toolbar buttons

public string $buttonOptions = ['class' => 'btn btn-default']
$cacheSettings public property

Cache settings for displaying the detail form content for each tree node via ajax. The following options are supported: enableCache: bool, defaults to true. cacheTimeout: int, the cache timeout in milliseconds. Defaults to 300000 (or 5 minutes). flags). Defaults to false.

public array $cacheSettings = []
$checkedNodeOptions public property

The HTML attributes for the indicator which will represent a checked checkbox. The following special options are recognized:

  • 'label': string, the label for the indicator. If not set will default to:
    • <span class="fa fa-check-square-o"></span> if fontAwesome is true
    • <span class="glyphicon glyphicon-checked"></span> if fontAwesome is false
$childNodeIconOptions public property

The HTML attributes for the child node icon.

public array $childNodeIconOptions = ['class' => 'text-info']
$clientMessages public property

The configuration of various client alert messages

public array $clientMessages = []
$collapseNodeOptions public property

The HTML attributes for the indicator for collapsing a node.

  • 'label': string, the label for the indicator. If not set will default to:
    • <span class="fa fa-minus-square-o"></span> if fontAwesome is true
    • <span class="glyphicon glyphicon-collapse-down"></span> if fontAwesome is false
$defaultChildNodeIcon public property

The icon markup for the child node if no icon was setup in the database.

$defaultParentNodeIcon public property

The icon markup for the collapsed parent node if no icon was setup in the database.

$defaultParentNodeOpenIcon public property

The icon markup for the opened parent node if no icon was setup in the database.

$detailOptions public property

The HTML attributes for the detail form container which will display the details of the selected node

public array $detailOptions = []
$displayValue public property

The initial value (key) to be selected in the tree and displayed in the detail form. Defaults to 1.

public int $displayValue 1
$emptyNodeMsg public property

Message shown on tree initialization when either the entire tree is empty or no node is found for the selected displayValue.

public string $emptyNodeMsg null
$emptyNodeMsgOptions public property

HTML attributes for the empty node message displayed.

public array $emptyNodeMsgOptions = ['class' => 'kv-node-message']
$expandNodeOptions public property

The HTML attributes for the indicator for expanding a node. The following special options are recognized:

  • 'label': string, the label for the indicator. If not set will default to:
    • <span class="fa fa-plus-square-o"></span> if fontAwesome is true
    • <span class="glyphicon glyphicon-expand"></span> if fontAwesome is false
$fontAwesome public property

Whether to use font awesome icons. Defaults to false.

public bool $fontAwesome false
$footerOptions public property

The HTML attributes for the tree footer container.

public array $footerOptions = []
$footerTemplate public property

The template for rendering the footer

public string $footerTemplate "{toolbar}"
$headerOptions public property

The HTML attributes for the tree header container

public array $headerOptions = []
$headerTemplate public property

The template for rendering the header

$headingOptions public property

The HTML attributes for the heading. The following additional option is recognized: label: the label to display for the heading

public string $headingOptions = ['class' => 'kv-tree-heading']
$iconEditSettings public property

Settings to edit the icon. The following settings are recognized:

  • show: string, whether to display the icons selection as a list. If set to 'text', the icon will be shown as a plain text input along with icon type. If set to 'list', a list will be shown. If set to 'none', then no icon settings will be shown for editing.
  • type: string, the iconTypeAttribute value, defaults to TreeView::ICON_CSS. Should be one of TreeView::ICON_CSS or TreeView::ICON_RAW.
  • listData: array, the configuration of the icon list data to be shown for selection. This is mandatory if you set show to 'list'. You must set the data as $key => $value format. The list will be parsed to display the icon list and will depend on the type.

    • If type = TreeView::ICON_CSS: $key will be the icon suffix name and $value will be the description for the icon. The icon markup will be automatically parsed then based on whether its a glyphicon or font-awesome when fontAwesome property is true. For example
       [
           'folder-close' => 'Folder',
           'file' => 'File',
           'tag' => 'Tag'
       ]
      
    • If type = TreeView::ICON_RAW: $key is the icon markup to be stored and $value is the output markup to be displayed as a selection in the list. For example:
       [
           '<img src="images/folder.jpg">' => 'Folder',
           '<img src="images/file.jpg">' => 'File',
           '<img src="images/tag.jpg">' => 'Tag',
       ]
      
public array $iconEditSettings = ['show' => 'text''type' => self::ICON_CSS'listData' => []]
$isAdmin public property

Whether the tree is to be allowed for editing in admin mode. This will display all nodes and will allow to modify internal tree node flags. Defaults to false.

public bool $isAdmin false
$mainTemplate public property

Main template for rendering the tree view navigation widget and the node detail view form.

public \kartik\tree\the $mainTemplate =
$multiple public property

Whether to allow multiple selection of checkboxes. Defaults to true. If set to false will not show a checkbox and allow only single selection of tree nodes.

public bool $multiple true
$nodeActions public property

The actions for managing, deleting, and moving the tree nodes. The keys must be one of 'manage', 'save', 'remove', and 'move'. Defaults to:

[
    'save' => Url::to(['/treemanager/node/save']),
    'manage' => Url::to(['/treemanager/node/manage']),
    'remove' => Url::to(['/treemanager/node/remove']),
    'move' => Url::to(['/treemanager/node/move']),
]
public array $nodeActions = []
$nodeAddlViews public property

The list of additional view files that will be used to append content at various sections in the nodeView form.

public array $nodeAddlViews = []
$nodeCheckboxOptions public property

The HTML attributes for the node checkbox indicator for all items in the tree

public array $nodeCheckboxOptions = ['class' => 'text-success']
$nodeFormOptions public property

The HTML attributes for the node detail form.

public array $nodeFormOptions = []
$nodeToggleOptions public property

The HTML attributes for the node toggle indicator for each parent item in the tree

public array $nodeToggleOptions = ['class' => 'text-muted']
$nodeView public property

The view file that will render the form for editing the node.

public string $nodeView null
$options public property

The HTML attributes for the input that will store the selected nodes for the widget

public array $options = []
$parentNodeIconOptions public property

The HTML attributes for the parent node icon.

public array $parentNodeIconOptions = ['class' => 'text-warning']
$query public property

The query that will be used as the data source for the TreeView. For example: Tree::find()->addOrderBy('root, lft')

public \yii\db\ActiveQuery $query null
$rootNodeCheckboxOptions public property

The HTML attributes for the root node's checkbox indicator

public array $rootNodeCheckboxOptions = ['class' => 'text-success']
$rootNodeToggleOptions public property

The HTML attributes for the root node's toggle indicator

public array $rootNodeToggleOptions = ['class' => 'text-muted']
$rootOptions public property

The HTML attributes for the topmost root node container. The following special options are recognized:

  • label: string, the label for the topmost root node (this is not HTML encoded). Defaults to 'Root'. Set this to empty to not display a label.
public array $rootOptions = ['class' => 'text-primary']
$searchClearOptions public property

The HTML attributes for the search clear indicator

public string $searchClearOptions = ['class' => 'close']
$searchContainerOptions public property

The HTML attributes for the search container

public string $searchContainerOptions = ['class' => 'kv-search-sm']
$searchOptions public property

The HTML attributes for the search input

public string $searchOptions = ['class' => 'input-sm']
$showCheckbox public property

Whether to show a checkbox before each tree node label to allow multiple node selection.

public bool $showCheckbox false
$showFormButtons public property

Whether to show the form action buttons in the node details form/view.

public bool $showFormButtons true
$showIDAttribute public property

Whether to show the key attribute (ID) in the node details form/view.

public bool $showIDAttribute true
$showInactive public property

Whether to show inactive nodes

public bool $showInactive false
$showTooltips public property

Show toolbar button tooltips (using bootstrap tooltip plugin)

public bool $showTooltips true
$softDelete public property

Whether the record will be soft deleted, when remove button is clicked. Defaults to true. The following actions are possible:

  • If true, this will just set the active property of node to false.
  • If false, it will attempt to hard delete the whole record.
public bool $softDelete true
$toolbar public property

The settings for the tree management toolbar

public array $toolbar = []
$toolbarOptions public property

The HTML attributes for the toolbar.

public array $toolbarOptions = []
$treeOptions public property

The HTML attributes for the tree selector container

public array $treeOptions = ['style' => 'height:410px']
$treeWrapperOptions public property

The HTML attributes for the wrapper container for the tree header, body, and footer.

public string $treeWrapperOptions = ['class' => 'kv-tree-wrapper form-control']
$uncheckedNodeOptions public property

The HTML attributes for the indicator which will represent an unchecked checkbox. The following special options are recognized:

  • 'label': string, the label for the indicator. If not set will default to:
    • <span class="fa fa-square-o"></span> if fontAwesome is true
    • <span class="glyphicon glyphicon-unchecked"></span> if fontAwesome is false
$value public property

The comma separated initial value (keys) to be checked and selected in the tree

public string $value ''
$wrapperTemplate public property

Wrapper template for rendering the tree view navigation widget

public \kartik\tree\the $wrapperTemplate "{header}\n{tree}{footer}"

Method Details

begin() public static method

public static void begin ( $config = [] )
$config
getCheckboxIcon() protected method

Gets the checkbox icon based on fontAwesome setting

protected string getCheckboxIcon ( $checked false )
$checked bool

Whether 'checked'

getConfig() public static method

Generates the configuration for the widget based on module level defaults

public static array getConfig ( $config = [] )
$config array

The widget configuration

throws \yii\base\InvalidConfigException
getIconsList() protected method

Renders the markup for the detail form to edit/view the selected tree node

protected string getIconsList ( )
getNodeIcon() protected method

Gets the default node icon markup

protected string getNodeIcon ( $type )
$type int

1 = child, 2 = parent, 3 = parent open

getToggleIcon() protected method

Gets the default toggle icon based on fontAwesome setting

protected string getToggleIcon ( $action 'collapse' )
$action string

Whether 'collapse' or 'expand'

init() public method

public void init ( )
initOptions() public method

Initialize all options & settings for the widget

public void initOptions ( )
initSelectedNode() protected method

Initializes the selected node

protected void initSelectedNode ( )
module() public static method

Returns the tree view module

public static kartik\tree\Module module ( )
registerAssets() public method

Registers the client assets for the widget

public void registerAssets ( )
renderCheckboxIcon() protected method

Renders the checkbox icon markup based on fontAwesome setting

protected string renderCheckboxIcon ( $checked false )
$checked bool

Whether 'checked'

renderCheckboxIconContainer() protected method

Renders the checkbox icon container

protected string renderCheckboxIconContainer ( $root false )
$root
renderDetail() public method

Renders the markup for the detail form to edit/view the selected tree node

public string renderDetail ( )
renderFooter() public method

Renders the markup for the tree footer container

public string renderFooter ( )
renderHeader() public method

Renders the markup for the tree header container

public string renderHeader ( )
renderHeading() public method

Renders the markup for the tree heading

public string renderHeading ( )
renderIcon() protected method

Renders a generic icon using icon suffix

protected string renderIcon ( $icon, $options = [] )
$icon string

The icon suffix name

$options array

The HTML attributes for the icon container

renderNodeIcon() protected method

Render the default node icon markup

protected string renderNodeIcon ( $icon, $iconType, $child true )
$icon string

The current node's icon

$iconType int

The current node's icon type, must be one of:

                    - `TreeView::ICON_CSS` or `1`: if the icon css class suffix name is stored in $icon.
                    - `TreeView::ICON_RAW` or `2`: if the raw icon markup is stored in $icon.
$child
renderRoot() public method

Renders the root markup for the tree

public string renderRoot ( )
renderSearch() public method

Renders the markup for the search input

public string renderSearch ( )
renderToggleIcon() protected method

Renders the default toggle icon markup based on fontAwesome setting

protected string renderToggleIcon ( $action 'collapse' )
$action string

Whether 'collapse' or 'expand'

renderToggleIconContainer() protected method

Renders the toggle icon container

protected string renderToggleIconContainer ( $root false )
$root
renderToolbar() public method

Renders the markup for the button actions toolbar

public string renderToolbar ( )
renderTree() public method

Renders the markup for the tree hierarchy - uses a fast non-recursive mode of tree traversal.

public string renderTree ( )
renderWidget() public method

Renders the widget markup

public string renderWidget ( )
renderWrapper() public method

Renders the tree wrapper container

public string renderWrapper ( )
run() public method

public void run ( )
usesTrait() protected static method

Check if the trait is used by a specific class or recursively by any of the parent classes or parent traits

protected static bool usesTrait ( $class, $trait, $autoload false )
$class string

The class name to check

$trait string

The trait class name

$autoload bool

Whether to autoload the class

return bool

Whether the class has used the trait

validateSourceData() protected method

Validation of source query data

protected void validateSourceData ( )
throws \yii\base\InvalidConfigException
widget() public static method

public static void widget ( $config = [] )
$config