Hi,
Is it possible to drag and drop a tab label into a tree (the tree is in a diffrent layout cell) ?
Thanks.
Hi,
there isn’t built-in functionality to do that. But using private properties and approach from the following tree sample:
dhtmlx.com/docs/products/dhtmlxT … imple.html
you may implement this feature:
for(var id in dhxTabbar._tabs){
var tabText = dhxTabbar._tabs[id].firstChild;
tabText .setAttribute(“id”,id);
tabText.setAttribute(“text”,tabText.innerHTML);
dhxTree.makeDragable(id);
}
dhtmlxtree_dragin.js must be included.
Hi ,
thanks!! that works great!!
one more question about it - i can’t see what I’m dragging to the tree (the tab label) ,
and in the example you attached me it is possible to see the dragable text ,
what should i do in order to see it?
Thanks again.
Hi,
and in the example you attached me it is possible to see the dragable text , what should i do in order to see it?
It must be visible by default.
Make sure that dhtmlxtree.css is included.
Hi,
The dhtmlxtree.css is included…
I still can’t see the drabble text . . i can only see it after i drop it in the tree,
but in the way there i can’t see it.
Any suggestions?
Another question, how do i control the image of the new added item inside the tree?
Thanks.
Hi,
I still can’t see the drabble text . . i can only see it after i drop it in the tree,
Could you provide the sample to reproduce the issue.
Another question, how do i control the image of the new added item inside the tree?
you may customize the drag-n-drop to tree. See the sample in tree package:
dhtmlxTree/samples/05_drag_n_drop/01_drag_in_simple.html
insertNewItem method may take item images as arguments
Hi,
Attached is my code:
<%@page contentType=“text/html” pageEncoding=“UTF-8”%>
<!--dhtmlxLayout -->
<link rel="stylesheet" type="text/css" href="scripts/dhtmlxLayout/codebase/dhtmlxlayout.css">
<link rel="stylesheet" type="text/css" href="scripts/dhtmlxLayout/codebase/skins/dhtmlxlayout_dhx_skyblue.css">
<script src="scripts/dhtmlxLayout/codebase/dhtmlxcommon.js"></script>
<script src="scripts/dhtmlxLayout/codebase/dhtmlxlayout.js"></script>
<script src="scripts/dhtmlxLayout/codebase/dhtmlxcontainer.js"></script>
<!--dhtmlxWindows -->
<link rel="stylesheet" type="text/css" href="scripts/dhtmlxWindows/codebase/dhtmlxwindows.css">
<link rel="stylesheet" type="text/css" href="scripts/dhtmlxWindows/codebase/skins/dhtmlxwindows_dhx_skyblue.css">
<script src="scripts/dhtmlxWindows/codebase/dhtmlxwindows.js"></script>
<!--dhtmlxMenu -->
<link rel="stylesheet" type="text/css" href="scripts/dhtmlxMenu/codebase/skins/dhtmlxmenu_dhx_blue.css">
<link rel="stylesheet" type="text/css" href="scripts/dhtmlxMenu/codebase/skins/dhtmlxmenu_dhx_skyblue.css">
<script src="scripts/dhtmlxMenu/codebase/dhtmlxmenu.js"></script>
<script src="scripts/dhtmlxMenu/codebase/ext/dhtmlxmenu_ext.js"></script>
<!--dhtmlxTabbar -->
<script src="scripts/dhtmlxTabbar/codebase/dhtmlxtabbar.js"></script>
<link rel="stylesheet" type="text/css" href="scripts/dhtmlxTabbar/codebase/dhtmlxtabbar.css">
<!--dhtmlxTree -->
<link rel="stylesheet" type="text/css" href="scripts/dhtmlxTree/codebase/dhtmlxtree.css">
<script src="scripts/dhtmlxTree/codebase/dhtmlxtree.js"></script>
<script src="scripts/dhtmlxTree/codebase/dhtmlxcommon.js"></script>
<script src="scripts/dhtmlxTree/codebase/ext/dhtmlxtree_rl.js"></script>
<script src="scripts/dhtmlxTree/codebase/ext/dhtmlxtree_dragin.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style>
html, body
{
width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
overflow: hidden;
}
.status_bar_text_table
{
border-color: #D8D8D8 ;
border-style: solid;
border-left-width:0px;
border-right-width:1px;
border-top-width:0px;
border-bottom-width:0px;
}
</style>
</head>
<body onload="openLayout();">
<div id="winVP" style="width:100%; height: 100%; border: #cecece 1px solid;"></div>
<script>
var dhxWins = null;
function openLayout()
{
dhxWins = new dhtmlXWindows();
dhxWins.enableAutoViewport(false);
dhxWins.attachViewportTo("winVP");
dhxWins.setImagePath("scripts/dhtmlxWindows/codebase/imgs/");
var dhxLayout = new dhtmlXLayoutObject(dhxWins.createWindow("w1", 0, 0, '100%', '100%'), "2U");
dhxLayout.cells("b").setText("111");
dhxLayout.cells("b").setWidth("200");
dhxWins.window("w1").maximize();
dhxWins.window("w1").setText("1111");
dhxWins.window("w1").setIcon("111.bmp", "111.bmp");
var menu = dhxLayout.attachMenu();
menu.setSkin("dhx_blue");
menu.setImagePath("scripts/dhtmlxMenu/codebase/imgs/");
menu.setIconsPath("scripts/dhtmlxMenu/samples/common/imgs/");
menu.setRTL(true);
menu.loadXML("test.jsp");
var dhxTabbar = dhxLayout.cells("a").attachTabbar();
dhxTabbar.setImagePath("scripts/dhtmlxTabbar/codebase/imgs/");
dhxTabbar.enableTabCloseButton(true);
dhxTabbar.setHrefMode("ajax-html");
// dhxTabbar.setAlign("right");
var dhxTree = dhxLayout.cells("b").attachTree();
dhxTree.setImagePath("scripts/dhtmlxTree/codebase/imgs/csh_bluebooks/");
//dhxTree.deleteChildItems(0);
dhxTree.enableTreeImages(1);
dhxTree.enableTreeLines(0);
dhxTree.enableTextSigns(0);
dhxTree.loadXML("test1.jsp");
dhxTree.enableRTL(true);
dhxTree.enableDragAndDrop(true);
menu.attachEvent("onClick", function(id)
{ menuClick(id,dhxTabbar,menu,dhxTree); });
}
function menuClick(id,dhxTabbar,menu,dhxTree)
{
var tab_id_ = (new Date()).valueOf();
var tab_header_ = menu.getItemText(id);
if (tab_header_.toString().length > 20)
{
var tooltip_tab_header_ = "..." + tab_header_.substring(0,17);
tab_header_ = "<span title='"+tab_header_+"' style='width:180px'>"+tooltip_tab_header_+"</span>";
}
dhxTabbar.addTab(tab_id_ , tab_header_ , "150px");
dhxTabbar.setContentHref(tab_id_ , "1.jsp");
dhxTabbar.setTabActive(tab_id_);
// enables the tab to drag and droped in the tree
var tabText = dhxTabbar._tabs[tab_id_].firstChild;
tabText.setAttribute("id",tab_id_);
tabText.setAttribute("text",tabText.innerHTML);
dhxTree.makeDragable(tab_id_);
}
</script>
</body>
Thanks.
Hi,
we’ve reproduced the problem. Please try to use attached file instead of the original.
dhtmlxtree_dragin.zip (1.15 KB)