Engage on Facebook Engage on Twitter Engage on LinkedIn Engage on GitHub components notes mobile card heart 2 infinite mirror 2 pricing support

Creating a "Rated" style for the Rating control

By Brian Dukes

The Rating control from the AjaxControlToolkit has been of use to use as we work on some of our websites that use our Engage: Publish module.  However, we needed to make a change to the style of the container around the Rating in order to change a background image from saying "Please rate!" to "Thanks for rating."  We tried wrapping it in an UpdatePanel to get at the CssClass, but we couldn't get it to react.  Eventually, we got the following javascript to work (which needs to be declared after divRating is declared).

<div id="divRating" class="divRatingBefore">
   <ajaxToolkit:Rating ID="ajaxRating".../>
</div>

<script type="text/javascript">
// Method called when the Rating is changed
function toggleCssClassMethod(eventElement) {
// Toggle CSS class
Sys.UI.DomElement.removeCssClass($get('divRating'), 'divRatingBefore');
Sys.UI.DomElement.addCssClass($get('divRating'), 'divRatingAfter');
}
// Add handler using the getElementById method
$addHandler($get('<%= ajaxRating.ClientID %>'), 'click', toggleCssClassMethod);
</script>

This adds a handler to the rating's click event which removes the initial CssClass and replaces it with the final CssClass.

Planning a DNN upgrade? Download our guide