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

Material Design ripple

2 Answers 50 Views
General Discussions
This is a migrated thread and some comments may be shown as answers.
Adam Nelson
Top achievements
Rank 2
Adam Nelson asked on 23 Jan 2017, 06:30 PM

Is there any way to cancel the material design ripple at runtime?

I'm using the material design theme with the RadPanelBar and in each item I've added a star icon to toggle favorited items. The problem is that even though I am able to cancel/prevent the item click from occurring, the ripple still happens.

My click event is bound to the icon toggle element directly with jquery, but calling stopImmediatePropagation and all other event cancelling methods I know of do not work for preventing the ripple effect from firing.

 

Thanks,

Adam

2 Answers, 1 is accepted

Sort by
0
Adam Nelson
Top achievements
Rank 2
answered on 23 Jan 2017, 06:53 PM
I got a little closer by attaching to the mousedown and mouseup events of the favorite icon. But this only works if the item hasnt been clicked first. If clicking the favorite icon first before anywhere else on the item, the ripple does not fire. But once the item is clicked, clicking on the favorite icon starts to fire the ripple again.
0
Dimitar
Telerik team
answered on 25 Jan 2017, 10:48 AM
Hi Adam,

There is no inbuilt property for disabling the ripple effect of Material skin as this skin is supposed to have the effect by design. However, you may disable it by overriding the get_rippleZonesConfiguration() function for the RadPanelBar as follows:

<script type="text/javascript">
    Telerik.Web.UI.RadPanelBar.prototype.get_rippleZonesConfiguration = function () {
            return [{}];
    }
</script>

This approach should help you disable the ripple for controls of your choice. ‚ÄčIn addition, you may achieve conditional disabling of the ripple effect for just one instance of a control by checking the ID of the control in the function above. If the ID (this.id) matches then one needed, you return the empty array.


Regards,
Dimitar
Telerik by Progress
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Tags
General Discussions
Asked by
Adam Nelson
Top achievements
Rank 2
Answers by
Adam Nelson
Top achievements
Rank 2
Dimitar
Telerik team
Share this question
or