KAWWA Markup Pattern Library


Navigation

Treeview Grid Component Information

  • Class name: (k-tree-grid)
  • Version: 1.0

Add to list

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.

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
  1. <div class="k-tree-grid">
  2. 	<div class="tree">
  3. 		<ul class="actions">
  4. 			<li><a href="#" class="bt-new" title="Create new tree item">New</a></li>
  5. 			<li><a href="#" class="bt-del" title="Delete selected tree item">Delete</a></li>
  6. 		</ul>
  7. 		<!-- Here goes the treeview itens -->
  8. 		<div class="k-tree">
  9. 		</div>
  10. 	</div>
  11. 	<section class="tree-content">
  12. 		<h3>Tree Item [Adapt the level of this title to your page structure]</h3>
  13. 		<p>Here goes the content of the selected tree item</p>
  14. 	</section>
  15. </div>

CSS Code

COPY
  1. div.k-tree-grid {
  2. 	float: left;
  3. 	width: 100%;
  4. 	padding: 0 0 1em;
  5. 	margin-bottom: 1em;
  6. 	border-top: 4px solid #000;
  7. 	border-bottom: 2px solid #000;
  8. }
  9. 
                                
  10. 	div.k-tree-grid div.tree {
  11. 		float: left;
  12. 		overflow: auto;
  13. 		width: 20%;
  14. 		height: 25em;
  15. 		padding: 1em 0 2%;
  16. 	}
  17. 	div.k-tree-grid .tree-content {
  18. 		float: right;
  19. 		overflow: auto;
  20. 		width: 74%;
  21. 		height: 33em;
  22. 		padding: 2%;
  23. 		border-left: 1px solid #000;
  24. 	}
  25. 
                                
  26. 	div.k-tree-grid ul.actions {
  27. 		padding: 5px 5px 0;
  28. 		margin: 0 0 2em;
  29. 		background: #3E3E3E;
  30. 	}
  31. 
                                
  32. 
                                

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:

Top


List of Components

Top

jQuery Feature
jQuery Interactive Feature
Tapestry Integration
Tapestry integration
AngularJS Feature
AngularJS Feature

Navigation

Forms

Tables

Blocks

Site Utilities

Editorial

eCommerce