Angular TreeView disable Drag and drop for single Elements

1 Answer 9 Views
TreeView
Nico
Top achievements
Rank 1
Iron
Nico asked on 29 May 2024, 07:33 AM

Hello,

i wante to disable drag and drop in my TreeView for specific Elements.

For example, i need something like that:

<ng-template kendoTreeViewNodeTemplate
                 let-dataItem>
      <span class="bold" [disable]="dataItem.name === 'uwe' ? true: false">
        {{dataItem.name}}
      </span>
   

</ng-template>

 

Best regards Nico

1 Answer, 1 is accepted

Sort by
0
Zornitsa
Telerik team
answered on 31 May 2024, 07:58 AM

Hi Nico,

Thank you for the shared code snippet.

In order to prevent the drag-and-drop functionality for particular items in the TreeView component, I would suggest verifying the currently dragged dataItem in the nodeDragStart event of the component and preventing the default action of the mentioned event only for the desired items:

<kendo-treeview
     ...
     (nodeDragStart)="onNodeDragStart($event)">
</kendo-treeview>
public onNodeDragStart(event: TreeItemDragStartEvent): void {
    let dataItem = event.sourceItem.item.dataItem;

    if (dataItem.name === "uwe") {
        event.preventDefault();
    }
}

For a sample demonstration of the above approach, please refer to the following StackBlitz example:

I hope the provided information is helpful.

Regards,
Zornitsa
Progress Telerik

Stay tuned by visiting our public roadmap and feedback portal pages! Or perhaps, if you are new to our Kendo family, check out our getting started resources
Tags
TreeView
Asked by
Nico
Top achievements
Rank 1
Iron
Answers by
Zornitsa
Telerik team
Share this question
or