CODEWITHSUNDEEP
jqueryasp.net-mvckendo-asp.net-mvckendo-treeview
Dark S
Dark S

Reputation: 330

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

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

consider a treeview

P1

P2

P3

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.

Upvotes: 1

Views: 1391

Answers (1)

ibaris
ibaris

Reputation: 156

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

Upvotes: 2

Related Questions