Component options for treeview

[PaskalevStoyan]

Dependencies

Component options

enum TreeViewSize { small, medium, large };

class TreeView {
   size: (null | TreeViewSize) = TreeViewSize.medium;
}

Rendering

• Expanded / Collapsed Icons

<kendo-treeview class="k-treeview k-treeview-md">
  <ul class="k-treeview-lines k-treeview-group">
    <li class="k-treeview-item">
      <div class="k-treeview-top">
        <span class="k-treeview-toggle">
          <span class="k-icon k-i-expand"></span>
        </span>
        <span class="k-treeview-leaf">
          <span class="k-treeview-leaf-text"> ... </span>
        </span>
      </div>
    </li>
    <li class="k-treeview-item">
      <div class="k-treeview-mid">
        <span class="k-treeview-toggle">
          <span class="k-icon k-i-expand"></span>
        </span>
        <span class="k-treeview-leaf">
          <span class="k-treeview-leaf-text"> ... </span>
        </span>
      </div>
    </li>
    <li class="k-treeview-item">
      <div class="k-treeview-bot">
        <span class="k-treeview-toggle">
          <span class="k-icon k-i-collapse"></span>
        </span>
        <span class="k-treeview-leaf">
          <span class="k-treeview-leaf-text"> ... </span>
        </span>
      </div>
    </li>
  </ul>
</kendo-treeview>

• Custom Icons

<kendo-treeview class="k-treeview k-treeview-md">
  <ul class="k-treeview-lines k-treeview-group">
    <li class="k-treeview-item">
      <div class="k-treeview-top">
        <span class="k-treeview-leaf">
          <span class="k-icon k-i-file"></span>
          <span class="k-treeview-leaf-text">...</span>
        </span>
      </div>
    </li>
    <li class="k-treeview-item">
      <div class="k-treeview-mid">
        <span class="k-treeview-leaf">
          <span class="k-icon k-i-file"></span>
          <span class="k-treeview-leaf-text">...</span>
        </span>
      </div>
    </li>
    <li class="k-treeview-item">
      <div class="k-treeview-bot">
        <span class="k-treeview-leaf">
          <span class="k-icon k-i-file"></span>
          <span class="k-treeview-leaf-text">...</span>
        </span>
      </div>
    </li>
  </ul>
</kendo-treeview>

• TreeView with Checkboxes

<kendo-treeview class="k-treeview k-treeview-md">
  <ul class="k-treeview-lines k-treeview-group">
    <li class="k-treeview-item">
      <div class="k-treeview-top">
        <kendo-checkbox class="k-checkbox-wrapper">
          <input type="checkbox" class="k-checkbox k-checkbox-md k-rounded-md" />
          <label class="k-checkbox-label" ></label>
        </kendo-checkbox>
        <span class="k-treeview-leaf">
          <span class="k-treeview-leaf-text"> ... </span>
        </span>
      </div>
    </li>
  </ul>
</kendo-treeview>

Documentation

• Variables

[joneff]

Shipped