Link selected node with url

[Gosha]

Hello,

I am using TreeView as main sidebar navigation. When select node, url is changed by NavigateUrl propery.

But, how to select node when user click on Back button or refresh page?

When user click on Back button, page is changed but TreeView remain select old node.

When user refresh page, TreeView is unselected although is page in url.

Native Blazor nav control is automatically binded to url, how to achieve that effect with TreeView?

I tried through the NavigationManager, like this:

<SfTreeView @ref="tree" CssClass="main-treeview" TValue="TreeData" FullRowNavigable="true">
<TreeViewEvents TValue="TreeData" Created="SelectNodeByUrl"></TreeViewEvents>
<TreeViewFieldsSettings Id="NodeId" Text="NodeText" IconCss="IconCss" DataSource="Treedata" NavigateUrl="Page"></TreeViewFieldsSettings>
</SfTreeView>

@code {
protected override void OnInitialized() {
    NavigationManager.LocationChanged += LocationChanged;

    Treedata.Add(new TreeData { NodeId = "01", NodeText = "...", IconCss = "...", Page = "..." });
    Treedata.Add(new TreeData { NodeId = "02", NodeText = "...", IconCss = "...", Page = "..." });
    Treedata.Add(new TreeData { NodeId = "03", NodeText = "...", IconCss = "...", Page = "..."  });
}


private void LocationChanged(object sender, LocationChangedEventArgs e) {
    SelectNodeByUrl();
}


private void SelectNodeByUrl() {
    string page = NavigationManager.Uri.Replace(NavigationManager.BaseUri, "");
    string NodeId = Treedata.Find(x => x.Page == page).NodeId;
    if (!tree.GetNode(NodeId).Selected) tree.SelectedNodes = new [] {NodeId};
    StateHasChanged();
}
}

Is there an easier way?

Thanks

[Prasanth Madhaiyan]

Hi Gosha,

Greetings from Syncfusion support.

Currently We are validating the reported query in the TreeView component by preparing the sample. But we need some additional time and will update you with further details on or befor August 12, 2022.We appreciate your patience.

Regards,

Prasanth Madhaiyan.

[Gosha]

Hello,

Thanks for your reply, you don't need to make a sample by my workaround. It works, but that's not the point.

I'm looking for a simpler solution to bind url change and selected node, just like native nav component does.

For example, if someone uses treeview as navigation menu in sidebar, on node click, page will change and that is working fine. But, when user click on browser back button, page will change to previous but treeview will showing wrong node selected. How can treeview follow url change like native nav control, that is the basic question?

Also, when you on some page, for example, localhost/counter and refresh browser, page will remain "counter" but treeview node "counter" will not be selected.

It would be nice if the option "NavigateUrl" make a two-way connection with the url. Not just click-way connection ;)

Thanks

[Prasanth Madhaiyan]

Hi Gosha,

As per our earlier response, we are validating your reported query to provide you with the sample level solution. But we need some additional time and will update you with further details within two business days on August 12, 2022. We appreciate your patience.

Regards,

Prasanth Madhaiyan.

[Prasanth Madhaiyan]

Hi Gosha,

Thanks for your patience.

Query 1: If someone uses treeview as navigation menu in sidebar, on node click, page will change and that is working fine. But, when user click on browser back button, page will change to previous but treeview will showing wrong node selected. How can treeview follow url change like native nav control, that is the basic question?

We understand that you want the TreeView node to be unselected when you click on the browser back button. We have achieved your exact requirement by using the NavigationManager LocationChanged event to unselect the selected node when clicking the browser back button as a workaround by making an interop call.

Refer to the below code snippet.

[MainLayout.razor]

@inject NavigationManager NavigationManager

@inject IJSRuntime JsRuntime;

 

protected override void OnInitialized()

{

   NavigationManager.LocationChanged += LocationChanged;

   …

}

public async void LocationChanged(object sender, LocationChangedEventArgs e)

{

    if (!e.IsNavigationIntercepted)

    {

        await JsRuntime.InvokeAsync<object>("UnSelect");

    }

 

}

 

[_Host.cshtml]

<script>

    function UnSelect() {

        var items = document.getElementsByClassName('e-list-item');

        for (var i = 0; i < items.length; i++)

        {

        if (items[i].classList.contains('e-active'))

        {

            items[i].classList.remove('e-active');

        }

 

        }

    }

</script>

Query 2 : When you on some page, for example, localhost/counter and refresh browser, page will remain "counter" but treeview node "counter" will not be selected.

We understand that when you reload the browser page, the previously navigated page will be in the Url but its node is not selected. We have bound the TreeView DataBound event because it will be triggered when the TreeView data bound on the page reloads. By using the NavigationManager NavigateTo method, we navigate back to the initial page when you click the browse reload button.

Refer to the below code snippet.

[MainLayout.razor]

@inject NavigationManager NavigationManager

 

<SfSidebar HtmlAttributes="@HtmlAttribute" Width="290px" Target=".e-main-content" MediaQuery="(min-width:600px)" @bind-IsOpen="SidebarToggle">

…

   <SfTreeView CssClass="main-treeview"  @ref="tree" ExpandOn="@Expand" TValue="TreeData">

       <TreeViewFieldsSettings Id="NodeId" NavigateUrl="NavigateUrl" Text="NodeText" IconCss="IconCss" DataSource="Treedata" HasChildren="HasChild" ParentID="Pid">

       </TreeViewFieldsSettings>

       <TreeViewEvents TValue="TreeData" DataBound="dataBound"></TreeViewEvents>

   </SfTreeView>

…

</SfSidebar>

public void dataBound(DataBoundEventArgs<TreeData> args)

{

    NavigationManager.NavigateTo("/");

}

 

For your reference, we have attached the sample.

Sample : https://www.syncfusion.com/downloads/support/directtrac/general/ze/BlazorSideBarWithTreeView351442570.zip

Please check the shared sample and let us know if you need any further assistance.

Regards,

Prasanth Madhaiyan.