@model IEnumerable<TreeViewData>

<h1>
    RTL Support
</h1>

<p>
    Some languages render content from the right to the left of the page
    (Arabic and Hebrew are typical examples) . HTML accommodates this
    with the 'dir' attribute. Setting 'dir' to 'rtl' on any element
    causes the element's content to flow from right to left.
</p>
<p>
    The <b>TreeView</b> supports this automatically. If the element hosting
    the tree has the 'dir' attribute set to 'rtl', the tree will render with
    nodes extending from right to left. You don't have to set any properties
    on the control.
</p>
<p>
    Note that the 'dir' attribute value is inherited, so if you set it on the
    body tag for example, the entire page will be rendered from right to left,
    including the tree.
</p>
<p>
    Note also that CSS has a 'direction' attribute that performs the same
    function as the 'dir' element attribute. The 'dir' attribute is generally
    considered more appropriate for several reasons, including the fact that
    it can be used in CSS rules.
</p>
<div>
    <label>
        Right to Left Layout
        <input id="rtl" type="checkbox" checked="true">
    </label>
</div>

<div id="content" dir="rtl">
    <div>
        This is some regular content, followed by a <b>TreeView</b>:
    </div>
    @Html.C1().TreeView().Id("theTree").Bind(Model).DisplayMemberPath("Header").ChildItemsPath("Items")
</div>