I am using the a tree view/tree grid plugin which is called fancytree (Here is the link)
I initially (when the page loads) set the selectMode to 2 which allows the users to select multiple options.
// Init
$("#Organizations .OrgTree").each(function () {
var $this = $(this);
var organizationUnitId = $this.data("orgid");
//var treeData = JSON.parse($("#treeData_" + organizationUnitId).val());
$this.fancytree({
extensions: ["persist"],
selectMode: 2,
persist: {
expandLazy: true
store: "auto" 'session': sessionStore
},
icons: false,
checkbox: true,
toggleEffect: null, //disable animations
source: window["treeData_" + organizationUnitId], // treeData
lazyLoad: function (event, data) {
var node = data.node;
data.result = {
// Some data
};
}
});
});
What I want to do is, when I click on a button, I want to change the selectMode and set it to 1 or 3. I have tried to read through the documentation and found this as well But I won't work. Here is some code:
//Bind click to search button
$("#changeSelectModeBtn").click(function () {
debugger;
$("#Organizations .OrgTree").fancytree("getTree").visit(function (node) {
node.setSelected(false);
});
$("#Organizations .OrgTree").fancytree({ selectMode: 3 });
var selectedKeys = [];
$("#Organizations .OrgTree").each(function () {
var $this = $(this);
var orgTree = $(this).fancytree("getTree");
var selectedParentNodes = orgTree.getSelectedNodes();
for (node in selectedParentNodes) {
selectedKeys.push(selectedParentNodes[node].key)
}
// Save orgtree in hidden fields
var organizationUnitId = $this.data("orgid");
var treeData = orgTree.toDict(true);
window["treeData_" + organizationUnitId] = treeData.children; //$("#treeData_" + organizationUnitId).val(JSON.stringify(treeData.children))
});
if (selectedKeys) {
$("#HiddenOrganizationUnitIds").val(selectedKeys.join(","));
}
})
Can someone please help me? Thanks in advance!
