jQuery UI Widgets Forums Navigation Tree JQxTree save state??

This topic contains 13 replies, has 4 voices, and was last updated by  Dimitar 7 years, 2 months ago.

Viewing 14 posts - 1 through 14 (of 14 total)
  • Author
  • JQxTree save state?? #45519

    Dundee
    Participant

    There is any possibility for saving the state of a tree….like the grid ?

    JQxTree save state?? #45590

    Dimitar
    Participant

    Hello Dundee,

    Unfortunately, saving a tree’s state is not supported.

    Best Regards,
    Dimitar

    jQWidgets team
    http://www.jqwidgets.com/

    JQxTree save state?? #45624

    Dundee
    Participant

    is there any plan to add this functionnality on tree….and probably other widget??

    JQxTree save state?? #45746

    Dimitar
    Participant

    Hi Dundee,

    Unfortunately, we do have plans to implement this feature for jqxTree.

    As for other widgets:

    • jqxGrid has a save/load state functionality;
    • other widgets, such as jqxTabs and jqxNavigationBar can use cookies to save or load the selected item.

    Best Regards,
    Dimitar

    jQWidgets team
    http://www.jqwidgets.com/

    JQxTree save state?? #46542

    jean-frederic
    Participant

    Hello,

    We did achive this function. But, we have a small “performance” issue. Well, this is working good, but, each time the Tree is shown, we iterate through all “open” branch to open them. But since there is an event on “expand” (wich is asynchronous), we fire that event each time we open a branch.

    So, Im looking for a solution for not “firing” the updateDatabase each time we refresh the tree. I was trying to figure if it was possible to use “click” event instead of “expand” event.

    Le me show you.

    We have this function on the

    On the page loading (where the tree is) , we call that function.

    function showPagesForCurrentSite() {
    $(‘#jqxTree-pages’).jqxTree({ theme: getTheme(),toggleMode:’click’ });
    updateTreeSource();
    bindTreeRightClickEvent();
    bindTreeExpand();
    bindTreeCollapse();
    }

    each time, we want to only refresh the tree, we call updateTreeSource();

    Now, the function wich expend all “open page” :
    (this return from the database, a list of all open page for the current user/site)

    function expandPages()
    {
    var obj =
    {
    ‘siteId’: $(‘#userSite’).val()
    }

    var array= [];

    var jqXHR = $.ajax({
    url: ‘/api/UserProfileOpenPageForCurrentSiteApi/GetAllOpenPages’,
    data: obj,
    async: false
    });

    array = jqXHR.responseText;

    var items = $(‘#jqxTree-pages’).jqxTree(‘getItems’);
    for (var i = 0; i < items.length; i++) {
    if (array.indexOf(items[i].id) != -1)
    {
    $(‘#jqxTree-pages’).jqxTree(‘expandItem’, items[i]);
    }
    };
    }

    function updateTreeSource()
    {
    // prepare the data
    var source =
    {
    datatype: “xml”,
    datafields: [
    { name: ‘id’, map: ‘id’ },
    { name: ‘Ordre’, map: ‘Ordre’ },
    { name: ‘label’, map: ‘label’ },
    { name: ‘parentid’, map: ‘parentid’ },
    { name: ‘expanded’, map: ‘expanded’ },
    ],
    root: “ArrayOfPagesDto”,
    record: “PagesDto”,
    id: ‘id’,
    url: “/api/AllPages”,
    async: false
    };
    var dataAdapter = new $.jqx.dataAdapter(source);
    dataAdapter.dataBind();
    var records = dataAdapter.getRecordsHierarchy(‘id’, ‘parentid’, ‘items’, [{ name: ‘label’, map: ‘label’ }]);
    $(‘#jqxTree-pages’).jqxTree({ source: records });
    expandPages();
    }

    function bindTreeRightClickEvent()
    {
    var contextMenu = $(“#jqxMenu”).jqxMenu({ width: ‘120px’, theme: getTheme(), height: ’83px’, autoOpenPopup: false, mode: ‘popup’ });
    var clickedItem = null;

    var attachContextMenu = function () {
    // open the context menu when the user presses the mouse right button.
    $(“#jqxTree-pages li”).on(‘mousedown’, function (event) {
    var target = $(event.target).parents(‘li:first’)[0];
    var rightClick = isRightClick(event);
    if (rightClick && target != null) {
    $(“#jqxTree-pages”).jqxTree(‘selectItem’, target);
    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());
    switch (item) {
    case “Open”:
    var selectedItem = $(‘#jqxTree-pages’).jqxTree(‘selectedItem’);
    alert(‘Page Id:’ + selectedItem.id);
    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;
    if (!event) var event = window.event;
    if (event.which) rightclick = (event.which == 3);
    else if (event.button) rightclick = (event.button == 2);
    return rightclick;
    }

    $(“#jqxTree”).on(‘itemclick’, function (event) {
    var id = event.args.id;
    var custom;
    var recursion = function (object) {
    for (var i = 0; i < object.length; i++) {
    if (id == object[i].id) {
    custom = object[i].custom;
    break;
    } else if (object[i].items) {
    recursion(object[i].items);
    };
    };
    };
    recursion(records);
    $(“#eventLog”).text(“Id: ” + event.args.id + “, Text: ” + $(event.args).text() + “, Custom: ” + custom);
    });
    }

    function bindTreeExpand() {
    $(‘#jqxTree-pages’).on(‘expand’, function (event) {
    var args = event.args;
    var item = $(‘#jqxTree-pages’).jqxTree(‘getItem’, args.element);

    // Add an open page if it doesn’t exist already;
    var obj =
    {
    ‘Site’: parseInt($(“#userSite”).val()),
    ‘AD’: $(“#userAD”).val(),
    ‘PageId’: parseInt(item.id),
    ‘Open’: true,
    }
    updateUserProfileOpenPage(obj);
    });
    }

    function bindTreeCollapse() {
    $(‘#jqxTree-pages’).on(‘collapse’, function (event) {
    var args = event.args;
    var item = $(‘#jqxTree-pages’).jqxTree(‘getItem’, args.element);

    // Add an open page if it doesn’t exist already;
    var obj =
    {
    ‘Site’: parseInt($(“#userSite”).val()),
    ‘AD’: $(“#userAD”).val(),
    ‘PageId’: parseInt(item.id),
    ‘Open’: false,
    }
    updateUserProfileOpenPage(obj);
    });
    }

    function updateUserProfileOpenPage(obj) {
    $.ajax({
    url: “/api/UserProfileOpenPageApi/UpdateUserProfileOpenPage”,
    type: “post”,
    contentType: “application/json; charset=utf-8”,
    dataType: “json”,
    data: JSON.stringify(obj),
    async: false
    });
    }

    Jean-Frédéric
    Canam Group

    JQxTree save state?? #46553

    jean-frederic
    Participant

    Maybe a solution ??

    I receive a list of xml like this :

    <ArrayOfPagesDto xmlns:i=”http://www.w3.org/2001/XMLSchema-instance” xmlns=”http://schemas.datacontract.org/2004/07/Octopus_v2.Dto”>
    <PagesDto>
    <Order>1</Order>
    <id>125</id>
    <label>Home</label>
    <langues i:nil=”true”></langues>
    <parentid>0</parentid>
    </PagesDto>
    <PagesDto>
    <Order>1</Order>
    <id>137</id>
    <label>À propos</label>
    <langues i:nil=”true”></langues>
    <parentid>125</parentid>
    </PagesDto>
    <PagesDto>
    <Order>1</Order>
    <id>153</id>
    <label>Bénéfices</label>
    <langues i:nil=”true”></langues>
    <parentid>151</parentid>
    </PagesDto>

    </ArrayOfPagesDto>

    I could receive a parameter that say the page need to be open or not. So, I would not have to iterate thru all tree item and “open them” manually. This way, I would not “fire” the expand event.

    But, HOW, can I tell the tree to open the item ? I did try that approach in the past (with the param bool expanded, but as soon as there is a param named expanded, even if true or false, it will expand the tree).

    Thanks

    Jean-Frederic
    Canam Group

    • This reply was modified 10 years, 5 months ago by  jean-frederic.
    JQxTree save state?? #46555

    jean-frederic
    Participant

    I got the solution :

    I discovered that when a dataAdapter contain a properties “expanded” wich may containt anything, it will expand the tree.
    Since I return a list of object (PagesDTO), if I name a propertie “expanded” with true of false, it will expand ALL tree level, wich I dont want.

    So, here is my Jedi Trick to bypass that.

    I didnt wanted to have a “server-side” load with recursive proc. So i decided to use the client computer to manipulate the data. I added a properties “state” (string) wich will containt the word “expanded” if the tree need to be open.

    Then, when building the dataAdapter, will iterate thru all of it and If I see a “state==expanded”, I will ADD a new properties wich will be called “expanded”.

    So now, I expand my tree on the LOADING. I dont trigger my “expand” event while I expand my tree AND , there is not “visual glitch”, like a tree that is closed and open after that.

    Here is my example :

    function showPagesForCurrentSite() {
    $(‘#jqxTree-pages’).jqxTree({ theme: getTheme(),toggleMode:’click’ });
    updateTreeSource();
    bindTreeRightClickEvent();
    bindTreeExpand();
    bindTreeCollapse();
    }

    function updateTreeSource()
    {
    // prepare the data
    var source =
    {
    datatype: “xml”,
    datafields: [
    { name: ‘id’, map: ‘id’ },
    { name: ‘Ordre’, map: ‘Ordre’ },
    { name: ‘label’, map: ‘label’ },
    { name: ‘parentid’, map: ‘parentid’ },
    { name: ‘state’, map: ‘state’ },
    ],
    root: “ArrayOfPagesDto”,
    record: “PagesDto”,
    id: ‘id’,
    url: “/api/AllPages”,
    async: false
    };

    var dataAdapter = new $.jqx.dataAdapter(source);

    dataAdapter.dataBind();

    var length = dataAdapter.records.length;

    for (var i = 0; i < length; i++) {
    if (dataAdapter.records[i].state == “expanded”)
    dataAdapter.records[i].expanded = true;
    /*this is the MAGIC, only records wich have the state expanded will have the propertie “expanded” */
    }
    var records = dataAdapter.getRecordsHierarchy(‘id’, ‘parentid’, ‘items’, [{ name: ‘label’, map: ‘label’ }]);

    $(‘#jqxTree-pages’).jqxTree({ source: records });
    }

    function bindTreeRightClickEvent()
    {
    var contextMenu = $(“#jqxMenu”).jqxMenu({ width: ‘120px’, theme: getTheme(), height: ’83px’, autoOpenPopup: false, mode: ‘popup’ });
    var clickedItem = null;

    var attachContextMenu = function () {
    // open the context menu when the user presses the mouse right button.
    $(“#jqxTree-pages li”).on(‘mousedown’, function (event) {
    var target = $(event.target).parents(‘li:first’)[0];
    var rightClick = isRightClick(event);
    if (rightClick && target != null) {
    $(“#jqxTree-pages”).jqxTree(‘selectItem’, target);
    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());
    switch (item) {
    case “Open”:
    var selectedItem = $(‘#jqxTree-pages’).jqxTree(‘selectedItem’);
    alert(‘Page Id:’ + selectedItem.id);
    break;
    case “Add Item”:
    var selectedItem = $(‘#jqxTree-pages’).jqxTree(‘selectedItem’);
    if (selectedItem != null) {
    $(‘#jqxTree-pages’).jqxTree(‘addTo’, { label: ‘Item’ }, selectedItem.element);
    attachContextMenu();
    }
    break;
    case “Remove Item”:
    var selectedItem = $(‘#jqxTree-pages’).jqxTree(‘selectedItem’);
    if (selectedItem != null) {
    $(‘#jqxTree-pages’).jqxTree(‘removeItem’, 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;
    if (!event) var event = window.event;
    if (event.which) rightclick = (event.which == 3);
    else if (event.button) rightclick = (event.button == 2);
    return rightclick;
    }

    $(“#jqxTree”).on(‘itemclick’, function (event) {
    var id = event.args.id;
    var custom;
    var recursion = function (object) {
    for (var i = 0; i < object.length; i++) {
    if (id == object[i].id) {
    custom = object[i].custom;
    break;
    } else if (object[i].items) {
    recursion(object[i].items);
    };
    };
    };
    recursion(records);
    $(“#eventLog”).text(“Id: ” + event.args.id + “, Text: ” + $(event.args).text() + “, Custom: ” + custom);
    });
    }

    function bindTreeExpand() {

    $(‘#jqxTree-pages’).on(‘expand’, function (event) {
    var args = event.args;
    var item = $(‘#jqxTree-pages’).jqxTree(‘getItem’, args.element);

    // Add an open page if it doesn’t exist already;
    var obj =
    {
    ‘Site’: parseInt($(“#userSite”).val()),
    ‘AD’: $(“#userAD”).val(),
    ‘PageId’: parseInt(item.id),
    ‘Open’: true,
    }
    updateUserProfileOpenPage(obj);
    });
    }

    function bindTreeCollapse() {
    $(‘#jqxTree-pages’).on(‘collapse’, function (event) {
    var args = event.args;
    var item = $(‘#jqxTree-pages’).jqxTree(‘getItem’, args.element);

    // Add an open page if it doesn’t exist already;
    var obj =
    {
    ‘Site’: parseInt($(“#userSite”).val()),
    ‘AD’: $(“#userAD”).val(),
    ‘PageId’: parseInt(item.id),
    ‘Open’: false,
    }
    updateUserProfileOpenPage(obj);
    });
    }

    function updateUserProfileOpenPage(obj) {
    $.ajax({
    url: “/api/UserProfileOpenPageApi/UpdateUserProfileOpenPage”,
    type: “post”,
    contentType: “application/json; charset=utf-8”,
    dataType: “json”,
    data: JSON.stringify(obj),
    async: false
    });
    }

    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

    JQxTree save state?? #92294

    Dimitar
    Participant

    Hi Chandana,

    You can try getting an array of all jqxTree items with the getItems method then save a stringified version of it in your database. When you open your page again, get the saved items from your database and construct a source for the jqxTree to be initialized.

    Another possibility is to use a jqxTreeGrid with one column instead. You will then be able to make use of the data adapter’s addrow, deleterow and updaterow callback functions and create a CRUD application, as shown in the following tutorial: http://www.jqwidgets.com/jquery-widgets-documentation/documentation/phpintegration/php-server-side-grid-crud.htm (it is for jqxGrid, but the approach is the same for jqxTreeGrid).

    Best Regards,
    Dimitar

    jQWidgets team
    http://www.jqwidgets.com/

    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

    JQxTree save state?? #92319

    Dimitar
    Participant

    Hi Chandana,

    Please refer to the following example: http://jsfiddle.net/Dimitar_jQWidgets/rqw6nwe8/. In your case, you can store a stringified version of duplicateTreeSource in your database and on page refresh load the new jqxTree from it. We hope this helps solve your issue.

    Best Regards,
    Dimitar

    jQWidgets team
    http://www.jqwidgets.com/

    JQxTree save state?? #92406

    manichandana
    Participant

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

    Regards,
    Chandana

    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

    JQxTree save state?? #92481

    Dimitar
    Participant

    Hi Chandana,

    Thank you for your feedback. We confirm that there is currently an issue with jqxTree in Internet Explorer 8 and 7. The widget works as expected in Internet Explorer 9, 10 and 11.

    Best Regards,
    Dimitar

    jQWidgets team
    http://www.jqwidgets.com/

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

You must be logged in to reply to this topic.