Badge on sidebar menu

Webix JS
#1

Hello,It is posible to add ‘badge’ on sidebar menu data ?
anyone have sample?

i have sample on this snippet

but how i can show master badge when sidebar is collapse?
https://snippet.webix.com/oe5i7jzj

Thank You

#2

It’s better to use templates to define the looks of items. I slightly modified the original sidebar template and added badges there for both cases (collapsed and expanded). Also, I guess you should store the numbers for badges in data (e.g. in badge field as in this small snippet, but maybe something more meaningful depending on what that is in data (messages, pages, etc)
Here I just place random numbers:
https://snippet.webix.com/bztx5t5z
Or you can show the number of subitems like here Code Snippet
Using this snippet, you can change the position of badges according to where you want to place them relative to the other content of each item.

#3

Thank you, how i can replace value badges while i clicked some buttons (this make some request on serverside, and get number of badge) ?

#4

When the server responds with some new data, set that number to the item that you want to update, like:

const numberFromServer = 100; // let's say this came from your backend server
$$("sidebar").updateItem("dashboard", { badge:numberFromServer });
// "dashboard" is the ID of an item
#5

Ahh, I got it
But i have some issue when sidebar is collapse, why badge on submenu are not display ?
https://snippet.webix.com/iip0o4vj

#6

Submenus have templates of their own. You cannot set it in sidebar config, but you can redefine it after sidebar initialization: Code Snippet