jqxTree-updateItem-method not work! - Angular, Vue, React, Web Components, Javascript, HTML5 Widgets

Tagged: icon, javascript tree, javascript treeview, jqxtree, Tree, treeview control, updateItem

This topic contains 9 replies, has 6 voices, and was last updated by Dimitar 8 years, 1 month ago.

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

Author

jqxTree-updateItem-method not work! Posts

May 16, 2013 at 10:05 am 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?

May 16, 2013 at 12:27 pm 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/

June 19, 2013 at 1:42 am 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

June 19, 2013 at 4:39 am 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/

June 19, 2013 at 2:17 pm jqxTree-updateItem-method not work! #23437

bienhaui

Member

thank you

September 25, 2014 at 8:56 am 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

September 26, 2014 at 6:09 am 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/

September 26, 2014 at 7:00 am jqxTree-updateItem-method not work! #60121

yatinpatel

Participant

Hi Dimitar,

Thanks for replying. It works as expected.

Regards,
Yatin Babaria

January 30, 2017 at 10:31 am 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

January 31, 2017 at 6:44 am 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/

Author

Posts

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

You must be logged in to reply to this topic.