jQuery UI Widgets › Forums › Navigation › Tree › Updating a treeview node label
Tagged: dynamically, edit, jqxtree, node, Tree
This topic contains 4 replies, has 2 voices, and was last updated by psteele 12 years, 1 month ago.
-
Author
-
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?
Hello psteele,
Unfortunately, jqxTree does not support editing of the nodes dynamically.
Best Regards,
DimitarjQWidgets team
http://www.jqwidgets.com/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?
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,
DimitarjQWidgets team
http://www.jqwidgets.com/Awesome! Thanks!
-
AuthorPosts
You must be logged in to reply to this topic.