jQWidgets Forums

Forum Replies Created

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • March 24, 2017 at 3:38 pm in reply to: JQxTree save state?? JQxTree save state?? #92460

    manichandana
    Participant

    Hi Dimitar,

    I just got a doubt about the compatibility of the JQXTree,when I am trying to launch my jqxtree application in IE8 its crashing,is there a way to make it work fine in IE8 and its former versions.Even when I tried to launch the demo application from JQWidgets official Site ,its crashing in the explorer.Could you please let me know whether the jqxtree is compatible with the recent versions of explorer especially IE8.

    Thanks and Regards,
    Chandana

    March 23, 2017 at 9:13 am in reply to: JQxTree save state?? JQxTree save state?? #92406

    manichandana
    Participant

    Hi Dimitar,
    Many thanks for the info.The problem has been solved now.

    Regards,
    Chandana

    March 17, 2017 at 10:07 am in reply to: JQxTree save state?? JQxTree save state?? #92299

    manichandana
    Participant

    Hi Dimitar,

    Thanks for the response,but I just want to know how can I build the source from the tree as my jqxtree is a dynamic one , any suggestion in regards to this would be grateful.

    Regards,
    Chandana

    March 16, 2017 at 12:04 pm in reply to: JQxTree save state?? JQxTree save state?? #92277

    manichandana
    Participant

    Hi Team,
    I just want to know how to persist the tree data in jqxtree.
    As soon as I am refreshing the page my contents in the tree are being lost.is there any way that I could persist the data within the tree .

    I am using the example from jqxtree -> settings and not able to find a way to store the data.

    Please find my code below.

    ========================================================================================================================================================<!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 jqxTree displays a hierarchical collection of items. You
    can populate it from ‘UL’ or by using its ‘source’ property.</title>
    <link rel=”stylesheet” href=”jqx.base.css” type=”text/css” />
    <script src=”//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js”></script>
    <script type=”text/javascript” src=”jquery-1.11.1.min.js”></script>
    <script type=”text/javascript” src=”demos.js”></script>
    <script type=”text/javascript” src=”jqxcore.js”></script>
    <script type=”text/javascript” src=”jqxbuttons.js”></script>
    <script type=”text/javascript” src=”jqxscrollbar.js”></script>
    <script type=”text/javascript” src=”jqxpanel.js”></script>
    <script type=”text/javascript” src=”jqxtree.js”></script>
    <script type=”text/javascript” src=”jqxcheckbox.js”></script>
    <script type=”text/javascript” src=”jqxfileupload.js”></script>
    <script type=”text/javascript” src=”jqxmenu.js”></script>
    <script type=”text/javascript”>
    $(document).ready(function () {
    // Create jqxTree
    $(‘#jqxTree’).jqxTree({ height: ‘450px’, width: ‘300px’});
    // Create and initialize Buttons
    $(‘#Add’).jqxButton({ height: ’25px’, width: ‘100px’});
    $(‘#AddBefore’).jqxButton({ height: ’25px’, width: ‘100px’});
    $(‘#AddAfter’).jqxButton({ height: ’25px’, width: ‘100px’});
    $(‘#Update’).jqxButton({ height: ’25px’, width: ‘100px’});
    $(‘#Remove’).jqxButton({ height: ’25px’, width: ‘100px’});
    $(‘#Disable’).jqxButton({ height: ’25px’, width: ‘100px’});
    $(‘#EnableAll’).jqxButton({ height: ’25px’, width: ‘100px’});
    $(‘#Expand’).jqxButton({ height: ’25px’, width: ‘100px’});
    $(‘#Collapse’).jqxButton({ height: ’25px’, width: ‘100px’});
    $(‘#ExpandAll’).jqxButton({ height: ’25px’, width: ‘100px’});
    $(‘#CollapseAll’).jqxButton({ height: ’25px’, width: ‘100px’});
    $(‘#Next’).jqxButton({ height: ’25px’, width: ‘100px’});
    $(‘#Previous’).jqxButton({ height: ’25px’, width: ‘100px’});

    // Add
    $(‘#Add’).click(function () {
    var selectedItem = $(‘#jqxTree’).jqxTree(‘selectedItem’);
    if (selectedItem != null) {
    // adds an item with label: ‘item’ as a child of the selected item. The last parameter determines whether to refresh the Tree or not.
    // If you want to use the ‘addTo’ method in a loop, set the last parameter to false and call the ‘render’ method after the loop.
    $(‘#jqxTree’).jqxTree(‘addTo’, { label: ‘Item’ }, selectedItem.element, false);
    // update the tree.
    $(‘#jqxTree’).jqxTree(‘render’);
    }
    else {
    $(‘#jqxTree’).jqxTree(‘addTo’, { label: ‘Item’ }, null, false);
    // update the tree.
    $(‘#jqxTree’).jqxTree(‘render’);
    }
    });
    // Add Before
    $(‘#AddBefore’).click(function () {
    var selectedItem = $(‘#jqxTree’).jqxTree(‘selectedItem’);
    if (selectedItem != null) {
    $(‘#jqxTree’).jqxTree(‘addBefore’, { label: ‘Item’ }, selectedItem.element, false);
    // update the tree.
    $(‘#jqxTree’).jqxTree(‘render’);
    }
    });
    // Update
    $(‘#Update’).click(function () {
    var selectedItem = $(‘#jqxTree’).jqxTree(‘selectedItem’);
    if (selectedItem != null) {
    var item_name = prompt(“Please enter the name of the folder”, “Name”);
    alert(item_name);
    $(‘#jqxTree’).jqxTree(‘updateItem’, { label: item_name }, selectedItem.element);
    // update the tree.
    $(‘#jqxTree’).jqxTree(‘render’);
    }
    });
    // Add After
    $(‘#AddAfter’).click(function () {
    var selectedItem = $(‘#jqxTree’).jqxTree(‘selectedItem’);
    if (selectedItem != null) {
    $(‘#jqxTree’).jqxTree(‘addAfter’, { label: ‘Item’ }, selectedItem.element, false);
    // update the tree.
    $(‘#jqxTree’).jqxTree(‘render’);
    }
    });
    // Remove
    $(‘#Remove’).click(function () {
    var selectedItem = $(‘#jqxTree’).jqxTree(‘selectedItem’);
    if (selectedItem != null) {
    // removes the selected item. The last parameter determines whether to refresh the Tree or not.
    // If you want to use the ‘removeItem’ method in a loop, set the last parameter to false and call the ‘render’ method after the loop.
    $(‘#jqxTree’).jqxTree(‘removeItem’, selectedItem.element, false);
    // update the tree.
    $(‘#jqxTree’).jqxTree(‘render’);
    }
    });
    // Disable
    $(‘#Disable’).click(function () {
    var selectedItem = $(‘#jqxTree’).jqxTree(‘selectedItem’);
    if (selectedItem != null) {
    $(‘#jqxTree’).jqxTree(‘disableItem’, selectedItem.element);
    }
    });
    // Expand
    $(‘#Expand’).click(function () {
    var selectedItem = $(‘#jqxTree’).jqxTree(‘selectedItem’);
    if (selectedItem != null) {
    $(‘#jqxTree’).jqxTree(‘expandItem’, selectedItem.element);
    }
    });
    // Expand
    $(‘#Collapse’).click(function () {
    var selectedItem = $(‘#jqxTree’).jqxTree(‘selectedItem’);
    if (selectedItem != null) {
    $(‘#jqxTree’).jqxTree(‘collapseItem’, selectedItem.element);
    }
    });
    // Expand All
    $(‘#ExpandAll’).click(function () {
    $(‘#jqxTree’).jqxTree(‘expandAll’);
    });
    // Collapse All
    $(‘#CollapseAll’).click(function () {
    $(‘#jqxTree’).jqxTree(‘collapseAll’);
    });
    // Enable All
    $(‘#EnableAll’).click(function () {
    $(‘#jqxTree’).jqxTree(‘enableAll’);
    });
    // Select Next Item
    $(‘#Next’).click(function () {
    var selectedItem = $(“#jqxTree”).jqxTree(‘selectedItem’);
    var nextItem = $(“#jqxTree”).jqxTree(‘getNextItem’, selectedItem.element);
    if (nextItem != null) {
    $(“#jqxTree”).jqxTree(‘selectItem’, nextItem.element);
    $(“#jqxTree”).jqxTree(‘ensureVisible’, nextItem.element);
    }
    });
    // Select Previous Item
    $(‘#Previous’).click(function () {
    var selectedItem = $(“#jqxTree”).jqxTree(‘selectedItem’);
    var prevItem = $(“#jqxTree”).jqxTree(‘getPrevItem’, selectedItem.element);
    if (prevItem != null) {
    $(“#jqxTree”).jqxTree(‘selectItem’, prevItem.element);
    $(“#jqxTree”).jqxTree(‘ensureVisible’, prevItem.element);
    }
    });

    //select upload button
    $(‘#jqxFileUpload’).click(function () {
    var selectedItem = $(“#jqxTree”).jqxTree(‘selectedItem’);
    $(‘#jqxFileUpload’).jqxFileUpload({ width: 300, uploadUrl: ‘sample.php’, fileInputName: ‘selectedItem’ });
    $(‘#jqxFileUpload’).jqxFileUpload(‘render’);
    });

    //jqx tree creation
    $(‘#jqxTree’).jqxTree(‘selectItem’, $(“#jqxTree”).find(‘li:first’)[0]);
    $(‘#jqxTree’).css(‘visibility’, ‘visible’);
    var contextMenu = $(“#jqxMenu”).jqxMenu({ width: ‘120px’, height: ’56px’, autoOpenPopup: false, mode: ‘popup’ });

    var attachContextMenu = function () {
    // open the context menu when the user presses the mouse right button.
    $(“#jqxTree li”).on(‘mousedown’, function (event) {
    var target = $(event.target).parents(‘li:first’)[0];
    var rightClick = isRightClick(event);
    if (rightClick && target != null) {

    var scrollTop = $(window).scrollTop();
    var scrollLeft = $(window).scrollLeft();
    contextMenu.jqxMenu(‘open’, parseInt(event.clientX) + 5 + scrollLeft, parseInt(event.clientY) + 5 + scrollTop);
    return false;
    }
    });
    }

    attachContextMenu();
    $(“#jqxMenu”).on(‘itemclick’, function (event) {
    //var item = $.trim($(event.args).text()); //this is to add a new item–>
    var item = “Add Item”;
    switch (item) {
    case “Add Item”:
    var selectedItem = $(‘#jqxTree’).jqxTree(‘selectedItem’);
    if (selectedItem != null) {
    $(‘#jqxTree’).jqxTree(‘addTo’, { label: ‘Item’ }, selectedItem.element);
    attachContextMenu();
    }
    break;
    }
    });
    // disable the default browser’s context menu.
    $(document).on(‘contextmenu’, function (e) {
    if ($(e.target).parents(‘.jqx-tree’).length > 0) {
    return false;
    }
    return true;
    });
    function isRightClick(event) {
    var rightclick;
    rightclick = (event.which == 3);
    return rightclick;
    }
    });
    </script>
    <style>

    </style>
    </head>
    <body class=’default’>

    <div id=’jqxWidget’>
    <div style=’float: left;’>
    <div id=’jqxTree’ style=’visibility: hidden; float: left; margin-left: 20px;’>

      <li id=’home’>Create Folder

    </div>
    <div style=’margin-left: 60px; float: left;’>
    <div style=’margin-top: 10px;’>
    <input type=”button” id=’Add’ value=”Add” />
    </div>
    <div style=’margin-top: 10px;’>
    <input type=”button” id=’AddAfter’ value=”Add After” />
    </div>
    <div style=’margin-top: 10px;’>
    <input type=”button” id=’AddBefore’ value=”Add Before” />
    </div>
    <div style=’margin-top: 10px;’>
    <input type=”button” id=’Update’ value=”Rename” />
    </div>
    <div style=’margin-top: 10px;’>
    <input type=”button” id=’Remove’ value=”Remove” />
    </div>
    <div style=’margin-top: 10px;’>
    <input type=”button” id=’Disable’ value=”Disable” />
    </div>
    <div style=’margin-top: 10px;’>
    <input type=”button” id=’Expand’ value=”Expand” />
    </div>
    <div style=’margin-top: 10px;’>
    <input type=”button” id=’Collapse’ value=”Collapse” />
    </div>
    <div style=’margin-top: 10px;’>
    <input type=”button” id=’ExpandAll’ value=”Expand All” />
    </div>
    <div style=’margin-top: 10px;’>
    <input type=”button” id=’CollapseAll’ value=”Collapse All” />
    </div>
    <div style=’margin-top: 10px;’>
    <input type=”button” id=’EnableAll’ value=”Enable All” />
    </div>
    <div style=’margin-top: 10px;’>
    <input type=”button” id=’Next’ value=”Next Item” />
    </div>
    <div style=’margin-top: 10px;’>
    <input type=”button” id=’Previous’ value=”Previous Item” />
    </div>

    <div style=’margin-top: 10px;’>
    <input type=”button” id=’jqxFileUpload’ value=”File Upload” />
    </div>

    <div id=’jqxMenu’>

    • Add Item

    </div>
    </div>
    </div>
    </div>
    </body>
    </html>
    =====================================================================================================================================================
    Thanks,
    Chandana

  • Author
    Posts
Viewing 4 posts - 1 through 4 (of 4 total)