Checkbox plugin and tree refresh

[chee...@gmail.com]

I have a jstree that uses checkbox plugin that i create once and then refresh if a user selects an item in a dropdown list:

if (!!$('#JsTreeDiv').data('jstree')) {

                                    $('#JsTreeDiv').off('select_node.jstree deselect_node.jstree', self.treeNodeSelected);

                                    $('#JsTreeDiv').jstree('refresh');

                                } else {

                                    self.setupJsTree();

                                }

I am using an ajax call to populate the tree with JSON data on init or refresh and when i inspect the data in the success handler everything is as expected (correct values for state.selected).  However after the refresh completes the value of the checkboxes have not changed as expected.  In fact i can call refresh as i select different values from the dropdown and the tree doesn't change.  Any idea what i am doing wrong?  Also for the changed.jstree event how can i get the node text/value that was actually selected not the array with all selected nodes?

Here is the setup function:

                                self.setupJsTree = function () {

                    $('#JsTreeDiv').jstree({

                        'core': {

                            'data': {

                                type: 'GET',

                                url: '../api/GroupMgmt/GetGroupTree',

                                contentType: 'application/json; charset=utf-8',

                                dataType: 'json',

                                data: function (node) {

                                    return { customerId: self.customerId(),

                                             roleCode: self.selectedRoleCode()

                                    };

                                },

                                success: function (data) {

                                    return data;

                                },

                                error: function (jqXHR, textStatus, errorThrown) {

                                    notifyUser(textStatus + '/' + errorThrown, 'error', 'center');

                                }

                            },

                            'multiple': true

                        },

                        'checkbox' : {

                            keep_selected_style : false,

                            three_state: false,

                            visible : true,

                            whole_node : true

                        },

                        'plugins' : [ "checkbox" ]

                    });

                    

                    $('#JsTreeDiv').on('select_node.jstree deselect_node.jstree', self.treeNodeSelected);

                    $('#JsTreeDiv').on('refresh.jstree', function() {

                         $('#JsTreeDiv').on('select_node.jstree deselect_node.jstree', self.treeNodeSelected);

                    });

                    

                };

                    

Here is the select_node.jstree/deselected_node.jstree handler:

self.treeNodeSelected = function(node, selected) {

                        var groupCode = !!selected ? selected.node.original.value : $('#JsTreeDiv').jstree('get_selected')[0];

                        $.ajax({

                            type: 'POST',

                            url: '../api/RoleMgmt/PostUpdateRoleGroupAssociation',

                            data: JSON.stringify({

                                groupId: groupCode,

                                customerId: self.customerId(),

                                roleCode: self.selectedRoleCode(),

                                checkboxValue: selected.node.state.selected

                            }),

                            contentType: 'application/json; charset=utf-8',

                            dataType: 'json',

                            success: function(data) {

                                if (!!data.Error) {

                                    //an error occured...undo the selection/deselection of the node

                                    selected.node.state.selected ? $('#JsTreeDiv').jstree('deselect_node', groupCode, true) :

                                        $('#JsTreeDiv').jstree('select_node', groupCode, true);

                                    notifyUser(data.Error, 'error', 'center');

                                } else {

                                    //add or remove group from array and sort if needed

                                    if (selected.node.state.selected) {

                                        self.userGroups.push({ group_nm: selected.node.original.text, group_cd: selected.node.original.value });

                                        self.userGroups.sort(function(left, right) { return left.group_nm == right.group_nm ? 0 : (left.group_nm < right.group_nm ? -1 : 1); });

                                    } else {

                                        self.userGroups.remove(function(item) { return item.group_cd === selected.node.original.value; });

                                    }

                                    //disable tabs 2 and 3 if there are no groups in the dropdown menu

                                    self.userGroups().length === 0 ? $('#tabs').tabs('option', 'disabled', [2, 3]) : $('#tabs').tabs('option', 'disabled', []);

                                }

                            },

                            error: function(jqXHR, textStatus, errorThrown) {

                                notifyUser(textStatus + '/' + errorThrown, 'error', 'center');

                            }

                        });

                    };

Thanks, 

Mike

[Ivan Bozhanov]

Refresh takes the current state and then reapplies it to the tree once reloaded. If you also pass state.opened (and do not rely on the tree reopening nodes) then you can use load_node('#') instead of refresh() Or you can use either of those simple plugins - the first one will not reset the state completely, the second one will ignore the selection part of the section:

// no state
(function ($, undefined) {
    "use strict";
    $.jstree.plugins.nostate = function () {
        this.set_state = function (state, callback) {
            if(callback) { callback.call(this); }
            this.trigger('set_state');
        };
    };
})(jQuery);

// no selected in state
(function ($, undefined) {
    "use strict";
    $.jstree.plugins.noselectedstate = function (options, parent) {
        this.get_state = function () {
            var state = parent.get_state.call(this);
            delete state.core.selected;
            return state;
        };
    };
})(jQuery);

Add any of those in your code and add "nostate" or "noselectedstate" to your plugins array.

[chee...@gmail.com]

the noselectedstate works like a charm for what i want.  Many many thanks.  Will this be included in the next beta or should i just plan to put it in a separate js file?

[Ivan Bozhanov]

I am glad it works for you :) No, sorry - this will not be included - simply keep it in a separate file - it will also be in the repository but it will not but bundled.