TreeView Badge

[Sarah]

Hi,

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.

thank you

[LeoLavanya Dhanaraj]

Hi Sarah,

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).

Sample : https://www.syncfusion.com/downloads/support/directtrac/general/ze/SidebarTreeViewNavUrl6.0-1610428897.zip

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.

Regards,

Leo Lavanya Dhanaraj

[Sarah]

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.

[SureshRajan Alagarsamy]

Hi Sarah,

We have reviewed your query and understand that you are looking to increase the Badge count value based on a button click in the Sidebar component. We have successfully addressed your requirement using JavaScript interop calls.

In our solution, we utilized a JavaScript interop call to achieve the desired functionality. Here's a brief overview of the steps we took:

1. We fetched the active element using JavaScript.
2. From the active element, we retrieved the badge inner text value.
3. We converted the inner text value from a string to an integer.
4. Incremented the value by 1.
5. Converted the updated value back to a string and assigned it to the badge's inner text.

Refer to the below code snippet for further reference.

[Index.razor]

 

<div id="wrapper" style="width:100%">

    <div >

        ....

 

        <!--header-section  declaration -->

        <!-- main-content declaration -->

        <div class="main-content" id="main-text" style="height:100vh">

            <div class="sidebar-content">

                <button class="btn btn-primary" @onclick="IncrementCount">Click me</button>

            </div>

        </div>

    </div>

</div>

 

@code {

    SfTreeView<TreeData> TreeView;

    ....

 

    private async Task IncrementCount()

    {

        var selectedItem = TreeView.SelectedNodes;

        await jsruntime.InvokeAsync<TreeData>("BadgeIncrement", selectedItem);

        StateHasChanged();

 

    }

    ....

 

}

[_Layout.cshtml]

 

<script>

        function BadgeIncrement(selectedNode){

            var activeElement = document.getElementsByClassName('e-active')[0];

            activeElement.getElementsByClassName('e-badge')[0].innerText = parseInt(a.getElementsByClassName('e-badge')[0].innerText) + 1;

        }

</script>

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

Regards,
Suresh.

Attachment: Sidebar_Badge_2e69a4a7.zip

[Sarah]

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?

[SureshRajan Alagarsamy]

Hi Sarah,

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.

1. Whether you want to keep a distinct badge count for each user ?
2. Are you want to notify the badge count based on the respective user ?

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.

Regards,
Suresh.