CODEDIGEST
Home Articles CodeDigest Tutorials FAQs
Skip Navigation LinksHome » Article » ASP.Net Ajax Article » Customizing the Tooltip of Rating Control using JQuery   You are not logged in.
Search
 

Technologies
 

Sponsors
 

CodeDigest Navigation
 

Technology News
 

Community News
No News Feeds available at this time.
 
Customizing the ToolTip of Rating Control using JQuery

By Satheesh babu
Posted On Dec 14,2008
Article Rating: (Login)
Average Rating: 3.5
No of Ratings: 2
No of Comments: 0
Print this article.
Category: ASP.Net AJAX

Subscribe to our feed!

Customizing the ToolTip of Rating Control using JQuery

 

Introduction

Ajax Control Toolkit is set of server controls created by Microsoft and community to work with ASP.Net AJAX applications. This toolkit contains number of ASP.Net AJAX extender controls and an array of web controls that can be used to build rich internet applications. Rating control is one of the web controls that are packed with the AJAX control toolkit. This Rating control provides a capability to rate an item and the users can use this rating to judge the item’s credibility. We can also limit the maximum rating through the MaxRating property of the Rating control. Moving forward, we will see about how to set tool tip for the Rating control.

 

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;">&nbsp;</span><span id="RatingCtrl_Star_2" class="ratingStar emptyRatingStar" style="float:left;">&nbsp;</span><span id="RatingCtrl_Star_3" class="ratingStar emptyRatingStar" style="float:left;">&nbsp;</span><span id="RatingCtrl_Star_4" class="ratingStar emptyRatingStar" style="float:left;">&nbsp;</span><span id="RatingCtrl_Star_5" class="ratingStar emptyRatingStar" style="float:left;">&nbsp;</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

CodeDigest.Com 

Once user rates, the control will be made read-only and you will can see the tooltip as “Rated x star(s)”.

After Rating

CodeDigest.Com



ASP.Net Hosting

Recent Articles

There may be situation where we have Rating control in a GridView control or DataList control. To change the tool tip when the rating control is inside a GridView control the above function can be re written as,

 

<script language="javascript">

        function pageLoad() {        

            $("div.Rating > a").each(function() {

                var rate = this.title;

                if (rate != 0) {

                    this.title = "Rated " + rate + " star(s)";

                } else {

                this.title = "Not yet rated.";

                }

            });

    }

</script>

 

The above function will search for every div with CssClass “Rating” and execute the function that is enclosed in each() statement for every match.

Refer the below figure,

Download the source code of this sample from the download section of the article.

 

Pre-Requisites

To run the above code, download the latest JQuery library from the below location and include it in your project.

Download JQuery

 

Downloads

Download source 

Conclusion

The JQuery library allows simplifying the JavaScript code with minimum lines of code and increases the JavaScript performance. In this article, we have used its power to manipulate the rendered HTML of Rating control to customize the tool tip very easily.

Happy Coding!!!

Similar Articles
  • You can contribute to CodeDigest.Com:
    Article Feedback
    Title  
    Submitted By  
    Comment  
    Enter the verification number
     
    Comments