Setting Badge Programmatically

Webix JS
#1

How do I set a badge programmatically on a button? Specifically, a segment button.

#2

Firstly, by API a badge can only be set to a standard, not segmented button. But you can provide the same badges for Segmented options via CSS:

view:"segmented", options:[
  { value: "Form <span class='webix_badge'>11</span>",  id: "View1"}
]

To change them in dynamics, you need to alter the related option:

segmented.config.options[0].value =  "Form <span class='webix_badge'>41</span>";
segmented.refresh();

Check the following snippet, please: https://webix.com/snippet/3f09b0a9

#3

Yeah I have changed my segmented button to a regular button. how do you set a badge to a button on the fly and clear it when you are done with it? I think the key here is the refresh() function.

#4

Yep, you just need to define the new value or false for a button and call the refresh() method:

$$("button1").define({badge:false}); //  {badge:10 }
$$("button1").refresh();
#5

Ok sounds good. How do i get the value of the badge on the button? Like if there there is a badge:1 on the button, maybe I want to increase it to badge:2

#6

All component’s properties (including badge) can be accessed via its config:

var badge = $$("button1").config.badge;
#7

Helga, is it possible to add a badge to an icon in a tree?