How to restrict user to select only one child from parent node Kendo Tree view MVC

Question

I want allow the user to select only one child from the parent node, means

consider a treeview

P1

• C1
• C2
• C3

P2

• A1
• A2
• A3

P3

• S1
• S2
• S3

Here user can select multiple childe node but the restriction is that the user can only select one child in one parent node

I found a fiddle link for it which can disable selection once you select one child but it disables all node, and im unable to disable those checkboxes up to its parent only.

here is the link

I changed that javascript with

            $("#treeview").kendoTreeView({
                checkboxes: {
                    checkChildren: true,
                  template:"# if(!item.hasChildren){# <input type='checkbox'  name='checkedFiles[#= item.id #]' value='true' />#}#"
                },

        dataSource: [
          { id: 1, text: "My Documents", expanded: true, spriteCssClass: "rootfolder", items: [
            { id: 2, text: "Kendo UI Project", expanded: true, spriteCssClass: "folder", items: [
              { id: 3, text: "about.html", spriteCssClass: "html" },
              { id: 4, text: "index.html", spriteCssClass: "html" },
              { id: 5, text: "logo.png", spriteCssClass: "image" }
            ]
            },
            { id: 6, text: "New Website", expanded: true, spriteCssClass: "folder", items: [
              { id: 7, text: "mockup.jpg", spriteCssClass: "image" },
              { id: 8, text: "Research.pdf", spriteCssClass: "pdf" },
            ] }
          ] },
          { id: 9, text: "Reports", expanded: true, spriteCssClass: "folder", items: [
              { id: 10, text: "February.pdf", spriteCssClass: "pdf" },
              { id: 11, text: "March.pdf", spriteCssClass: "pdf" },
              { id: 12, text: "April.pdf", spriteCssClass: "pdf" }
            ] }
          ]
            });
  
  
  $('#treeview').on('click', 'input:checkbox', function(){
    var checkboxes = $('#treeview input:checkbox');
    var selected = checkboxes.filter(':checked');
    checkboxes.not(selected).prop('disabled', selected.length > 0)
})

I tried with trying to find its closest('ul').find('li input') then restrict disable only that ul but it did not work as im not good in jquery.

Answer 1

You can do it using the check event. Triggered after the user has checked or unchecked a checkbox. If checkChildren is true, the event is triggered after all checked states are updated. This event has been introduced in internal builds after 2014.2.828.

<div id="treeview"></div>
<script>
    $("#treeview").kendoTreeView({
        checkboxes: true,
        dataSource: [
          { text: "foo", items: [
              { text: "bar" }
          ] }
     ],
     check: function(e) {
         console.log("Checking", e.node);
         var checkboxes = $(e.node).parent().find("input:checkbox");
         var selected = checkboxes.filter(':checked');
         checkboxes.not(selected).prop('disabled', selected.length > 0);
     }
});
</script>

you can see the details here