Tuesday, March 25, 2008

AJAX Rating control

Html code for Rating control ---

Page register directive ---

<%@ Register Assembly="AjaxControlToolkit, Version=1.0.11119.29799, Culture=neutral, PublicKeyToken=28f01b0e84b6d53e"
Namespace="AjaxControlToolkit" TagPrefix="ajaxToolkit" %>

AJAX Rating Control code ---


<ajaxToolkit:Rating ID="RORating" runat="server" BehaviorID="RORatingBehavior" CurrentRating="0" MaxRating="5" StarCssClass="ratingStar" WaitingStarCssClass="savedRatingStar" FilledStarCssClass="filledRatingStar" EmptyStarCssClass="emptyRatingStar" RatingAlign="Horizontal" RatingDirection="LeftToRightTopToBottom" Style="padding-top: 5px;" />

If you want to access the Rating control in Client side or in Javascrips then you have to set the BehaviorID of control.

Few examples of Get/Set of Rating Control:


//Rating
$find("RORatingBehavior").set_Rating(Number("2"));
var ratingValue = $find("RORatingBehavior").get_Rating();
$find("RORatingBehavior").set_ReadOnly(false);
$find("RORatingBehavior").set_ReadOnly(true);

To view the complete list of Get/Set APIs, you have open the Rating Control (in Javascripts) in Debug mode (Quick Watch) in Visual Studio. Following are the snapshots of Rating control in Quick Watch:

Note: APIs names are self-explanatory. 

JavaScript’s side APIs Snapshots:









If you are unable to see the contents of snapshots properly then following are its contents:

Get APIs :


get_AutoPostBack()
get_CallbackID()
get_ClientState()
get_ClientStateFieldID()
get_element() get_element()
get_EmptyStarCssClass()
get_events()
get_FilledStarCssClass()
get_id()
get_isInitialized()
get_isUpdating()
get_MaxRating()
get_name()
get_Rating()
get_RatingDirection()
get_ReadOnly()
get_StarCssClass()
get_Stars()
get_Tag()
get_WaitingStarCssClass()


Set APIs :


set_AutoPostBack()
set_CallbackID()
set_ClientState()
set_ClientStateFieldID()
set_EmptyStarCssClass()
set_FilledStarCssClass()
set_id()
set_MaxRating()
set_name()
set_Rating()
set_RatingDirection()
set_ReadOnly()
set_StarCssClass()
set_Tag()
set_WaitingStarCssClass()


Methods/Events Handlers :


_keyDownHandler()
_mouseOutHandler()
_onError()
_onKeyDownBack()
_onMouseOut()
_onStarClick()
_onStarMouseOver()
_partialUpdateBeginRequest()
_partialUpdateEndRequest()
_receiveServerData()
_starClickHandler()
_starMouseOverHandler()
_update()
_waitingMode()
add_disposing()
add_EndClientCallback()
add_MouseOut()
add_MouseOver()
add_propertyChanged()
add_Rated()
beginUpdate()
constructor()
dispose()
endUpdate()
initialize()
raiseEndClientCallback()
raiseMouseOut()
raiseMouseOver()
raisePropertyChanged()
raiseRated()
registerPartialUpdateEvents()
remove_disposing()
remove_EndClientCallback()
remove_MouseOut()
remove_MouseOver()
remove_propertyChanged()
remove_Rated()
updated()

6 comments:

  1. This article help me a lot, thnX a lot, Tremendous topic...

    ReplyDelete
  2. Thank you Avinash, you help me alot through this article...Thank a ton!!!

    ReplyDelete
  3. Hi Avinash.

    This article helped me a lot.
    you did awesome job

    cheers,
    parmesh

    ReplyDelete
  4. Thanks a lot after 5 hours i was not able to get rating value into JS...but ur article did gr8 help 2 me...Thanks a lot man...hev a gr8 time ahead

    ReplyDelete
  5. It works great but it just cause a full postback/callback.

    I wrote this instead

    function setRating(star, value) {
    //star as the clientID of the rating control
    //value as the new rating value

    for (i = 0; i < 5; i++) {
    if (i < parseInt(value)) {
    document.getElementById(star + '_Star_' + (i + 1)).className = 'ratingStar filledRatingStar';
    }
    else {
    document.getElementById(star + '_Star_' + (i + 1)).className = 'ratingStar emptyRatingStar';
    }
    }

    }

    ReplyDelete
  6. Check out this helpful link too its also having nice post with wonderful explanation on Ajax Toolkit Rating Control in ASP.Net....
    Ajax Toolkit Rating Control in ASP.Net

    Thanks

    ReplyDelete