toggle button selected/active state out of sync

7 posts, 1 answers
  1. Kaan
    Kaan avatar
    17 posts
    Member since:
    May 2016

    Posted 31 Oct Link to this post

    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

  2. Eduardo Serra
    Admin
    Eduardo Serra avatar
    50 posts

    Posted 01 Nov Link to this post

    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.
     
  3. Kendo UI is VS 2017 Ready
  4. Kaan
    Kaan avatar
    17 posts
    Member since:
    May 2016

    Posted 02 Nov in reply to Eduardo Serra Link to this post

    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

  5. Niko
    Admin
    Niko avatar
    387 posts

    Posted 04 Nov Link to this post

    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.
     
  6. Kaan
    Kaan avatar
    17 posts
    Member since:
    May 2016

    Posted 22 Nov Link to this post

    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

  7. Answer
    Niko
    Admin
    Niko avatar
    387 posts

    Posted 22 Nov Link to this post

    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.
  8. Kaan
    Kaan avatar
    17 posts
    Member since:
    May 2016

    Posted 23 Nov Link to this post

    Thank you!
Back to Top
Kendo UI is VS 2017 Ready