CODEWITHSUNDEEP
kendo-ui
user3565914
user3565914

Reputation: 51

How to allow only one selection of checkboxes in kendo treeview / ui for jquery?

I want to make checkbox mode single in kendo treeview / ui for jquery.

But there is no official option for jquery. I found solution to scan all treeview and uncheck others one by one. But it puts me in trouble because i have 3-4 depth and over +500 items in my treeview. When i select 2nd time, it takes around 1-2 seconds and freeze all treeview for a while. This is a demo for dummy solution that i use. But it's not smooth for my actual treeview.

<!DOCTYPE html>
<html>
<head>
    <base href="https://demos.telerik.com/kendo-ui/treeview/index">
    <style>html { font-size: 14px; font-family: Arial, Helvetica, sans-serif; }</style>
    <title></title>
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2021.2.616/styles/kendo.default-v2.min.css" />

    <script src="https://kendo.cdn.telerik.com/2021.2.616/js/jquery.min.js"></script>
    
    
    <script src="https://kendo.cdn.telerik.com/2021.2.616/js/kendo.all.min.js"></script>
    
    

</head>
<body>
    <div id="example">
    <div class="demo-section wide k-content">
        <div id="demo-section-title" class="treeview-flex">
            <div>
                <h3>
                    Select nodes, folders and drag them between the TreeViews
                </h3>
            </div>
        </div>
        <div class="treeview-flex">
            <div id="treeview-kendo"></div>
        </div>
        <div class="treeview-flex">
            <div>
                <h4>Drag and Drop</h4>
            </div>
        </div>
        <div class="treeview-flex">
            <div id="treeview-telerik"></div>
        </div>
    </div>
    <script id="treeview" type="text/kendo-ui-template">

        # if (!item.items && item.spriteCssClass) { #
        #: item.text #
        <span class='k-icon k-i-close kendo-icon'></span>
        # } else if(!item.items && !item.spriteCssClass) { #
        <span class="k-sprite pdf"></span>
        #: item.text #
        <span class='k-icon k-i-close telerik-icon'></span>
        # } else if (item.items && item.spriteCssClass){ #
        #: item.text #
        # } else { #
        <span class="k-sprite folder"></span>
        #: item.text #
        # } #
    </script>

    <script>
        function traverse(nodes, callback) {
        for (var i = 0; i < nodes.length; i++) {
          var node = nodes[i];
          var children = node.hasChildren && node.children.data();
          
          callback(node);
          
          if (children) {
            traverse(children, callback);
          }
        }
      }
      
      function onCheck(e) {
        var dataItem = this.dataItem(e.node);

        var rootNodes = $("#treeview-kendo").getKendoTreeView().dataSource.data();

        traverse(rootNodes, function(node) {
          if (node != dataItem) {
            node.set("checked", false);
          }
        });
      }

$("#treeview-kendo").kendoTreeView({
            template: kendo.template($("#treeview").html()),
            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: "Reports", expanded: true, spriteCssClass: "folder", items: [
                            { id: 7, text: "February.pdf", spriteCssClass: "pdf" },
                            { id: 8, text: "March.pdf", spriteCssClass: "pdf" },
                            { id: 9, text: "April.pdf", spriteCssClass: "pdf" }
                        ]
                    }
                ]
            }],
            //dragAndDrop: true,
            checkboxes: {
                checkChildren: true
                                
            },
                        check: onCheck,
            loadOnDemand: true
        });

        
       
    </script>
    <style>
        @media screen and (max-width: 680px) {
            .treeview-flex {
                flex: auto !important;
                width: 100%;
            }
        }

        #demo-section-title h3 {
            margin-bottom: 2em;
            text-align: center;
        }

        .treeview-flex h4 {
            color: #656565;
            margin-bottom: 1em;
            text-align: center;
        }

        #demo-section-title {
            width: 100%;
            flex: auto;
        }

        .treeview-flex {
            flex: 1;
            -ms-flex: 1 0 auto;
        }

        .k-treeview {
            max-width: 240px;
            margin: 0 auto;
        }

        #treeview-kendo .k-sprite {
            background-image: url("../content/web/treeview/coloricons-sprite.png");
        }

        #treeview-telerik .k-sprite {
            background-image: url("../content/web/treeview/coloricons-sprite.png");
        }

        .demo-section {
            margin-bottom: 5px;
            overflow: auto;
            display: flex;
            justify-content: space-between;
            flex-wrap: wrap;
        }

        .rootfolder {
            background-position: 0 0;
        }

        .folder {
            background-position: 0 -16px;
        }

        .pdf {
            background-position: 0 -32px;
        }

        .html {
            background-position: 0 -48px;
        }

        .image {
            background-position: 0 -64px;
        }

    </style>
</div>


    

</body>
</html>

There is an option mode:"single" for Angular. single mode checkbox for treeview in kendo ui for Angular

But i'm looking same kendo ui for Jquery.

Upvotes: 1

Views: 2075

Answers (2)

bindul barot
bindul barot

Reputation: 1

check: function(e) {
  $("#treeview .k-checkbox-wrapper input").prop("checked", false).trigger("change");
  $(e.node).find("input").prop("checked", true);
}

Line 1: $("#treeview .k-checkbox-wrapper input").prop("checked", false).trigger("change");

  • Deselect the all the checkbox from tree and trigger will update and manage the state of kendotree view.

Line 2 : $(e.node).find("input").prop("checked", true);

  • Tree will check the selected node using prop.

Upvotes: 0

David
David

Reputation: 6131

You don't need to manually traverse the nodes. You can leverage JQuery to get the appropriate selector and let it do it for you in the check event (documentation).

Basically what you'd do is:

  1. Handle the check event
  2. Get the inputs by selecting the treeview's k-checkbox-wrapper class' input
  3. Set the checked property to false
  4. Set the node that was checked back to true

Example:

check: function(e) {
  $("#treeview .k-checkbox-wrapper input").prop("checked", false);
  $(e.node).find("input").prop("checked", true);
}

Fiddle: https://dojo.telerik.com/ALEJetoD

Upvotes: 1

Related Questions