Prevent Navigation when NavigateUrl is populated

[Greg]

Hello,

Is there a method that would prevent the TreeView component from completing the Navigation, when the node has the NavigateUrl populated?

For example, in the NodeSelecting callback, setting the

NodeSelectEventArgs.Cancel = true 

does not prevent Navigation from occurring.

Code Snippet:

<SfTreeView @ref="@TreeView" ExpandOn="ExpandAction.Click" TValue="TreeNodeItem"

            AllowMultiSelection=false EnablePersistence=false>

    <TreeViewFieldsSettings Id="NodeId" Text="NodeText" IconCss="IconCss"

                            DataSource="@MenuItems" HasChildren="HasChildren"

                            ParentID="ParentId" NavigateUrl="NavLink" />

    <TreeViewEvents NodeSelecting="@NodeSelecting" NodeSelected="@NodeSelected" TValue="TreeNodeItem" />

</SfTreeView>

private async Task NodeSelecting(NodeSelectEventArgs args)

{

    if (NavigationLocked)

    {

    args.Cancel = true;

    return;

}

[SureshRajan Alagarsamy]

Hi Greg,

Greetings from Syncfusion support.

We have reviewed your query and understand that you are looking to prevent page navigation when selecting a node in the TreeView component. To achieve this, we have utilized the “HtmlAttributes” field and added custom class name for the required node and we have set the “pointer-events: none” CSS property on the node text class. This prevents mouse click events, ensuring that page navigation does not occur when clicking on a TreeView node.

Refer to the below code snippet for further reference.

[Index.razor]

 

<SfTreeView TValue="MailItem" ID="treeview">

   <TreeViewFieldsSettings TValue="MailItem" Id="ID" NavigateUrl="NavigateUrl" DataSource="@MyFolder" Text="FolderName" ParentID="ParentId"

     HasChildren="HasSubFolders" Expanded="Expanded" HtmlAttributes="HtmlAttribute"></TreeViewFieldsSettings>

</SfTreeView>

 

.....

 

@code {

    public class MailItem

    {

        .....

        public Dictionary<string, object> HtmlAttribute { get; set; }

    }

    List<MailItem> MyFolder = new List<MailItem>();

    protected override void OnInitialized()

    {

        base.OnInitialized();

        MyFolder.Add(new MailItem

            {

                ID = "1",

                FolderName = "Inbox",

                HasSubFolders = true,

                Expanded = true,

                NavigateUrl = "/counter",

                HtmlAttribute = new Dictionary<string, object>() { { "class", "urlNode" } },

            });

        MyFolder.Add(new MailItem

            {

                ID = "2",

                ParentId = "1",

                FolderName = "Categories",

                Expanded = true,

                HasSubFolders = true,

                NavigateUrl = "/home",

                HtmlAttribute = new Dictionary<string, object>() { { "class", "urlNode" } },

            });

        ......

    }

}

 

<style>

    #treeview.e-treeview.e-fullrow-wrap .urlNode  .e-list-url {

        pointer-events: none;

    }

</style>

 

We have also attached a sample for your reference.

Sample : https://blazorplayground.syncfusion.com/VDhpDeLzTmlmrVob

Check out the shared details and get back to us if you need any further assistance.

Regards,
Suresh.

[Greg]

Thank you Suresh, this process does seem to function correctly.  

Though, I suppose that I did not fully explain the request.  The issue is that we need to dynamically prevent navigation.  For example, when a user is making changes on a page, we do not want to allow the user to navigate away from the page, unless we prompt the user, and they accept the prompt.

We have tried implementing the Navigation Lock component, which works for external navigation, but the internal navigation attempts are not  intercepted and handled.

Short of updating the menu items when the navigation should be prevented, and re-rendering the component, are there any other built-in process to the Treeview to prevent navigation in these circumstances?

[Jafar Ali Shahulhameed]

Hi Greg,

We have prepared a sample to meet your requirement to prevent and allowing the page navigation. Kindly refer the code changes below,

[Index.razor]

 

<SfButton @onclick="onDisableClick">Disable</SfButton>

 

public void onDisableClick()

{

    var selectedNodes = TreeInstance.SelectedNodes;

    if (selectedNodes != null)

    {

        var currentNode = TreeInstance.GetTreeData(TreeInstance.SelectedNodes[0]);

        currentNode[0].HtmlAttribute["class"] = "allow-nav";

    }

}

We have attached the sample for your reference,

Sample: Attached as zip file

Kindly try out the shared details and get back to us if you need further assistance.

Regards,

Jafar

Attachment: BlazorApp_TreeView_1b9e1833.zip

[Greg]

Okay, thanks.  Please close the request.