jQuery UI Widgets Forums Navigation Tree Updating a treeview node label

This topic contains 4 replies, has 2 voices, and was last updated by  psteele 12 years, 1 month ago.

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
  • Updating a treeview node label #8310

    psteele
    Member

    I’ve got an application where I allow the user to select a node from the treeview and edit it’s label in a separate textbox somewhere else on the form. I’m holding on to the node they select in the ‘select’ event:

    var args = event.args;
    var item = $('#menuTreeview').jqxTree('getItem', args.element);
    currentTreeNode = item;

    When the user is done editing(lost focus), I want to update the treeview with the new label. I can update the node with:

    currentTreeNode.label = $('#itemName').val();

    But how do I get the treeview to reflect this change? I’ve tried calling the ‘selectItem’ method hoping that would update the display (it doesn’t). I’ve also tried calling the treeView’s refresh() method but that doesn’t update the treeview either.

    Is there a way to do this (updating the label for the selected node) without reloading the entire treeview?

    Updating a treeview node label #8363

    Dimitar
    Participant

    Hello psteele,

    Unfortunately, jqxTree does not support editing of the nodes dynamically.

    Best Regards,
    Dimitar

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

    Updating a treeview node label #8373

    psteele
    Member

    Ok, so I’ll have to reload the entire treeview to see the change, correct? Or could I remove the old one and insert a new one (with the updated label) in the exact same spot — even if it’s in the middle of other nodes?

    Updating a treeview node label #8399

    Dimitar
    Participant

    Hi psteele,

    Here is an example showing how to edit tree nodes on focusout event of an input element:

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <title id='Description'>jQuery Tree Sample</title>
    <link rel="stylesheet" href="../../jqwidgets2.4.2/jqwidgets/styles/jqx.base.css"
    type="text/css" />
    <script type="text/javascript" src="../../scripts/jquery-1.8.1.min.js"></script>
    <script type="text/javascript" src="../../jqwidgets2.4.2/jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../../jqwidgets2.4.2/jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../../jqwidgets2.4.2/jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../../jqwidgets2.4.2/jqwidgets/jqxpanel.js"></script>
    <script type="text/javascript" src="../../jqwidgets2.4.2/jqwidgets/jqxtree.js"></script>
    <script type="text/javascript">
    $(document).ready(function () {
    // Create jqxTree
    $('#menuTreeview').jqxTree({ height: '300px', width: '300px' });
    $('#menuTreeview').bind('select', function (event) {
    var selItem = $('#menuTreeview').jqxTree('getSelectedItem');
    $("body").append(selItem.label + "<br />");
    });
    $("#itemName").focusout(function () {
    $('#menuTreeview').jqxTree('getSelectedItem').label = $("#itemName").val();
    var selectedElement = $("#menuTreeview").jqxTree('getSelectedItem').element;
    $("#" + selectedElement.id + " .jqx-tree-item:first").text($("#itemName").val());
    });
    });
    </script>
    </head>
    <body class='default'>
    <div>
    Update selected node:
    <input type="text" id="itemName" />
    </div>
    <div id='menuTreeview'>
    <ul>
    <li item-selected='true'>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>
    </ul>
    </div>
    </body>
    </html>

    Best Regards,
    Dimitar

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

    Updating a treeview node label #8433

    psteele
    Member

    Awesome! Thanks!

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

You must be logged in to reply to this topic.