Material Design ripple

[Adam Nelson]

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

[Adam Nelson]

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.

[Dimitar]

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