1. Home
  2. Forum
  3. Blazor
  4. using a SfTreeView within the sidebar

using a SfTreeView within the sidebar

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

5 Replies 1 reply marked as answer
SS Sharon Sanchez Selvaraj Syncfusion Team March 24, 2021 02:53 PM UTC

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. 
 
 
Refer to the below links to know more about Sidebar component. 
 
 
 
Please get back to us if you need further assistance. 
 
Regards, 
 
Sharon Sanchez S. 


PA Paul April 15, 2021 09:21 AM UTC

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

KR Keerthana Rajendran Syncfusion Team April 16, 2021 05:28 AM UTC

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. 


PA Paul April 16, 2021 08:17 AM UTC

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

SS Sharon Sanchez Selvaraj Syncfusion Team April 19, 2021 05:04 PM UTC

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. 
  
  
Please get back to us if you need further assistance. 
  
Regards, 
  
Sharon Sanchez S. 
 


Marked as answer
Loader.
Up arrow icon