Tree View Demo kartik\tree\TreeView

Latest Stable Version Latest Unstable Version Total Downloads Monthly Downloads Daily Downloads
Thankful to Krajee!
to get more out of us.

NOTE: This extension depends on the kartik-v/yii2-widget-activeform and creocoder/yii2-nested-sets extensions. Check the composer.json for this extension's requirements and dependencies that may be updated by composer.

Demonstration of the TreeView widget. This is part of the yii2-tree extension package from Krajee with inbuilt jQuery plugins and Yii widgets for tree node manipulation and management using nested sets. The yii2-tree-manager module includes two major widgets TreeView and TreeViewInput. View the complete documentation for details. Click here to configure this demo.

Click here if looking for the TreeViewInput Demo


Categories
×
Root
  •  
    Phones and Tablets
    •  
      Apple
      •  
        iPhone
        •  
          iPhone 6
        •  
          iPhone 5s
        •  
          iPhone 4
      •  
        iPad
        •  
          iPad Air
        •  
          iPad v4
        •  
          iPad v3
    •  
      Samsung
      •  
        Galaxy S
        •  
          Galaxy S5
        •  
          Galaxy S4
      •  
        Galaxy Note
        •  
          Galaxy Note 4
        •  
          Galaxy Note 3
      •  
        Galaxy Tab
    •  
      Sony
  •  
    Notebooks and Desktops
    •  
      Apple
      •  
        Macbook
        •  
          Macbook Air
        •  
          Macbook Pro
      •  
        Mac Mini
      •  
        iMac
        •  
          iMac Pro
        •  
          iMac Server
    •  
      Lenovo
      •  
        Ideapad
        •  
          U Series
        •  
          Z Series
      •  
        Thinkpad
        •  
          T Series
        •  
          Z Series
  •  
    111
Phones and Tablets

Admin Settings

Important

Take care and prevent entering / updating invalid or junk data on the demo treeview for the benefit of the others. The demo data may not be refreshed frequently but will be reset periodically based on assessment of the data quality on the site.

Configure TreeView Demo


Important Flags
Icon Settings
// listData for icon type = 'list'
['folder-close'=>'Folder','file'=>'File','phone'=>'Phone','bell'=>'Bell']
Headings
Configuration Code
echo \kartik\tree\TreeView::widget([
    'query' => \app\models\Product::find()->addOrderBy('root, lft'),
    'headingOptions' => ['label' => 'Categories'],
    'rootOptions' => ['label'=>'<span class="text-primary">Root</span>'],
    'fontAwesome' => true,
    'isAdmin' => true,
    'displayValue' => 1,
    'iconEditSettings'=> [
        'show' => 'list',
        'listData' => [
            'folder' => 'Folder',
            'file' => 'File',
            'mobile' => 'Phone',
            'bell' => 'Bell',
        ]
    ],
    'softDelete' => true,
    'cacheSettings' => ['enableCache' => true]
]);