Prevent a Node in the treeview to drag.

[chris johansson]

If I have a treeview and set AllowDragAndDrop="true".  There are some nodes that I want to prevent them to drag.  In order to do this, it seems that I can only get the ID from the node from args, then I need to look it up against my List TreeViewItems in order to check if its in a certain category.  (Not sure if I can do this another way).  Then I want to cancel this , but it looks like when this happens it freezes the image of the node and I can't do anything after that.  How can I lookup and cancel this properly to have the treeview return to normal? Video attached.

    private void OnNodeDragStart(DragAndDropEventArgs args)

    {

        var find = TreeViewItems.Find(x => x.Id == args.DraggedNodeData.Id);

        if (find.category != EnumTreeCategory.deliveryGroup.ToString())

        {

            args.Cancel = true;

            StateHasChanged();

        

        }

    }

Attachment: TreeViewDrag_7a410b23.zip

[Sowmiya Padmanaban]

Hi Chris Johansson,  

 

Sorry for the inconvenience. 

 

We were able to replicate your reported issue with TreeView component. We have considered this as a bug in TreeView component. We will include the fix for this issue in our next patch release which is expected to be rolled out at the mid of October 2020. 

 

Please, you can track the following feedback portal link to the status of bug fix. 

 

https://www.syncfusion.com/feedback/18575/script-error-thrown-during-drag-and-drop-of-treeview-component 

 

We appreciate your patience. 

 

Regards,  

Sowmiya.P 

[Muthukrishnan Kandasamy]

 

Hi Chris, 

 

Sorry for the inconvenience. 

 

Due to high priority feature implementation which is promised earlier, we were unable to include the fix for this issue in this week patch release. The fix for this issue will be included in next week patch release which is expected to be rolled out by end of October 2020. 

 

We appreciate your patience. 

 

Regards, 

Muthukrishnan K 

[chris johansson]

Will this tree feature still happen by the end of this month?

[Shameer Ali Baig Sulaiman Ali Baig]

Hi Chris, 

 

Due to some technical difficulties, we will not include this fix in Volume 3 SP release. But, we will include this fix in the first weekly patch release which rolls out after Volume 3 SP release, which is expected to be rolled out in the first week of November 2020. 

 

We appreciate your patience. 

 

Regards, 

Shameer Ali Baig S. 

[Sowmiya Padmanaban]

Hi Chris Johansson,  

 

Thanks for your patience. 

 

We are glad to announce that our patch release (V18.3.50) is rolled out successfully. In this release, we have included fix  for “Prevent the drag action for TreeView component in OnNodeDragStart event”. To access this fix, we suggest you to update the package to the latest version (V18.3.50). 

 

Please, refer the below sample which will help you to fullfil requirement. 

 

https://www.syncfusion.com/downloads/support/forum/158498/ze/TreeView-1652840729.zip 

 

Please get in touch with us if you would require any further assistance. 

 

Regards, 

Sowmiya.P 

[chris johansson]

Thank you, the cancel works now!

I got most of it working, except I am wondering how I prevent this scenario from happening.  When I drag a node in the tree you either have the + (to add) to a parent or the hamburger type sign.  I don't want that functionality with the hamburger sign. I just want to add to that node.

But in my dropped code, I check to see if the parent is a certain category and whether I add it directly in the node or adding it below it treats it as the same category in code and just puts it under that node which i don't want. How can I prevent that? i attached a video thanks

private void OnNodeDragStart(DragAndDropEventArgs args)

    {

        var node_details = this.FDITree.GetTreeData(args.DraggedNodeData.Id);

        if (node_details[0].category != EnumTreeCategory.deliveryGroup)

        {

            args.Cancel = true;

        }

    }

    private async void OnNodeDragged(DragAndDropEventArgs args)

    {

        try

        {

            if (args.DroppedNodeData == null || args.DroppedNodeData.Id==null)

                return;

            var findDroppedNode = TreeViewItems.Find(x => x.Id == args.DroppedNodeData.Id);

            var DraggedNodeIndex = TreeViewItems.FindIndex(x => x.Id == args.DraggedNodeData.Id);

            List<TreeViewItem> DraggedNodeData = this.FDITree.GetTreeData(args.DraggedNodeData.Id);

            List<TreeViewItem> DroppedNodeData = this.FDITree.GetTreeData(args.DroppedNodeData.Id);

            if (findDroppedNode.category == EnumTreeCategory.users)

            {

         

                ChemOrderTable = await fDIChemicalOrderTableData.getChemOrderTable(DraggedNodeData[0].ChemOrderID, chemOrderLines);

                ChemOrderTable.AccountManagerEmplID = DroppedNodeData[0].ACCOUNTMANAGEREMPLID;

                ChemOrderTable.Name = DroppedNodeData[0].ManagerName;

                if (findDroppedNode.ACCOUNTMANAGEREMPLID != CurrentUserInfo.ACCOUNTMANAGEREMPLID)

                {

                    TreeViewItems[DraggedNodeIndex].htmlAttributes = new Dictionary<string, object> { { "class", "hide" } };

                }

                else

                {

                    TreeViewItems[DraggedNodeIndex].htmlAttributes = null;

                }

                HttpResponseMessage responseMessage = HttpClient.PostAsJsonAsync(Constants.UpdateChemicalOrderTable, ChemOrderTable).Result;

                bool ret = await SharedFunctions.AXCallResponse(responseMessage);

                await ShowToast();

                if (ret == false)

                    await GridInstance.FocusAsync();

            }

            else

            {

                args.Cancel = true;

            }

        }

        catch (Exception e)

        {

            args.Cancel = true;

        }

        StateHasChanged();

    }

Attachment: TreeIssue_c010418e.zip

[Sowmiya Padmanaban]

Hi Chris Johansson,  

 

Based on your shared details, we have identified that you don’t want to drop the dragged node as the siblings of hovered node ( which denotes hamburger icon).  

 

You can achieve your requirement by using OnNodeDragStop event. We have passed the drop-indicator data in event argument of this event.  

 

e-drop-in will be notified with (+)Plus icon - Indicates that the dragged node is to be added as child of target node.  

  

e-drop-out will be notified with (-) Minus icon - Indicates that the dragged node is not to be dropped at the hovered region.  

  

e-drop-next will be notified with (hamburger icon) In between icon - Indicates that the dragged node is to be added as siblings of hovered region.  

 

You can prevent the drop by setting args.cancel as true in OnNodeDragStop event using the DropIndicator argument of that event. Please, refer the below code snippet. 

 

<SfTreeView @ref="tree" TValue="MailItem" ShowCheckBox="true" AllowDragAndDrop="true" AllowMultiSelection="true"> 

    <TreeViewFieldsSettings TValue="MailItem" Id="Id" DataSource="@MyFolder" Text="FolderName" ParentID="ParentId" HasChildren="HasSubFolders" Expanded="Expanded"></TreeViewFieldsSettings> 

    <TreeViewEvents TValue="MailItem"  OnNodeDragStop="dragStop" ></TreeViewEvents> 

    

</SfTreeView> 

    public void dragStop(Syncfusion.Blazor.Navigations.DragAndDropEventArgs args) 

    { 

        // compare the drag and drop indicator and prevent the drop of that particular node. 

        if (args.DropIndicator == "e-drop-next") 

        { 

            args.Cancel = true; 

        } 

    } 

 

 

Please, refer the below sample link: 

 

https://www.syncfusion.com/downloads/support/forum/158498/ze/TreeView-1224614319.zip 

 

Please let us know, if you need any further assistance. 

 

Regards,  

Sowmiya.P 

[Dev]

Do you have any property to allow only change order in treeview items, instead of changing the level structure (child/parent) for DropDown functionality?

If not,  how can we remove 'drop-in' indicator as it can be very confusing for the user to not have this functionality but still have indicators for that? 

Thanks!

Attachment: drop_in_indicatortreeview_Blazor_5422a1cc.zip

[SureshRajan Alagarsamy]

Hi Dev,

Based on your query, We have understood your concern and requiremnt. We have bound the 'OnNodeDragged' and 'OnNodeDragStop' events in the SfTreeView control to prevent the 'drop-in' icon from appearing and to prevent dropping of child and parent nodes.

Query 1: To remove the 'e-drop-in' icon, we have checked the OnNodeDragged event arguments and set the value args.cancel as true.

Query 2: Similarly, for preventing child nodes from being dropped, we have compared the drag and drop using the 'e-drop-in' indicator and prevented the drop of that particular node. To prevent parent nodes from being dropped, we have used the HasChildren property in OnNodeDragStop event arguments. When the HasChildren property is true, we set the args.cancel as true and prevent the parent from dropping.

Refer to the below code snippet for further assistance.

Code Snippet :

[Index.razor]

 

<SfTreeView TValue="MailItem" AllowDragAndDrop=true>

    <TreeViewFieldsSettings TValue="MailItem" Id="Id" DataSource="@MyFolder" Text="FolderName" ParentID="ParentId" HasChildren="HasSubFolders" Expanded="Expanded"></TreeViewFieldsSettings>

    <TreeViewEvents TValue="MailItem" OnNodeDragStop="dragStop" OnNodeDragged="nodeDragged"></TreeViewEvents>

</SfTreeView>

 

@Code {

    public void dragStop(DragAndDropEventArgs args)

    {

        // compare the drag and drop indicator and prevent the drop of that particular node.

        if (args.DropIndicator == "e-drop-in")

        {

            args.Cancel = true;

        }

        if (args.DraggedNodeData.HasChildren)

        {

            args.Cancel = true;

        }

    }

 

    public async void nodeDragged(DragAndDropEventArgs args)

    {

        // To remove the ‘drop-in’ icon

        if (args.DropIndicator == "e-drop-in")

        {

            args.Cancel = true;

        }

    }

}

 

Check out the attached sample and get back to us if you need any further assistance.

Regards,
Suresh.

Attachment: Treeview_50f235c1.zip