CODEWITHSUNDEEP
javascriptjquerykendo-uitelerikkendo-treeview
achchayya
achchayya

Reputation: 101

Kendo UI TreeView enable/disable dragAndDrop event dynamically

I would like to know how to enable dragAndDrop functionality through javascript/jQuery dynamically.

I know this can be done at the time of initialization with the following code snippet : 

$("#treeview").kendoTreeView({
  dragAndDrop: true,
  dataSource: [
    { text: "foo" },
    { text: "bar" }
  ]
});

But I want this dragAndDrop functionality with toggle button, I mean enable/disable dragAndDrop functionality on tree nodes with a button click.

Any code snippet help me a lot.

Upvotes: 1

Views: 867

Answers (1)

Jayesh Goyani
Jayesh Goyani

Reputation: 11154

Please try with the below code snippet.

<body>
    <div id="treeview"></div>
    <br />
    s
    Drag Drop Enabled:-
    <input type="checkbox" id="chkDragNDrop" />
    <script>
        $("#treeview").kendoTreeView({
            dragAndDrop: true,
            dragstart: onDragStart,
            dataSource: [
              { text: "foo" },
              { text: "bar" }
            ]
        });
        function onDragStart(e) {
            if ($("#chkDragNDrop").prop("checked") == false) {
                e.preventDefault();
            }
        }
    </script> 
</body>

Let me know if any concern.

Upvotes: 1

Related Questions