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

How to keep a button active

3 Answers 121 Views
Button
This is a migrated thread and some comments may be shown as answers.
Grant
Top achievements
Rank 2
Veteran
Iron
Grant asked on 20 Jan 2020, 01:34 PM

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

3 Answers, 1 is accepted

Sort by
0
Grant
Top achievements
Rank 2
Veteran
Iron
answered on 21 Jan 2020, 02:37 PM
It seems the function to override the _blur (that prevented the active state from being removed) is no longer triggering
0
Accepted
Petar
Telerik team
answered on 22 Jan 2020, 12:18 PM

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

Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
0
Grant
Top achievements
Rank 2
Veteran
Iron
answered on 22 Jan 2020, 12:50 PM

Thanks Petar,

The solution is great.

-G

Tags
Button
Asked by
Grant
Top achievements
Rank 2
Veteran
Iron
Answers by
Grant
Top achievements
Rank 2
Veteran
Iron
Petar
Telerik team
Share this question
or