Properties

Title

String

Adds a title with the specified text on top of the search box.

TreeSelNode

String

Outputs the selected node text property.

TreeSelId

String

Outputs the selected node id property.

TreeSelParent

String

Outputs the selected node's parent text property.

TreeSelLevel

String

Outputs the selected node level (starting from 1 for the root nodes).

Checkboxes

Boolean

Specifies if checkboxes are to be rendered on left of the nodes.
Each item can specify the initial status using the checked property.

CheckedIds

String

Outputs a comma separated list of checked node ids when Checkboxes is true and whenever a checkbox is clicked.

States

String

A comma separated list of possible states a node can be on. This list is used to cycle the state property of an item between the specified states when the state representation is clicked.

Data

String

Inputs array of items to render in the TreeView, serialized as JSON. Each item supports the following properties:

• text (required): a string to be used as a label for the node.

• id: a string to be used as id for the node. If not specified, text property is used as the id.

• checked: a boolean to specify the initial checked state of the node (when Checkboxes options is set to true).

• state: a string representing the current state value for the node (it must be one of the options specified in the States widget property). The state value is passed as a class name to a box on the left of the node label (only if States widget property is set).
  Use the StyleSheet property to style these boxes.

• class: a class name to be specified for the node to enable style customizations. You can specify multiple classes separated by a space.
  Use a predefined class called icon that inserts a material symbol to the left of the node label.

• expanded: by default, all nodes are collapsed.
  Setting this property to true makes a node to be expanded by default.

• enabled: by default, it is set to true.
  Allows you to disable a specific node so it cannot be selected or expanded/collapsed (the value of expanded property is honored).

• items: an array of child items for the node.
  All previously described properties can be used for child items too.

OutputFormat

String

This property specifies the format of the StatesOutput property.
The following values are accepted (case insensitive):

• json: Outputs the whole tree as JSON whenever an item state is changed.
  Below is the default value.

  [{"text":"zljmovsh","id":"zljmovsh","state":"read","items":

  [{"text":"vmbudt39","id":"vmbudt39","state":"read","items":

  [{"text":"k6uh9c47","id":"k6uh9c47","state":"lock"},

  {"text":"fwzafuhg","id":"fwzafuhg","state":"write"}]},

  {"text":"2iem3m2r","id":"2iem3m2r","state":"read","items":[]}]}]

• xml: Outputs the whole tree as XML whenever an item state is changed.

  <items><item text="b68w6k0u" id="b68w6k0u" state="write"><item text="jzq3122d"

  id="jzq3122d" state="lock"><item text="271iplft" id="271iplft" state="lock">

  </item></item><item text="osom2wib" id="osom2wib" state="lock"><item

  text="20927itm" id="20927itm" state="read"></item></item></item></items>

• json (changed): When an item changes its state, it outputs only the changed item as JSON.

  {"text":"fwzafuhg","id":"fwzafuhg","state":"write"}

• xml (changed): When an item changes its state, it outputs only the changed item as XML.

  <item text="osom2wib" id="osom2wib" state="lock">

StatesOutput

String

Outputs either the whole tree or only the node that has changed in JSON or XML format depending on the OutputFormat property value.

Theme

String

Applies a predefined theme to the widget.
Possible values are: light (default), dark, and night.

StyleSheet

String

Adds arbitrary styles to the widget.
This property can be used to style the state representations and the node labels when setting the class property for the items in Data.

• Setting icons and background color for states read, write, and lock

  The content property of each style is the name of a Material Symbol and hence the proper icon is displayed.

  .read::before {

  content: "visibility";

  background: #4CAF50;

  color: white;

  }

  .write::before {

  content: "edit";

  background: #009688;

  color: white;

  }

  .lock::before {

  content: "lock";

  background: #F44336;

  color: white;

  }

• Setting a disabled class for some nodes

  .disabled {

  font-style: italic;

  color: gray;

  }

  /* Disable mouse interactions with the node, except to expand/collapse */

  /* Only supported on new browsers (https://caniuse.com/css-has) */

  .k-treeview-top:has(.disabled) {

  pointer-events: none;

  }

  .k-treeview-toggle {

  pointer-events: all;

  }

• Changing background, text, and accent colors

  html {

  --background-color: #F0EFFA;

  --text-color: #004640;

  --accent-color: #009688;

  }