jQuery UI Widgets › Forums › Navigation › Tree › Toggle not working properly when checkboxes set to true along with drag and drop
This topic contains 1 reply, has 2 voices, and was last updated by Hristo 7 years, 3 months ago.
-
Author
-
August 2, 2017 at 11:03 am Toggle not working properly when checkboxes set to true along with drag and drop #95272
I have a requirement where I need to enable check boxes as well as allow drag and drop. But when you do this the toggle is not working. Once you remove all the children from a node and then add a child the toggle icon does not appear. Please find the modified sample code:
<!DOCTYPE html> <html lang="en"> <head> <meta name="keywords" content="jQuery Tree, Tree Widget, TreeView" /> <meta name="description" content="The jqxTree displays a hierarchical collection of items. You can populate it from 'UL' or by using its 'source' property." /> <title id='Description'>The sample demonstrates the Tree's drag and drop functionality. </title> <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" /> <script type="text/javascript" src="../../scripts/jquery-1.11.1.min.js"></script> <script type="text/javascript" src="../../scripts/demos.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxscrollbar.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxpanel.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxdragdrop.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxtree.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxcheckbox.js"></script> <script type="text/javascript"> $(document).ready(function () { // Create jqxTree $('#treeA').jqxTree({ allowDrag: true, allowDrop: true,checkboxes:true, height: '300px', width: '220px', dragStart: function (item) { if (item.label == "Community") return false; } }); $('#treeB').jqxTree({ allowDrag: true, allowDrop: true, height: '300px', width: '220px', dragEnd: function (item, dropItem, args, dropPosition, tree) { if (item.label == "Forum") return false; } }); $('#treeA').css('visibility', 'visible'); $('#treeB').css('visibility', 'visible'); $("#treeA, #treeB").on('dragStart', function (event) { $("#dragStartLog").text("Drag Start: " + event.args.label); $("#dragEndLog").text(""); }); $("#treeA, #treeB").on('dragEnd', function (event) { $("#dragEndLog").text("Drag End"); if (event.args.label) { var ev = event.args.originalEvent; var x = ev.pageX; var y = ev.pageY; if (event.args.originalEvent && event.args.originalEvent.originalEvent && event.args.originalEvent.originalEvent.touches) { var touch = event.args.originalEvent.originalEvent.changedTouches[0]; x = touch.pageX; y = touch.pageY; } var offset = $("#textarea").offset(); var width = $("#textarea").width(); var height = $("#textarea").height(); var right = parseInt(offset.left) + width; var bottom = parseInt(offset.top) + height; if (x >= parseInt(offset.left) && x <= right) { if (y >= parseInt(offset.top) && y <= bottom) { $("#textarea").val(event.args.label); } } } }); }); </script> </head> <body class='default'> <div id='jqxWidget'> <div style='float: left;'> <div id='treeA' style='visibility: hidden; float: left; margin-left: 0px;'> <ul> <li id='home' item-selected='true'>Home</li> <li item-expanded='true'>Solutions <ul> <li>Education</li> </ul> </li> <li>Financial services</li> <li>Community</li> </ul> </div> <div style='visibility: hidden; float: left; margin-left: 20px;' id="treeB"> <ul> <li>Products </li> <li item-expanded='true'>Support <ul> <li>Support home</li> <li>Customer Service</li> </ul> </li> <li>Knowledge base</li> <li>Forum</li> </ul> </div> <div style="width: 200px; height: 200px; float: left; margin-left: 20px;"> <textarea rows="5" id="textarea"></textarea> </div> </div> <div style="font-size: 13px; font-family: Verdana; padding-top: 20px; clear: both;"> <b>Events Log:</b> <div id="dragStartLog"> </div> <div id="dragEndLog"> </div> <br /> <b>Note:</b> <br /> Dragging of "Community" is disabled. <br /> Dropping of "Forum" is disabled. </div> </div> </body> </html>
August 10, 2017 at 9:36 am Toggle not working properly when checkboxes set to true along with drag and drop #95408Hello benin10,
The two jqxTree widgets are not consistent.
I would suggest you as a workaround you could clear all content (all items –clear
method) and after that could re-create the whole Tree.
You can get all items bygetItems
method of the jqxTree and return them back by some of the add methods – addTo, addBefore and addAfter.Best Regards,
Hristo HristovjQWidgets team
http://www.jqwidgets.com -
AuthorPosts
You must be logged in to reply to this topic.