Advertisement

drag and drop tree view with '+/-' image and expandable imag

Moderators: Calcifer, slothy

drag and drop tree view with '+/-' image and expandable imag

Postby ganeshenbabu » Fri Jan 30, 2009 2:37 pm

drag and drop tree view with '+/-' image and expandable image

Please help

i have used drag and drop tree using

http://www.dhtmlgoodies.com/scripts/dra ... -tree.html

here its default have "Pluse" "minus" image i need expandable line also

Please check image what i'm expecting

in this image i have marked using red border for identification i want these line in this tree

Please help

Image

I want to enable these line i have checked http://www.dhtmlgoodies.com/scripts/dra ... ree/images folder
they have folder_lastsub.gif, folder_sub.gif, folder_close.gif, folder_dots
but i dont know how to use these images to achieve the expanable line

Please help
ganeshenbabu
 
Posts: 3
Joined: Thu Jan 29, 2009 11:56 am

Solution for drag and drop tree view with expandable line

Postby ganeshenbabu » Tue Feb 03, 2009 12:17 pm

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


:lol:
ganeshenbabu
 
Posts: 3
Joined: Thu Jan 29, 2009 11:56 am


Return to Drag and drop scripts

Who is online

Users browsing this forum: No registered users and 4 guests