Treeview

Der Treeview eignet sich ideal, um hierarchische Daten übersichtlich darzustellen. Organisieren Sie Kategorien, Unterseiten oder Verzeichnisse in einer hierarchische Baumstruktur.

In diesem Artikel lesen Sie folgende Fragen:

Treeview Properties

Treeview Funktionalitäten

Tipp! Hier sehen Sie mehr über die Komponente.

1. Treeview Properties

Properties

Beschreibung

ID

Bezeichnung / Benamung der Headline

Color scheme

Initiale Farbschemen:

  • Normal: schwarz

  • Default: blau

  • Success: grün

  • Danger: rot

Konfiguriert in Color Schemes

CSS class

Elemente einer Gruppe/Klasse zuordnen, für die dann bestimmte Formatierungen gelten

Option 1: in Properties bestehende Bootstrap-Klassen einfügen

Option 2: über Hauptmenü in den Page Templates (für “alles verfügbar”)

Option 3: Page definitions (nur für diese Seite)

Tab index

Bei Navigation in der Page mit Tastatur (Tab), lässt sich mit dem Tab index die Reihenfolge festlegen, wo der Cursor als nächstes aktiv wird.

Access

Access rights der Komponente:

  • Click: Berechtigung zum Klicken um weitere Actions auslösen zu können

  • Read data: Berechtiung die ausgegebenen Daten sehen zu dürfen

Data layer

Data layer der Tabelle, View oder einer Abfrage.

Height

Feste höhe der Komponente (des Rahmens) 

Item

 

Parent Item

 

Item template

Für die Darstellung der Gallery kann aus vordefinierten Item Templates gewählt oder ein eigenes Template erstellt werden.

Vordefinierte Templates:

  • Contact
  • Picture and text

  • Picture large / medium / small 

  • One / two line(s)

  • Side by Side

No data text

Anzeigetext, falls keine Daten zur Anzeige verfügbar sind.

Display settings

 

Initial state

  • Hidden (initial soll die Komponente ausgeblendet werden) 
  • Disabled (initial soll die Komponente deaktiviert sein)

2. Treeview Funktionalitäten 

Events & Actions

Kategorisierung

Action

Beschreibung

State

enable()

Enable the combo box.

disable()

Disable the combo box.

setEnabled(enabled)

Enable/disable the combo box.
enabled: Flag to indicate enabled or disabled.

show()

Shows the combo box.

hide()

Hides the combo box.

setVisible(visible)

Show/hide the combo box.
visible: Flag to indicate shown or hidden.

focus()

Sets focus on the combo box.

Appearance

 

 

 

 

 

setTitle(title)

Set the title of the chart.
text: The title to set.

setTitleText(title)

Set the title of the tree view.
title: The text title to set.

setTitleHtml(title)

Set the title of the tree view.
title: The html title to set.

setFooter(footer)

Set the footer of the tree view.
footer: The footer to set.

setFooterText(footer)

Set the footer of the tree view.
footer: The footer text to set.

setFooterHtml(footer)

Set the footer of the tree view.
footer: The html footer to set.

Data

refresh()

Refresh data.

Event

Beschreibung

ItemClicked

This event fires when the item was clicked.

ItemExpanded

This event fires when the item is expanded.

ItemCollapsed

This event fires when the item is collapsed.