MVC Tree Views

A WTreeView displays tree data (with additional properties available in extra columns). The archetypal application is a file system browser: the filesystem tree is displayed in the first column, and additional columns annotate properties of files.

As with other MVC item views, the actual data is provided by a WAbstractItemModel. This is a variation of the classical MVC strategy, where the View displays data provided by a Model. The View delegates the rendering of each individual item (i.e. table cell) to an Item Delegate to render (as a widget) the individual items, allowing this to be easily customized.

A more direct approach to showing a tree is to use the WTree or WTreeTable widgets which do not enforce this Model/View separation and allow you to directly specify the widgets that renders each cell. Compared to this, a WTreeView supports virtual scrolling (have you ever seen that for a tree ?), column sorting and resize handles, and row headers which allow you to scroll through many columns of additional data while keeping the first column within view. Its main restriction is that each row must have the same height.

The example below shows a tree view that is seeded with a custom hierarchical model which displays a revision in a git repository.

Example
Type
File
  • .dprint.json
    • .editorconfig
      • .eslintignore
        • .eslintrc.yml
          • .gitignore
            • Folder
              .vscode/
              • Text
                CMakeLists.txt
                • Changelog
                  • Doxyfile
                    • INSTALL
                      • INSTALL.html
                        • INSTALL.win32.html
                          • LICENSE
                            • Markdown
                              README.md
                              • ReleaseNotes.html
                                • WConfig.h.in
                                  • WtInstall.cmake
                                    • Folder
                                      cmake/
                                      • Folder
                                        doc/
                                        • Folder
                                          examples/
                                          1 of 3

                                          source 
                                          #include <Wt/WTreeView.h>

#include "GitModel.cpp"
#define GIT_REPOSITORY "/path/to/repository/.git"

using namespace Wt;

auto treeView = std::make_unique<WTreeView>();
treeView->resize(600, 400);

auto model = std::make_shared<GitModel>(GIT_REPOSITORY);
treeView->setModel(model);

treeView->setRowHeight(24);
treeView->setHeaderHeight(24);
treeView->setSortingEnabled(false);
treeView->setSelectionMode(SelectionMode::Single);
treeView->setEditTriggers(EditTrigger::None);

                                          Note The implementation of GitModel is discussed in Item Models

                                          Other Features

                                          The tree view shares a great deal of functionality with its sibling table view (which both reimplement WAbstractItemView), such as customizing cell rendering, editing and row headers. See MVC Table Views.

                                          Top