Switching Button icon using onClick event

3 posts, 0 answers
  1. Kevin
    Kevin avatar
    2 posts
    Member since:
    Jul 2015

    Posted 15 Jul 2015 Link to this post

    Hi There,

     i have the following code. I'm wanitng the icon of the button to change eveytime you click the button deppening if the panel has expaneded or not. ("pin" and "unpin").

    $("#button").kendoButton({
          icon: "pin",
          click: function (e) {
            $('.UserFavouritesPanel').animate({ width: 'toggle' }, 350);

    if ($('.UserFavouritesPanel').width()>1) {
              $("#button").kendoButton({
                icon: "unpin"
              });
            } else {
              $(".UserFavouritesViewBtn").kendoButton({
                icon: "pin"
              });
            }
          }
        });

     The issue im having is that on the fist click the icon changes to the correct one but after that when you click the button it never changes again until you refresh the screen. Any ideas on why this happens.

  2. Daniel
    Admin
    Daniel avatar
    2118 posts

    Posted 17 Jul 2015 Link to this post

    Hello Kevin,

    You can achieve this by dynamically adding/removing the k-i-pin and k-i-unpin classes e.g.
    $("#button").kendoButton({
      icon: "pin",
      click: function (e) {
            $('.UserFavouritesPanel').animate({ width: 'toggle' }, 350);
            var icon = this.element.children(".k-icon");
            if ($('.UserFavouritesPanel').width()>1) {
                icon.removeClass("k-i-pin");
                icon.addClass("k-i-unpin");
            } else {
                icon.removeClass("k-i-unpin");
                icon.addClass("k-i-pin");
            }
        }
    });
    The problem will occur with the code that you provided because when initializing a new button, the previous icon class will not be removed. 

    Regards,
    Daniel
    Telerik
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  3. UI for ASP.NET MVC is VS 2017 Ready
  4. Kevin
    Kevin avatar
    2 posts
    Member since:
    Jul 2015

    Posted 17 Jul 2015 in reply to Daniel Link to this post

    Hi Daniel,

    Thank you, makes alot of sense. I will give it a bash.

    Regards,

    Kevin

     

Back to Top