|
By default, Rating control provides the current rating
as the tool tip. It also has a property called ToolTip like any other control to
set the tool tip. But, setting this property to any custom value will never
change the default behavior. This is because, the Rating control itself will be
rendered as DIV tag and the associated stars in span tag within this div. The
ToolTip property of Rating control will assign a title property to DIV tag.
Also, there is an anchor tag whose title property is assigned to the actual
rating which overrides the ToolTip whatever we set.
Refer the below output of a Rating control,
<div id="RatingCtrl" title="Not yet rated."
class="Rating">
<input type="hidden"
name="RatingCtrl_RatingExtender_ClientState"
id="RatingCtrl_RatingExtender_ClientState" value="0" /><a href="#"
id="RatingCtrl_A" title="0" style="text-decoration:none"><span
id="RatingCtrl_Star_1" class="ratingStar emptyRatingStar"
style="float:left;"> </span><span id="RatingCtrl_Star_2"
class="ratingStar emptyRatingStar"
style="float:left;"> </span><span id="RatingCtrl_Star_3"
class="ratingStar emptyRatingStar"
style="float:left;"> </span><span id="RatingCtrl_Star_4"
class="ratingStar emptyRatingStar"
style="float:left;"> </span><span id="RatingCtrl_Star_5"
class="ratingStar emptyRatingStar"
style="float:left;"> </span></a>
</div>
Refer the below figure,
With the above output, the tool tip will be 0 when we
move the mouse over the Rating control. Because of this, whatever value we set
for ToolTip property of Rating control will not appear as tool tip.
This article will help us to change this behavior using
JQuery library. To setup JQuery and starting JQuery development, read my article
Using
JQuery in ASP.Net AJAX Applications – Part 1. In this article, we will make
the tooltip as “Click to rate as 1 star” on hover of 1st star, “Click
to rate as 2 stars” on hover of 2nd star and go on. After rating an
item, the rating control should be made read-only so that the user can’t rate it
again. In this scenario (read-only), we will make the tooltip as “Rated x
star(s)” based on the rating.
In PageLoad() event in the client, we will access this
anchor tag and set its title property to customized value. Refer the below
JQuery code,
<script language="javascript">
function pageLoad() {
if
($find("RatingCtrl_RatingExtender").get_ReadOnly()) {
var rate = $("#<%=RatingCtrl.ClientID %>
> a").attr("title");
if (rate != 0) {
$("#<%=RatingCtrl.ClientID %> >
a").attr("title", "Rated " + rate + " star(s)");
}
}
else {
$("#<%=RatingCtrl.ClientID
%>").find("span").each(function() {
if (this.value == 1) {
$(this).attr("title", "Click to rate as
1 star");
}
if (this.value == 2) {
$(this).attr("title", "Click to rate as
2 stars");
}
if (this.value == 3) {
$(this).attr("title", "Click to rate as
3 stars");
}
if (this.value == 4) {
$(this).attr("title", "Click to rate as
4 stars");
}
if (this.value == 5) {
$(this).attr("title", "Click to rate as
5 stars");
}
});
}
}
</script>
Rating Control
<ajaxToolkit:Rating ID="RatingCtrl"
AutoPostBack="true"
MaxRating="5"
CssClass="Rating"
StarCssClass="ratingStar"
FilledStarCssClass="filledRatingStar"
WaitingStarCssClass="savedRatingStar"
EmptyStarCssClass="emptyRatingStar"
runat="server"
onchanged="RatingCtrl_Changed"></ajaxToolkit:Rating>
In the above code, “RatingCtrl “ is the ID of the Rating
control. We can get if the rating control is read-only by calling a function called
get_ReadOnly() of RatingBehaviour object of Rating control. If you see the HTML
source generated by the page, we can see this behavior defined by the Rating
control somewhere near the bottom. Something similar to,
Sys.Application.add_init(function() {
$create(AjaxControlToolkit.RatingBehavior,
{"AutoPostBack":true,"CallbackID":"RatingCtrl",
"ClientStateFieldID":"RatingCtrl_RatingExtender_ClientState",
"EmptyStarCssClass":"emptyRatingStar","FilledStarCssClass":"filledRatingStar"
,"Rating":4,"ReadOnly":true,"StarCssClass":"ratingStar",
"WaitingStarCssClass":"savedRatingStar",
"id":"RatingCtrl_RatingExtender"},
null, null, $get("RatingCtrl"));
});
You can get the ID of the behavior here. You can also
set this property manually by setting BehaviourID property of the Rating
control.
When we execute the page, we can see the tooltip as
“Click to rate as 1 star” and so on, as seen in the below figure.
Before Rating
Once user rates, the control will be
made read-only and you will can see the tooltip as “Rated x star(s)”.
After Rating
|