Hi friends,
Solution for drag and drop tree view with expandable line
I have got solution how to create expandable line like the screenshot
Please use the following CSS and create 2 image in gif format and name it like
tvi_vertline.gif (single pixel line) 16px × 800px
tvil_2.gif (L shape image) - 16px × 22px
If any one need these two image please post here ill add image here
Here is the coding for drag-drop-folder-tree.css
p{
font-family:arial;
}
a{
color:#000;
font-family:arial;
font-size:0.8em;
}
.dhtmlgoodies_tree,#floatingContainer{
margin:0px;
padding:0px;
}
#floatingContainer ul{
margin-left:20px; /* Left spacing */
padding-left:0px;
}
.dhtmlgoodies_tree ul{ /* Sub menu groups */
margin-left:20px; /* Left spacing */
padding-left:0px;
display:none; /* Initially hide sub nodes */
}
.dhtmlgoodies_tree li,#floatingContainer li{ /* Nodes */
list-style-type:none;
vertical-align:middle;
}
.dhtmlgoodies_tree li a,#floatingContainer li a{ /* Node links */
color:#000;
text-decoration:none;
font-family:arial;
font-size:0.8em;
padding-left:1px;
line-height:13px;
margin-left:2px;
}
.dhtmlgoodies_tree li a.highlightedNodeItem{
color:#FFF;
background-color:#009;
}
body{
margin:0px;
padding:0px;
}
.dhtmlgoodies_tree input.folderTreeTextBox{ /* Css for the text input - rename item */
font-size:14px;
margin:0px;
padding:0px;
height:18px;
}
.dhtmlgoodies_tree li, .tv .tvi /* Tree View Item */ { background: url(img/tvi_vertline.gif) 0 0 no-repeat; }
.dhtmlgoodies_tree .tvic /* Tree View Item, Collapsable */ { background-image: url(img/tvic.gif); }
.dhtmlgoodies_tree .tvie /* Tree View Item, Expandable */ { background-image: url(img/tvie.gif); }
.dhtmlgoodies_tree .tvil /* Tree View Last Item */ { background-image: url(img/tvil_2.gif); }
Please call jquery file
--------------------------------
jquery files are available in jquery.org
<script type="text/javascript" src="js/jquery.js"></script>
Please add this Javascript
-----------------------------------
<script type="text/javascript">
$(document).ready(function(){
$("ul.dhtmlgoodies_tree") // Find all unordered lists with class of "tv"
.find("li:last-child").addClass("tvil").end() // Apply class "TVIL aka TreeView Item - Last"
});
$.fn.swapClass = function(c1,c2) {
return this.each(function() {
if ($.hasWord(this, c1)) {
$(this).removeClass(c1);
$(this).addClass(c2);
} else if ($.hasWord(this, c2)) {
$(this).removeClass(c2);
$(this).addClass(c1);
}
});
};
</script>
This will give perfect expandable line for the drag-and-drop tree
Share your knowledge..................