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:

Manpreet Singh said...

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

Anonymous said...

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

Anonymous said...

Hi Avinash.

This article helped me a lot.
you did awesome job

cheers,
parmesh

Paumil said...

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

Aguila said...

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';
}
}

}

Pravesh Singh said...

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

Google