Navigation
Treeview Grid 
- Class name: (k-tree-grid)
- Version: 1.0
The Treeview Grid is an HTML structure composed of two colums: one for the treeview and the other for the content of the tree selected item.
You may also have an actions bar to attach actions to the tree.
HTML5 Plain Code
-
<div class="k-tree-grid">
-
<div class="tree">
-
<ul class="actions">
-
<li><a href="#" class="bt-new" title="Create new tree item">New</a></li>
-
<li><a href="#" class="bt-del" title="Delete selected tree item">Delete</a></li>
-
</ul>
-
<!-- Here goes the treeview itens -->
-
<div class="k-tree">
-
</div>
-
</div>
-
<section class="tree-content">
-
<h3>Tree Item [Adapt the level of this title to your page structure]</h3>
-
<p>Here goes the content of the selected tree item</p>
-
</section>
-
</div>
CSS Code
-
div.k-tree-grid {
-
float: left;
-
width: 100%;
-
padding: 0 0 1em;
-
margin-bottom: 1em;
-
border-top: 4px solid #000;
-
border-bottom: 2px solid #000;
-
}
-
div.k-tree-grid div.tree {
-
float: left;
-
overflow: auto;
-
width: 20%;
-
height: 25em;
-
padding: 1em 0 2%;
-
}
-
div.k-tree-grid .tree-content {
-
float: right;
-
overflow: auto;
-
width: 74%;
-
height: 33em;
-
padding: 2%;
-
border-left: 1px solid #000;
-
}
-
div.k-tree-grid ul.actions {
-
padding: 5px 5px 0;
-
margin: 0 0 2em;
-
background: #3E3E3E;
-
}
IE Backward Compatibility
In order to correct display bugs for Internet Explorer versions prior to 9, your html pages need to call the following file by Conditional Comments: