CODEWITHSUNDEEP
jqueryjstree
user11469175
user11469175

Reputation:

How to disable multi selection in jsTree?

I created a common code based on class selector for the jsTree plugin. I applied this plugin to another page. I want to allow a single selection only on that particular page. I set multiple property to false. But it is not working. I triggered changed.jstree event to show/hide event dropdown for some node. I tried to disable selection in that event but that also not working.

Kindly help me to solve this issue.

jsTree plugin common code:

$(".jsTree").each(function (index, element) {
    if ($(element).data("isprocessed") != "1" && $(element).attr("isprocessed") != 1) {
        $(element).data("isprocessed", "1");
        $(element).attr("isprocessed", "1");
        $(this).jstree({
            core:
            {
                check_callback: true
            },
            checkbox:
            {
                keep_selected_style: true,
                three_state: ($(element).data("three-state") == "false" ? false : true)
            },
            search:
            {
                case_insensitive: true,
                show_only_matches: true
            },
            plugins: ["checkbox", "search", "changed"]
        }).on('search.jstree', function (nodes, str, res) {
            if (str.nodes.length === 0) {
                $(element).jstree(true).hide_all();
            }
        });
    }
});

jsTree code on another page:

$(document).ready(function () {
    $('#jsEvent').hide();
    $('#jsRoleTree').jstree({
        checkbox: {
            multiple: false,
        }
    });      
});

       
/* To select an event for event-related roles */
$('#jsRoleTree').on('changed.jstree', function (e, data) {
    $('#jsEvent').hide(); //Hide event dropdown
    var ref = $('#jsRoleTree').jstree(true);
    var nodes = ref.get_checked(); // use method get_checked

    $.each(nodes, function (i, nd) {
        if (nd != data.id)
            ref.disable_checkbox(nd);
    });
    
    //Show event dropdown
    for (i = 0; i < data.selected.length; i++) {
        var selectedNode = $(data.instance.get_node(data.selected[i]).text).text().trim();
        if (selectedNode == '@Constant.EventAdmin' || selectedNode == '@Constant.EventContributor' || selectedNode == '@Constant.EventSubscriber') {
            $('#jsEvent').show(); 
        }
    }
});

Upvotes: 0

Views: 701

Answers (1)

user11469175
user11469175

Reputation:

I solved the issue with the help of https://jsfiddle.net/mrc4fun/0a9r0902/. I made changes to the changed.jstree event.

Now the code will like:

$(document).ready(function () {
    $('#jsEvent').hide();
    $('#jsRoleTree').jstree({
        checkbox: {
            three_state: false,
            cascade: 'none'
        }
    });

    $('#jsRoleTree').on('changed.jstree', function (e, data) {
        $('#jsEvent').hide();
                
        //To allow singe-selection only
        if (data.selected.length > 1) {
            data.instance.uncheck_all(); //will invoke the changed event once
            data.instance.check_node(data.node);/*currently selected node*/
            return;
        }

        //To show the event dropdown
        for (i = 0; i < data.selected.length; i++) {
           var selectedNode = $(data.instance.get_node(data.selected[i]).text).text().trim();
           if (selectedNode == '@Constant.EventAdmin' || selectedNode == '@Constant.EventContributor' || selectedNode == '@Constant.EventSubscriber') {
               $('#jsEvent').show();
           }
        }
    });
});

Upvotes: 1

Related Questions