using a SfTreeView within the sidebar

[Paul]

Hello

I have my menu working great, I have a SfTreeView within the sidebar

When I click from one link to the another the selected item and the page do change

However if I use NavigationManager NavigationManager to change page (Such as a use logs in)

It does not update the highlighted link on the menu 

I tried InvokeAsync(StateHasChanged);

Any ideas

My Mainlayout is like attached

Thanks

Attachment: MinLayout_8f669c35.zip

[Sharon Sanchez Selvaraj]

Hi Paul, 

 

Greetings from Syncfusion Support. 

 

We have checked with your sample. And we are unable to understand your exact issue, as the page navigates properly when selecting the node. 

 

In TreeView component, we have a field property navigateUrl similar to that of NavigationManager. You can navigate to the desired page by mapping this field in the dataSource. 

 

If we have misunderstood your requirement, please modify the below sample similar to your scenario with clear details on your issue with Syncfusion components, so that we can assist you promptly. 

 

https://www.syncfusion.com/downloads/support/directtrac/general/ze/SidebarSample-2068644203.zip 

 

Refer to the below links to know more about Sidebar component. 

 

Demo: https://blazor.syncfusion.com/demos/sidebar/sidebar-with-menu?theme=bootstrap4 

 

Documentation: https://blazor.syncfusion.com/documentation/sidebar/getting-started/ 

 

Please get back to us if you need further assistance. 

 

Regards, 

 

Sharon Sanchez S. 

[Paul]

Hello

The issue I have is

When You use the menu to navigate around the site, it works well

Once you select a menu item, it 
- navigates to the page
- Highlights what you have selected
- Disables clicking on that selected item again, until you move to another page

Which is great and as expected

However if I use NavigationManager.NavigateTo in my code (for another reason)

Then the menu does not change, so the user can not go back inthoery, or click page to the page they were on before

So a solution to my issue would be

Have the menu, not highlight on selection
Have the menu, not disabled the current item on selected
Have the ability to UN highlight or unselected ALL items, via code)

I have made a video to show what I mean

Thank You

Attachment: video2_4cd1b40d.zip

[Keerthana Rajendran]

Hi Paul,  

 

Thanks for the update. We are happy that solution is found. Please get back to us with details in case of assistance needed. We will be happy to assist you. 

 

Regards, 

Keerthana. 

[Paul]

Sorry for the misunderstanding I have not found a solution, that list just says ways It could be fixed, at a guess but I do not know if they are possible

[Sharon Sanchez Selvaraj]

Hi Paul, 

  

We have checked with your reported video and found that you need to navigate to another page when clicking the TreeView node. We have modified the sample based on your requirement. 

  

Refer to the code snippet.​ 

  

Counter page: 

  

@using Syncfusion.Blazor.Buttons 

@inject IJSRuntime  IJSRuntime 

@inject NavigationManager NavigationManager 

  

  

<SfButton OnClick="click">Click</SfButton> 

@code{ 

    public async Task click() 

    { 

        NavigationManager.NavigateTo("fetchdata", false); 

        await IJSRuntime.InvokeAsync<object>("activeclass"); 

    } 

} 

  

wwwroot/handler.js 

  

function activeclass() { 

    if (document.querySelector('.e-active') != null && document.querySelector('.e-active').classList.contains('e-active')) { 

        document.querySelector('.e-active').classList.remove('e-active'); 

    } 

} 

  

In the below sample, we have removed the active class of TreeView component using JS interop on button click ( It triggers the select event of TreeView component).  

  

Refer to the sample attached below. 

  

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

  

Please get back to us if you need further assistance. 

  

Regards, 

  

Sharon Sanchez S.