Component options for dropdowntree

[joneff]

Dependencies

Component options

enum DropdownTreeSize { small, medium, large };
enum DropdownTreeRounded { small, medium, large, pill };
enum DropdownTreeFillMode { solid, flat, outline };

class DropdownTree {
   size: (null | DropdownTreeSize) = DropdownTreeSize.medium;
   rounded: (null | DropdownTreeRounded) = DropdownTreeRounded.medium;
   fillMode: (null | DropdownTreeFillMode) = DropdownTreeFillMode.solid;
}

Rendering

• Rendering input part

<!-- default rendering -->
<span class="k-dropdowntree k-picker k-picker-md k-rounded-md k-picker-solid">
    <span class="k-input-inner"><span class="k-input-value-text"><span></span>
    <button type="button" class="k-input-button k-button k-icon-button k-button-md k-button-solid k-button-solid-base">
        <span class="k-button-icon k-icon k-i-arrow-s"></span>
    </button>
</span>

<!-- canonical rendering -->
<span class="
    k-dropdowntree
    k-picker
    k-picker-{size}
    k-rounded-{rounded}
    k-picker-{fillMode}

    {valid && 'k-valid'}
    {invalid && 'k-invalid'}
    {loading && 'k-loading'}
    {required && 'k-required'}
    {disabled && 'k-disabled'}
">
    {showInputIcon && inputIconName !== '' && <span class="k-input-icon k-icon k-i-{inputIconName}"></span>}
    {inputPrefix && <span class="k-input-prefix">...</span>}
    <span class="k-input-inner">
        <span class="k-input-value-icon k-icon k-i-{valueIcon}"><span>
        <span class="k-input-value-text">{valueText === '&#8203;' ? ' : valueText}<span>
    </span>
    {inputPrefix && <span class="k-input-suffix">...</span>}
    {showValidationIcon && valid && <span class="k-input-validation-icon k-icon k-i-check"></span>}
    {showValidationIcon && invalid && <span class="k-input-validation-icon k-icon k-i-warning"></span>}
    {showLoadingIcon && loading && <span class="k-input-loading-icon k-icon k-i-loading"></span>}
    {showClearValue && text !== '' && <span class="k-clear-value"><span class="k-icon k-i-x"></span></span>}
    <button type="button" class="k-input-button k-button k-icon-button k-button-{size} k-button-{fillMode} k-button-{fillMode}-base">
        <span class="k-button-icon k-icon k-i-arrow-s"></span>
    </button>
</span>

• Rendering popup part

• 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>

• 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