[ KAWWA PORTAL ] Components : Treeview Grid

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.

Demo
Snippets

New
Delete

Tree Item [Adapt the level of this title to your page structure]

Here goes the content of the selected tree item

HTML5 Plain Code

COPY

```
<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>
```
```
		
```
```
		<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

COPY

```
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:

List of Components

: jQuery Interactive Feature
: Tapestry integration
: AngularJS Feature

Navigation

Forms

Tables

Dynamic Table

Blocks

Site Utilities

Editorial

eCommerce