In MainPage I used SfSidebar. I used SfTreeView inside SfSidebar. How to use Badge in SfTreeView? Due to the fact that SfSidebar is loaded only at the beginning, and then the user clicks on the menu, only @Body changes, and actually the used Badge is not refreshed.
Greetings from Syncfusion support.
We have validated the reported issue(After performing the Sidebar Treeview navigation, the Badge component(inside the TreeView) is not refreshed) and have created a sample to test it. Unfortunately, we were unable to reproduce the issue at our end. Here, we navigated to the desired page using the TreeView's navigateUrl property(similar to NavigationManager) and added the Badge component using Template support inside the TreeView component.
For your reference, we included the Blazor Sidebar sample in latest version(Sidebar with TreeView - V20.4.38).
Check out the below mentioned documentation links for further assistance.
Sidebar with TreeView : https://blazor.syncfusion.com/demos/sidebar/panel-with-responsive?theme=fluent
TreeView with Badge : https://blazor.syncfusion.com/demos/treeview/template?theme=fluent
Please check the attached sample and let us know if you are experiencing the issue in any specific customization. Could you please provide a complete code snippet or a sample that replicates the issue? This will help us to identify the root cause and provide you with a prompt solution.
Leo Lavanya Dhanaraj
Hi LeoLavanya Dhanaraj,
Thank you for the source you prepared.
I will present my meaning in another way. In the image below, I want to have the image on the right when the user clicks on the "click me" button.
Refer to the below code snippet for further reference.
<div id="wrapper" style="width:100%">
<!--header-section declaration -->
<!-- main-content declaration -->
<div class="main-content" id="main-text" style="height:100vh">
<button class="btn btn-primary" @onclick="IncrementCount">Click me</button>
private async Task IncrementCount()
var selectedItem = TreeView.SelectedNodes;
await jsruntime.InvokeAsync<TreeData>("BadgeIncrement", selectedItem);
var activeElement = document.getElementsByClassName('e-active');
activeElement.getElementsByClassName('e-badge').innerText = parseInt(a.getElementsByClassName('e-badge').innerText) + 1;
Check out the shared sample and get back to us if you need any further assistance.
Hi LeoLavanya Dhanaraj,
Excellent. Thank you for your reply.
Another case that I encountered before: suppose one of the Treeview items is used for the user's cartable, and the number of tasks in the user's cartable is displayed using a badge. The number of tasks in the cartable of each user is read from the Database.
Let's assume that users A and B have opened the website (the main layout is loaded for the user). Next, user A places a task in user B's cartable. How should I update user B's cartable badge?
After reviewing your query, it seems that we are not entirely clear about your specific requirements. We aim to clarify these requirements based on our understanding.
We strongly suggest you provide video footage or images that illustrate your exact needs. This visual aid will enable us to better understand your query and provide you with a prompt solution.