This is a migrated thread and some comments may be shown as answers.

toggle button selected/active state out of sync

6 Answers 267 Views
Toolbar
This is a migrated thread and some comments may be shown as answers.
Kaan
Top achievements
Rank 1
Kaan asked on 31 Oct 2016, 01:57 PM

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

6 Answers, 1 is accepted

Sort by
0
Eduardo Serra
Telerik team
answered on 01 Nov 2016, 03:28 PM
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
 
Build rich, delightful, *native* Angular 2 apps with Kendo UI for Angular 2. Try it out today! Kendo UI for Angular 2 (currently in beta) is a jQuery-free toolset, written in TypeScript, designed from the ground up to offer true, native Angular 2 components.
 
0
Kaan
Top achievements
Rank 1
answered on 02 Nov 2016, 12:40 PM

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

0
Niko
Telerik team
answered on 04 Nov 2016, 12:30 PM

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
 
Build rich, delightful, *native* Angular 2 apps with Kendo UI for Angular 2. Try it out today! Kendo UI for Angular 2 (currently in beta) is a jQuery-free toolset, written in TypeScript, designed from the ground up to offer true, native Angular 2 components.
 
0
Kaan
Top achievements
Rank 1
answered on 22 Nov 2016, 08:44 AM

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

0
Accepted
Niko
Telerik team
answered on 22 Nov 2016, 09:12 AM

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
Kendo UI is ready for Visual Studio 2017 RC! Learn more.
0
Kaan
Top achievements
Rank 1
answered on 23 Nov 2016, 04:21 PM
Thank you!
Tags
Toolbar
Asked by
Kaan
Top achievements
Rank 1
Answers by
Eduardo Serra
Telerik team
Kaan
Top achievements
Rank 1
Niko
Telerik team
Share this question
or