jQuery UI Widgets Forums Navigation Tree jqxTree-updateItem-method not work!

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

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
  • jqxTree-updateItem-method not work! #21250

    yonysun
    Member

    jqxTree-updateItem-method not work!

    I want to make the selectedItem’s label to change automatically when I update it on server.

    submitUpdate:function(){
    var url=rootPath+"Org?action=update";
    var postData={"id":viewModel.instit_id(),"name":viewModel.newName()};
    $.post(url,postData,function(data){
    if(data="true"){
    var selectedItem = tree.jqxTree('getSelectedItem');
    alert(selectedItem.value+" - - - "+selectedItem.label);
    tree.jqxTree('updateItem', selectedItem.element, {label:'MLGB c'});
    tree.jqxTree('render');
    }
    });
    }

    how to achieve it?

    jqxTree-updateItem-method not work! #21259

    Peter Stoev
    Keymaster

    Hi,

    The ‘updateItem’ method was recently added so make sure that you use the latest version if you intend to use it.

    Below is a working sample with jQWidgets 2.8.3.

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/gettheme.js"></script>
    <script type="text/javascript" src="../../scripts/jquery-1.8.3.min.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/jqxtree.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcheckbox.js"></script>
    <script type="text/javascript">
    $(document).ready(function () {
    var theme = getDemoTheme();
    // Create jqxTree
    $('#jqxTree').jqxTree({ height: '400px', width: '300px', theme: theme });
    // Create and initialize Buttons
    $('#Update').jqxButton({ height: '25px', width: '100px', theme: theme });
    // Update
    $('#Update').click(function () {
    var selectedItem = $('#jqxTree').jqxTree('selectedItem');
    if (selectedItem != null) {
    $('#jqxTree').jqxTree('updateItem', selectedItem.element, { label: 'Item' });
    }
    });
    $('#jqxTree').jqxTree('selectItem', $("#jqxTree").find('li:first')[0]);
    });
    </script>
    </head>
    <body class='default'>
    <div id='jqxWidget'>
    <div style='float: left;'>
    <div id='jqxTree' style='float: left; margin-left: 20px;'>
    <ul>
    <li id='home'>Home</li>
    <li item-expanded='true'>Solutions
    <ul>
    <li>Education</li>
    <li>Financial services</li>
    <li>Government</li>
    <li>Manufacturing</li>
    <li>Solutions
    <ul>
    <li>Consumer photo and video</li>
    <li>Mobile</li>
    <li>Rich Internet applications</li>
    <li>Technical communication</li>
    <li>Training and eLearning</li>
    <li>Web conferencing</li>
    </ul>
    </li>
    <li>All industries and solutions</li>
    </ul>
    </li>
    <li>Products
    <ul>
    <li>PC products</li>
    <li>Mobile products</li>
    <li>All products</li>
    </ul>
    </li>
    <li>Support
    <ul>
    <li>Support home</li>
    <li>Customer Service</li>
    <li>Knowledge base</li>
    <li>Books</li>
    <li>Training and certification</li>
    <li>Support programs</li>
    <li>Forums</li>
    <li>Documentation</li>
    <li>Updates</li>
    </ul>
    </li>
    <li>Communities
    <ul>
    <li>Designers</li>
    <li>Developers</li>
    <li>Educators and students</li>
    <li>Partners</li>
    <li>By resource
    <ul>
    <li>Labs</li>
    <li>TV</li>
    <li>Forums</li>
    <li>Exchange</li>
    <li>Blogs</li>
    <li>Experience Design</li>
    </ul>
    </li>
    </ul>
    </li>
    <li>Company
    <ul>
    <li>About Us</li>
    <li>Press</li>
    <li>Investor Relations</li>
    <li>Corporate Affairs</li>
    <li>Careers</li>
    <li>Showcase</li>
    <li>Events</li>
    <li>Contact Us</li>
    <li>Become an affiliate</li>
    </ul>
    </li>
    </ul>
    </div>
    <div style='margin-left: 60px; float: left;'>
    <div style='margin-top: 10px;'>
    <input type="button" id='Update' value="Update" />
    </div>
    </div>
    </div>
    </div>
    </body>
    </html>

    Best Regards,
    Peter Stoev

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

    jqxTree-updateItem-method not work! #23365

    bienhaui
    Member

    Hi Peter Stoev

    I want change Icon Team. However i used
    $(‘#jqxTree’).jqxTree(‘updateItem’, selectedItem.element, {icon: ‘abc.png’ , label: ‘Item’ }); that not working
    pls help me

    • This reply was modified 11 years ago by  bienhaui.
    jqxTree-updateItem-method not work! #23372

    Peter Stoev
    Keymaster

    Hi,

    At present, it is possible to update only the item’s text. It will be possible to update the icon in the next version.

    Best Regards,
    Peter Stoev

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

    jqxTree-updateItem-method not work! #23437

    bienhaui
    Member

    thank you

    jqxTree-updateItem-method not work! #60034

    yatinpatel
    Participant

    Hi Peter,

    I am using version 3.4.0. I want to change the label of the node but want to keep the icon same.

    $(‘#jqxTree’).jqxTree(‘updateItem’, selectedItem.element, { icon: selectedItem.icon, iconsize: selectedItem.iconsize, label: ‘Item Deactivated’ });

    As you mentioned, it will be possible to update the icon in the next version. Just wanted to check with you, has it been made available with version 3.4.0.

    Regards,
    Yatin Babaria

    jqxTree-updateItem-method not work! #60109

    Dimitar
    Participant

    Hello Yatin Babaria,

    This functionality works in version 3.4.0.

    Best Regards,
    Dimitar

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

    jqxTree-updateItem-method not work! #60121

    yatinpatel
    Participant

    Hi Dimitar,

    Thanks for replying. It works as expected.

    Regards,
    Yatin Babaria

    • This reply was modified 9 years, 9 months ago by  yatinpatel.
    • This reply was modified 9 years, 9 months ago by  yatinpatel.
    jqxTree-updateItem-method not work! #91093

    Jonas
    Participant

    Hi,

    Is it possible to use updateItem to update the id and parentId of an item?

    The reason I need to update the id and parentId is that I am moving elements from one list to another (like in the drag and drop example), and need the moved elements to conform to the destination list.

    Regards,
    Jonas

    jqxTree-updateItem-method not work! #91123

    Dimitar
    Participant

    Hi Jonas,

    Unfortunately, these ids cannot be updated using the method updateItem.

    Best Regards,
    Dimitar

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

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

You must be logged in to reply to this topic.