Updating tree source shifting checkboxes

[MarinaParticipant]

Hi,
I have treeviews inside tabs. When user click button on one of the tabs tree view source of tree of other tab should be updated. Its working fine except when i go to that tab tree view’s checkboxes looks shifted up a bit, but if i expand/collapse manually tree view its becoming fine. Any ideas?
Here is click event of button that belongs to tab 2 -its collect checkboxes from current tab(jqxTreeUsers) and then update source of tree from tab 1(jqxTreeLocate).

$("#saveUsersButton").on('click', function () {

                    //alert('save');
                    var items = $('#jqxTreeUsers').jqxTree('getCheckedItems');
                    var leafItems = new Array();
                    for (var i = 0; i < items.length; i++) {
                        if (items[i].hasItems == false) {
                            leafItems.push(items[i].value);
                        }
                    }

                    if (leafItems.length > 0) {

                        $.ajax({
                            type: 'POST',
                            url: 'wsAccountUsers.asmx/SaveAccountUsersToLocateByLoginID',
                            dataType: "json",
                            contentType: "application/json; charset=utf-8",
                            data: '{UsersList: "' + leafItems + '", CompanyID: ' + CompanyID + '}',
                            async: false,
                            success: function (response) {

                                SelectedUsers = leafItems;
                                //$('#msg').html("Request was sent for new locations.Requested Locations will show up on map in about minute.");
                                $('#jqxRequestStatusWindow').jqxWindow('setContent', 'Filters saved for locate users.<br />');
                                //open request status window on success
                                $('#jqxRequestStatusWindow').jqxWindow('open');
                                //close window in 4 sec
                                setTimeout(function () { $('#jqxRequestStatusWindow').jqxWindow('close'); }, 4000);
                             //update tree locate
                                $('#jqxTreeLocate').jqxTree({source: getAccountUsers(true)});

                            },
                            failure: function (response) {

                            }
                        });
                    }

                });

Thanks,
Marina

[HristoParticipant]

Hello Marina,

Important is to follow sequence explicitly. (initialization, correct nested DOM elements)
And often ignored use initTabContent property from jqxTabs.
Please take a look this example:
https://www.jseditor.io/?key=example-with-tabs-and-tree

Best Regards,
Hristo Hristov

jQWidgets team
http://www.jqwidgets.com

[MarinaParticipant]

Hristo,
I’m doing initTabContent and init my trees in it as well as other controls. the problem happening when I’m updating source of tree on button click from json data. In your example you only checking checkboxes on other tab, but not updating data source of tree.

  // init widgets.

                var initTabs = function (tab) {

                    switch (tab) {

                        case 0:
                            getSavedUsers();
                            $('#jqxTreeLocate').jqxTree({ height: '500px', checkboxes: true, source: getAccountUsers(true), width: '98%', theme: themeBootstrap });
                            $('#jqxTreeLocate').jqxTree('expandAll');

                            $("#inputSearchLocate").jqxInput({ placeHolder: "Search ...", height: 25, width: 200, minLength: 1 });
                            $('#locateUsersButton').jqxButton({ width: '100px', theme: theme });
                            $('#btnClearLocateTree').click(function () { clearTree('#jqxTreeLocate'); return false; });
                            break;
                        case 1:

                            $('#jqxTreeHistory').jqxTree({ height: '500px', source: getAccountUsers(false), width: '98%', theme: themeBootstrap });
                            $('#jqxTreeHistory').jqxTree('expandAll');
                            $("#jqxDateTimeInput").jqxDateTimeInput({ width: '150px', height: '25px', theme: themeBootstrap });

                            break;
                        case 2:
                            $('#jqxTreeSms').jqxTree({ height: '400px', checkboxes: true, source: getAccountUsers(false), width: '98%', theme: themeBootstrap });
                            $('#jqxTreeSms').jqxTree('expandAll');
                            $("#inputSearchSMS").jqxInput({ placeHolder: "Search ...", height: 25, width: 200, minLength: 1 });
                            $('#jqxTextArea').jqxTextArea({ placeHolder: 'Enter a SMS text', height: 50, width: 300, minLength: 1, theme: themeBootstrap });
                            $("#txtSubject").jqxInput({ placeHolder: "Enter a SMS Subject", height: 25, width: 300, minLength: 1, theme: themeBootstrap });
                            $('#sendSMSButton').jqxButton({ width: '80px', theme: theme });
                            $('#btnClearSMSTree').click(function () { clearTree('#jqxTreeSms'); return false; });
                            break;
                        case 3:
                            $('#jqxTreeUsers').jqxTree({ height: '500px', checkboxes: true, source: getAccountUsers(false), width: '98%', theme: themeBootstrap });
                            $('#jqxTreeUsers').jqxTree('expandAll');
                            $("#inputSearchUsers").jqxInput({ placeHolder: "Search ...", height: 25, width: 200, minLength: 1 });
                            $('#saveUsersButton').jqxButton({ width: '80px', theme: theme });
                            $('#btnClearUsersTree').click(function () { clearTree('#jqxTreeUsers'); return false; });
                            break;

                    }

[MarinaParticipant]

I found that its actually happening if you are not switching right away to tab that has tree.
If I switch to tab with tree I want to change source , then update source, then switch back to my tab with button then its working fine if I click on tab after all checkboxes aligned fine. so for now I had to just on button click to do that. Not sure if its right solution or bug.

                                //update tree locate
                                $('#jqxTabs').jqxTabs('select', 0);
                                $('#jqxTreeLocate').jqxTree({ source: getAccountUsers(true) });
                                $('#jqxTabs').jqxTabs('select', 3);

[HristoParticipant]

Hello Marina,

With set the source of the jqxTree is like creating a new tree. It is ok if you search this.
You could use jqxTree methods if you need to make particular changes (as “updateItem”).

Best Regards,
Hristo Hristov

jQWidgets team
http://www.jqwidgets.com

[Author]

Posts