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 5 years, 9 months ago.

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author

  • benin10

    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">
        <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.
        <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);
                $("#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) {
    <body class='default'>
        <div id='jqxWidget'>
            <div style='float: left;'>
                <div id='treeA' style='visibility: hidden; float: left; margin-left: 0px;'>
                        <li id='home' item-selected='true'>Home</li>
                        <li item-expanded='true'>Solutions
                        <li>Financial services</li>
                <div style='visibility: hidden; float: left; margin-left: 20px;' id="treeB">
                        <li item-expanded='true'>Support
                                <li>Support home</li>
                                <li>Customer Service</li>
                        <li>Knowledge base</li>
                <div style="width: 200px; height: 200px; float: left; margin-left: 20px;">
                    <textarea rows="5" id="textarea"></textarea>
            <div style="font-size: 13px; font-family: Verdana; padding-top: 20px; clear: both;">
                    <b>Events Log:</b>
                    <div id="dragStartLog">
                    <div id="dragEndLog">
                    <br />
                    <br />
                    Dragging of "Community" is disabled.
                    <br />
                    Dropping of "Forum" is disabled.
    • This topic was modified 5 years, 10 months ago by  benin10.


    Hello 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 by getItems method of the jqxTree and return them back by some of the add methods – addTo, addBefore and addAfter.

    Best Regards,
    Hristo Hristov

    jQWidgets team

Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.