O'Reilly logo

Kendo UI Cookbook by Sagar Ganatra

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Using a TreeView widget to display a directory structure

A TreeView widget can be created by specifying the hierarchical data either in the HTML markup or by binding it to a DataSource object.

How to do it…

To create a TreeView, let's specify the data in the markup, as shown in the following code snippet:

<ul id="treeView">
  <li>
    Directory1
    <ul>
      <li>File1.txt</li>
      <li>File2.txt</li>
    </ul>
  </li>
  <li>
    Directory2
    <ul>
      <li>File3.txt</li>
      <li>File4.txt</li>
    </ul>
  </li>
  <li>
    Directory3
    <ul>
      <li>File5.txt</li>
      <li>File6.txt</li>
    </ul>
  </li>                  
</ul>

The next step is to initialize the TreeView widget by invoking the kendoTreeView function on the DOM node using the following line of code:

$('#treeView').kendoTreeView();

How it works…

The TreeView widget displays ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required