locked
Override Rating control's onStarMouseOver function RRS feed

  • Question

  • User-1600098011 posted

    Hello,

    According to this post (http://forums.asp.net/post/3570280.aspx), I should be able to override the Rating control's onStarMouseOver function by using something like this:

    Type.registerNamespace('AjaxControlToolkit');

    if (typeof AjaxControlToolkit != "undefined") { if (typeof AjaxControlToolkit.RatingBehavior != "undefined") { AjaxControlToolkit.RatingBehavior.prototype._onStarMouseOver = function (e) { if (this._readOnly) { return; } if (this._ratingDirection == 0) { this._currentRating = e.target.value; } else { this._currentRating = this._maxRatingValue + 1 - e.target.value; } this._update(); this.raiseMouseOver(this._currentRating); $get('lblRating').innerHTML = this._currentRating; }; } }

    However, regardless of where I put this code (in aspx page through a javascript block, in codebehind registered through this.Page.ClientScript.RegisterStartupScript, as a script loaded through ToolkitScriptManager), RatingBehavior is always undefined. When I have a look at the generated page, the script above is put before "Sys.Application.initialize();" and the "Sys.Application.add_init();" calls which I presume is why RatingBehavior is undefined. What am I doing wrong?

    I'm using VS 2010, .Net 3.5 and AjaxControlToolkit version 3.5.7.1213.

    Any assistance would be greatly appreciated.

    Thank you,

    Alf

    The aspx page is like this:

    <%@ Page Language="C#" AutoEventWireup="true"  CodeFile="Test_Rating.aspx.cs" Inherits="_Default" %>
    
    <%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="asp" %>
    
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title>Test Rating Control</title>
        <script  type="text/javascript"
            src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.2.min.js">
        </script>
    </head>
    <body>
        <form id="frmTestRating" runat="server">
        <asp:ToolkitScriptManager ID="tsm1" runat="server" CombineScripts="false" ScriptMode="Release">
        </asp:ToolkitScriptManager>
        <asp:Rating ID="Rating1" BehaviorID="Rating1" runat="server"
                    MaxRating="10"
                    CurrentRating="0"
                    StarCssClass="ratingStar"
                    WaitingStarCssClass="savedRatingStar" 
                    FilledStarCssClass="filledRatingStar" 
                    EmptyStarCssClass="emptyRatingStar">
        </asp:Rating><asp:Label ID="lblRating1" BehaviourID="lblRating1" runat="server" Text=""></asp:Label>
        </form>
    </body>
    </html>

    Codebehind page is:

    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Web;
    using System.Web.UI;
    using System.Web.UI.WebControls;
    using AjaxControlToolkit;
    
    public partial class _Default : System.Web.UI.Page 
    {
        
        protected void Page_Load(object sender, EventArgs e)
        {
    
        }
    }
    Thursday, May 22, 2014 9:37 AM

Answers

  • User-417640953 posted

    Hi Alf,

    Thank you post the issue to asp.net forum.

    Based on your description and code provided, I see you want to override the onStarMouseOver function of Ajax Rating Control.

    And do yourself things. For this issue, I think you need not override it's origin event, just add your currect mouseover event like below. code.

     <asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server"></asp:ToolkitScriptManager> 
        <div id="rating">
            
            <asp:Rating ID="Rating1" runat="server"  CurrentRating="2"
                       StarCssClass="Star" WaitingStarCssClass="WaitingStar" EmptyStarCssClass="Star"
                       FilledStarCssClass="FilledStar">
            </asp:Rating>  
        </div> 
    
     <script src="http://code.jquery.com/jquery-1.9.1.js"></script>  
     <script>
            $(function () {
                 //over ride it...........
                $(".Star").mouseover(function () {
    
                    alert($(this).attr("id"));
    
                    //do your things........
                });
            })  
        </script>
         <style type="text/css">
            .Star
            {
                background-image: url(images/Star.gif);
                height: 17px;
                width: 17px;
            }
            .WaitingStar
            {
                background-image: url(images/WaitingStar.gif);
                height: 17px;
                width: 17px;
            }
            .FilledStar
            {
                background-image: url(images/FilledStar.gif);
                height: 17px;
                width: 17px;
            }
        </style> 

    Hope that helps, thanks.

    Best Regards!

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Friday, May 23, 2014 2:40 AM

All replies

  • User-417640953 posted

    Hi Alf,

    Thank you post the issue to asp.net forum.

    Based on your description and code provided, I see you want to override the onStarMouseOver function of Ajax Rating Control.

    And do yourself things. For this issue, I think you need not override it's origin event, just add your currect mouseover event like below. code.

     <asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server"></asp:ToolkitScriptManager> 
        <div id="rating">
            
            <asp:Rating ID="Rating1" runat="server"  CurrentRating="2"
                       StarCssClass="Star" WaitingStarCssClass="WaitingStar" EmptyStarCssClass="Star"
                       FilledStarCssClass="FilledStar">
            </asp:Rating>  
        </div> 
    
     <script src="http://code.jquery.com/jquery-1.9.1.js"></script>  
     <script>
            $(function () {
                 //over ride it...........
                $(".Star").mouseover(function () {
    
                    alert($(this).attr("id"));
    
                    //do your things........
                });
            })  
        </script>
         <style type="text/css">
            .Star
            {
                background-image: url(images/Star.gif);
                height: 17px;
                width: 17px;
            }
            .WaitingStar
            {
                background-image: url(images/WaitingStar.gif);
                height: 17px;
                width: 17px;
            }
            .FilledStar
            {
                background-image: url(images/FilledStar.gif);
                height: 17px;
                width: 17px;
            }
        </style> 

    Hope that helps, thanks.

    Best Regards!

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Friday, May 23, 2014 2:40 AM
  • User-1600098011 posted

    Hi Fuxiang,

    Just what I needed. Didn't think of going through the css class! Many thanks Smile

    Alf

    Tuesday, May 27, 2014 10:12 AM