RTL Support

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.

The TreeView 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.

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.

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.

Right to Left Layout

This is some regular content, followed by a TreeView:

Electronics

Trimmers/Shavers

Tablets

Phones

Apple

Motorola

Nokia

Samsung

Speakers

Monitors

Toys

Shopkins

Train Sets

Science Kit

Play-Doh

Crayola

Home

Coffeee Maker

Breadmaker

Solar Panel

Work Table

Propane Grill

// This file locates: "Scripts/Lesson/C1Nav/Rtl.js".
c1.documentReady(function () {
    var tree = wijmo.Control.getControl('#theTree');
 
    // handle checkboxes
    document.getElementById('rtl').addEventListener('click', function (e) {
        var content = document.getElementById('content');
        content.setAttribute('dir', e.target.checked ? 'rtl' : '');
    });
});

// This file locates: "Content/css/Lesson/C1Nav/Rtl.css".
/* default trees on this sample */
.demo-control .wj-treeview {
    display:block;
    height: 350px;
    font-size: 120%;
    margin-bottom: 8px;
    padding: 6px;
    background: #f0f0f0;
    box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
}

using System.Web.Mvc;
 
namespace LearnMvcClient.Controllers
{
    public partial class C1NavController : Controller
    {
        // GET: Rtl
        public ActionResult Rtl()
        {
            return View(Models.TreeViewData.GetData(Url));
        }
    }
}

@model IEnumerable<TreeViewData>
 
<h1>
    @Html.Raw(Resources.C1Nav.Rtl_Title)
</h1>
 
<p>
    @Html.Raw(Resources.C1Nav.Rtl_Text1)
</p>
<p>
    @Html.Raw(Resources.C1Nav.Rtl_Text2)
</p>
<p>
    @Html.Raw(Resources.C1Nav.Rtl_Text3)
</p>
<p>
    @Html.Raw(Resources.C1Nav.Rtl_Text4)
</p>
<div>
    <label>
        @Html.Raw(Resources.C1Nav.Rtl_Text5)
        <input id="rtl" type="checkbox" checked="true">
    </label>
</div>
 
<div id="content" dir="rtl">
    <div>
        @Html.Raw(Resources.C1Nav.Rtl_Text6)
    </div>
    @Html.C1().TreeView().Id("theTree").Bind(Model).DisplayMemberPath("Header").ChildItemsPath("Items")
</div>