toggle button selected/active state out of sync

[Kaan]

Hi!

As far as I have understood, the toggle state of a toggle button is set via its "k-state-active" css class. There are some situations where I want to select or unselect a toggle button dynamically by adding or removing the "k-state-active" css class. On the other hand if I want to know the toggle state of a toggle button, I am checking if the link has the "k-state-active" css class.

The event handler looks like this:

function onToggle(e) {
   let button = $(e.target);

   let selected = button.hasClass("k-state-active");
   if (selected === false && condition) {
      button.addClass("k-state-active");
   }

}

For some reasons I don't understand, the boolean value of "selected" sometimes differs from the actual rendered state of the toggle button. It seems like the toggle button has some other internal state, or maybe I am accessing the toggle button just not the right way.

 

Best regards,

Kaan

[Eduardo Serra]

Hello Kaan,

To dinamically change the state of a Toolbar toggable button, we use the toggle method (not to be confused with the toggle event).

When we want to check the state of the button inside the toggle event, like in your code snippet, we use the checked property of the event argument like this:

toggle: function(e) {
  alert(e.checked);
}

We can read more about it in the documentation for the toggle event here.

I hope this helps!

Regards,
Eduardo Serra
Telerik by Progress

 

 

[Kaan]

Hi Eduardo!

Thank you for your answer.

In the meantime I have also found out that the only(!) right way to dynamically change the state of a toolbar toggle button is to use the toggle method of the Kendo toolbar object. It would be very helpful if you could have this information in your demos or API documentation stated more explicitly.

Didn't know that I can use the checked property of the toggle event, but what would be the right way to check the state outside a toggle event? Would the answer be to check the existence of the css class "k-state-active" because the Kendo toolbar object seems to have no method for getting the current state.

Best regards,

Kaan

[Niko]

Hello Kaan,

You could use the selected option to check the current state of a toolbar item. It gets updated even after user interactions. Please, check the following sample - http://dojo.telerik.com/UCAfU.

Regards,
Niko
Telerik by Progress

 

 

[Kaan]

Hello!

In your sample the selected state is retrieved via the index of the button: toolbar.options.items[0].selected

Is there a way to get the selected state via the Id (e.g. #saveButton) of the button? Using the index doesn't seem very flexible to me. If I change the ordering of the buttons, I would have to change the index of the items array in the JavaScript code too. Are there any other possible ways to check the selected state of a toggle button outside the toggle event handler?

Best regards,

Kaan

[Niko]

Hello Kaan,

A reference to the button JS object is kept in the data of the button's DOM element. You can retrieve the data under the name of the type value:

var button = element.data(element.data("type"))

Thus you can check the options.selected value. Please, check the updated dojo sample - http://dojo.telerik.com/UCAfU.

Regards,
Niko
Telerik by Progress

[Kaan]

Thank you!