# Dotvvm controls

**URL:** <https://forum.dotvvm.com/t/dotvvm-controls/56>\
**Category:** Discussion in Czech\
**Created:** [September 11, 2023, 2:59pm UTC](https://forum.dotvvm.com/t/dotvvm-controls/56 "2023-09-11T14:59:22Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![totacz](https://forum.dotvvm.com/user_avatar/forum.dotvvm.com/totacz/32/37_2.png) [@totacz](https://forum.dotvvm.com/u/totacz)\
**Post date:** [September 11, 2023, 2:59pm UTC](https://forum.dotvvm.com/t/dotvvm-controls/56/1 "2023-09-11T14:59:22Z")

</div>

Zdravím, našeptávač mi ukazuje dot:HierarchyRepeater nebyl by někde příklad?  
Děkuji T.

---

<div class="post-metadata">

**Author:** ![exyi](https://forum.dotvvm.com/user_avatar/forum.dotvvm.com/exyi/32/9_2.png) [@exyi](https://forum.dotvvm.com/u/exyi)\
**Post date:** [September 11, 2023, 7:36pm UTC](https://forum.dotvvm.com/t/dotvvm-controls/56/2 "2023-09-11T19:36:13Z")

</div>

Dobrý den, koukám, že jsme o tom zapomněli napsat dokumentaci. Základní použití je zmíněné v release notes verze 4.1 [Release DotVVM 4.1 · riganti/dotvvm · GitHub](https://github.com/riganti/dotvvm/releases/tag/v4.1.0), detailnější “příklady” můžete kdyžtak najít v našich UI testech: [Add HierarchyRepeater by cafour · Pull Request #1206 · riganti/dotvvm · GitHub](https://github.com/riganti/dotvvm/pull/1206/files#diff-930fa1a09bcdec5a14ee06ba455dee5a1c22916a4856d0e5482b66f67c9d5929R8)

Jeden z příkladů:

- Ve viewmodelu máme kolekci Roots, každý Node má pak property `Children` stejného typu - to tvoří výslednou hierarchii
  - Na `Roots` se odkazuje `DataSource`, na `Children` `ItemChildrenBinding`. To dvě povinné property toho repeateru.

- LevelWrapperTagName je HTML element kterým chcete obalit každou kolekci Nodů (jak Children, tak Root)
- ItemWrapperTagName je HTML element kterým chcete obalit jen konkrétní Node, včetně vnořených prvků. Nejdříve se do stránky vloží template (vnitřek repeateru), pak vnořený LevelWrapperTagName.
- Oba tyto elementy jsou dobrovolné - pokud je neurčíte, tak se obsah nebude vnořovat
- Atributy na wrapper elementy můžete přidat použitím prefixu Level/Item, viz LevelClass a ItemClass v příkladu níže

```auto
        public List<Node> Roots { get; set; }
        public class Node
        {
            ...
            public List<Node> Children { get; set; } = new();
        }

```

```auto
    <dot:HierarchyRepeater DataSource={value: Roots}
                           ItemChildrenBinding={value: Children}
                           LevelWrapperTagName="ul"
                           LevelClass="level"
                           ItemWrapperTagName="li"
                           ItemClass="item"
                           RenderSettings.Mode="Client">
        <span>{{value: Name}}</span>
        <dot:Button Click={command: _root.ClickNode(_this)} />
    </dot:HierarchyRepeater>

```

---

<div class="post-metadata">

**Author:** ![totacz](https://forum.dotvvm.com/user_avatar/forum.dotvvm.com/totacz/32/37_2.png) [@totacz](https://forum.dotvvm.com/u/totacz)\
**Post date:** [September 17, 2023, 12:41pm UTC](https://forum.dotvvm.com/t/dotvvm-controls/56/3 "2023-09-17T12:41:13Z")

</div>

Děkuji i za příklad.  
T.