How do I update badges in a ButtonGroup?

[John]

I've figured out how to initialize a ButonGroup with badges using this documentation:

items - API Reference - Kendo UI ButtonGroup - Kendo UI for jQuery (telerik.com)

 

Now I want to update badge options or remove a badge after initialization. I found this documentation:

badge - API Reference - Kendo UI ButtonGroup - Kendo UI for jQuery (telerik.com)

However, this only seems to allow updating the text value of the badge. I want to be able to update other things like themeColor. Furthermore, if a badge is removed by calling:

buttonGroup.badge(index, false);

then when the badge method is called again to re-add a badge, the original badge parameters are not applied.

[Nikolay]

Hello John,

The badge() method enables you to modify only the text of the badge. The only option to dynamically modify options to the ButtonGroup is through destroying and then re-creating the component with the new options as follows:

      var bgEl = buttonGroup.element;
      buttonGroup.destroy();
      bgEl.empty();
      
      bgEl.kendoButtonGroup({
        items: [
          {
            text: "foo",
            badge: {
              text: 1234,
              max: 50,
              themeColor: "success",
              position: "inline"
            }
          },
          {
            text: "bar",
            badge: {
              icon: "plus",
              themeColor: "success",
              cutoutBorder: true
            }
          }
        ]
      });

Dojo demo: https://dojo.telerik.com/AfUBOkaM

The above functionality can be improved in the future. For the ButtonGroup, a setOptions method can be added to make it easier to dynamically set the different options of the component. This is logged here.

Regards,
Nikolay
Progress Telerik