How to keep a button active

[Grant]

Hi, 

I've recently updated my KendoUI For jQuery library to the latest version, 2020.1.114. The update has introduced a bug into my code however. In the Release History, https://www.telerik.com/support/whats-new/kendo-ui/release-history/kendo-ui-r1-2020 it lists the following statement as a bug fix for the Button widget:
"Button remains highlighted when clicking and dragging"

A particular feature in my project makes use of setting the active state of a kendo button to active to create the equivalent of a "button checkbox". Except now, once I mouse-away from the button I just made active, its active state is removed.

I've created a Dojo example https://dojo.telerik.com/AKUdABat/7. Click the primary button and note that both buttons are set as active, then mouseout. The primary button's active state is removed, and Im confident its due to the button widget fix I previously mentioned.

Please advise on how i can prevent this from happening, or another way of setting the active state of a clicked button without it being reverted.

Thanks in advance,
Grant

[Grant]

It seems the function to override the _blur (that prevented the active state from being removed) is no longer triggering

[Petar]

Hi Grant,

A possible approach is to create a custom CSS class that copies the style applied by the .k-state-active class and apply this custom class to the Button component. 

Here is a modified version of the Dojo you provided. There is a CSS class defined as:

.k-button.k-state-custom-active {
    color: #fff;
    background-color: #126183;
    border-color: #126183;
    background-image: url(textures/highlight.png);
    background-image: none,linear-gradient(to bottom,rgba(255,255,255,.1) 0,rgba(255,255,255,0) 100%);
  }

To remove the added class, the removeClass can be used.

Let me know if the demonstrated in the above Dojo approach resolves the issue in the application you are working on.

Regards,
Petar
Progress Telerik

[Grant]

Thanks Petar,

The solution is great.

-G