For an unknown reason ::before is being auto-inserted on some instances of RadRating but not others. How do I prevent ::before from being inserted when using RadRating?
Attached are screenshots of the user control code and the Chrome element inspector. In the code comparison attachment the code on the left auto-inserts "::before" and the code on the right does not.
When I add the following CSS to my aspx page the RadRating becomes unselectable in Safari-only (confirmed on ipad and iphone). Other browsers are fine.
html, body {
height: 100%;
}
This CSS is necessary on some pages that also require a RadRating tool.
The page is running here: https://alpha.changeyourenergy.com/mgmt/Testing/radrating_no_master.aspx
The CSS in question is located here: https://alpha.changeyourenergy.com/style/revamp.css?v=151030.01
Note that if I tap the screen many times I can sometimes get the stars to highlight on Safari, but it is very difficult, inaccurate, and requires persistence.
Full ASPX page (the .cs page is essentially blank and not included here)
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="radrating_no_master.aspx.cs" Inherits="mgmt_Testing_radrating_no_master" %>
<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
<!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
>No Master</
title
>
<
meta
name
=
"viewport"
content
=
"width=device-width, initial-scale=1.0"
/>
<
style
type
=
"text/css"
>
.ratingClass {
position: relative;
top: 100px;
text-align: left;
margin: 0 auto;
padding: 0;
}
</
style
>
<
link
id
=
"BlowdryCSS"
runat
=
"server"
rel
=
'stylesheet'
type
=
'text/css'
href
=
'/style/blowdry.css?v=151030.01'
/>
<
link
id
=
"RevampCSS"
runat
=
"server"
rel
=
'stylesheet'
type
=
'text/css'
href
=
'/style/revamp.css?v=151030.01'
/>
<
link
id
=
"GoogleMaterialIcons"
href
=
"https://fonts.googleapis.com/icon?family=Material+Icons"
rel
=
"stylesheet"
/>
<
asp:Literal
id
=
"JQuery"
runat
=
"server"
Text='<script
type
=
"text/javascript"
src
=
"https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"
></
script
>'></
asp:Literal
>
<
asp:Literal
id
=
"JQueryUI"
runat
=
"server"
Text='<script
type
=
"text/javascript"
src
=
"https://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js"
></
script
>'></
asp:Literal
>
<
script
async
type
=
"text/javascript"
>
(function (i, s, o, g, r, a, m) {
i['GoogleAnalyticsObject'] = r; i[r] = i[r] || function () {
(i[r].q = i[r].q || []).push(arguments)
}, i[r].l = 1 * new Date(); a = s.createElement(o),
m = s.getElementsByTagName(o)[0]; a.async = 1; a.src = g; m.parentNode.insertBefore(a, m)
})(window, document, 'script', '//www.google-analytics.com/analytics.js', 'ga');
ga('create', 'UA-62909613-1', 'auto');
ga('send', 'pageview');
</
script
>
</
head
>
<
body
>
<
form
id
=
"form1"
runat
=
"server"
>
<
telerik:RadScriptManager
runat
=
"server"
ID
=
"ScriptManager1"
>
<
Scripts
>
<%-- Google CDN Reference: https://developers.google.com/speed/libraries/ --%>
<%--<
asp:ScriptReference
Path
=
"https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"
/>
<
asp:ScriptReference
Path
=
"https://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js"
/>--%>
<%--<
asp:ScriptReference
Path
=
"<%# Eval("
Source.CloudRoot") + "/" + Eval("Source.OneJS") %>" />--%>
<%--<
asp:ScriptReference
Assembly
=
"Telerik.Web.UI"
Name
=
"Telerik.Web.UI.Common.Core.js"
/>
<
asp:ScriptReference
Assembly
=
"Telerik.Web.UI"
Name
=
"Telerik.Web.UI.Common.jQuery.js"
/>--%>
<%--<
asp:ScriptReference
Assembly
=
"Telerik.Web.UI"
Name
=
"Telerik.Web.UI.Common.Core.js"
/>
<
asp:ScriptReference
Assembly
=
"Telerik.Web.UI"
Name
=
"Telerik.Web.UI.Common.jQueryExternal.js"
/>
<
asp:ScriptReference
Assembly
=
"Telerik.Web.UI"
Name
=
"Telerik.Web.UI.Common.jQueryPlugins.js"
/>--%>
</
Scripts
>
</
telerik:RadScriptManager
>
<
telerik:RadSkinManager
ID
=
"RadSkinManager1"
runat
=
"server"
ShowChooser
=
"false"
/>
<
div
style
=
"height:100%"
>
<
telerik:RadRating
RenderMode
=
"Lightweight"
ID
=
"ratingBar"
runat
=
"server"
Orientation
=
"Horizontal"
ItemHeight
=
"24px"
ItemWidth
=
"20px"
CssClass
=
"ratingClass"
Skin
=
"Silk"
VisibleDuringInit
=
"false"
>
<
Items
>
<
telerik:RadRatingItem
Value
=
"1"
HoveredImageUrl
=
"https://s3-us-west-1.amazonaws.com/changeyourenergy/images/icon/rating-stars-dark-orange-36x54.png"
HoveredSelectedImageUrl
=
"https://s3-us-west-1.amazonaws.com/changeyourenergy/images/icon/rating-stars-dark-orange-36x54.png"
SelectedImageUrl
=
"https://s3-us-west-1.amazonaws.com/changeyourenergy/images/icon/rating-stars-orange2-36x54.png"
ImageUrl
=
"https://s3-us-west-1.amazonaws.com/changeyourenergy/images/icon/rating-stars-gray-36x54.png"
ToolTip
=
"Very Low"
></
telerik:RadRatingItem
>
<
telerik:RadRatingItem
Value
=
"2"
HoveredImageUrl
=
"https://s3-us-west-1.amazonaws.com/changeyourenergy/images/icon/rating-stars-dark-orange-36x54.png"
HoveredSelectedImageUrl
=
"https://s3-us-west-1.amazonaws.com/changeyourenergy/images/icon/rating-stars-dark-orange-36x54.png"
SelectedImageUrl
=
"https://s3-us-west-1.amazonaws.com/changeyourenergy/images/icon/rating-stars-orange2-36x54.png"
ImageUrl
=
"https://s3-us-west-1.amazonaws.com/changeyourenergy/images/icon/rating-stars-gray-36x54.png"
ToolTip
=
"Low"
></
telerik:RadRatingItem
>
<
telerik:RadRatingItem
Value
=
"3"
HoveredImageUrl
=
"https://s3-us-west-1.amazonaws.com/changeyourenergy/images/icon/rating-stars-dark-orange-36x54.png"
HoveredSelectedImageUrl
=
"https://s3-us-west-1.amazonaws.com/changeyourenergy/images/icon/rating-stars-dark-orange-36x54.png"
SelectedImageUrl
=
"https://s3-us-west-1.amazonaws.com/changeyourenergy/images/icon/rating-stars-orange2-36x54.png"
ImageUrl
=
"https://s3-us-west-1.amazonaws.com/changeyourenergy/images/icon/rating-stars-gray-36x54.png"
ToolTip
=
"Medium"
></
telerik:RadRatingItem
>
<
telerik:RadRatingItem
Value
=
"4"
HoveredImageUrl
=
"https://s3-us-west-1.amazonaws.com/changeyourenergy/images/icon/rating-stars-dark-orange-36x54.png"
HoveredSelectedImageUrl
=
"https://s3-us-west-1.amazonaws.com/changeyourenergy/images/icon/rating-stars-dark-orange-36x54.png"
SelectedImageUrl
=
"https://s3-us-west-1.amazonaws.com/changeyourenergy/images/icon/rating-stars-orange2-36x54.png"
ImageUrl
=
"https://s3-us-west-1.amazonaws.com/changeyourenergy/images/icon/rating-stars-gray-36x54.png"
ToolTip
=
"Medium-High"
></
telerik:RadRatingItem
>
<
telerik:RadRatingItem
Value
=
"5"
HoveredImageUrl
=
"https://s3-us-west-1.amazonaws.com/changeyourenergy/images/icon/rating-stars-dark-orange-36x54.png"
HoveredSelectedImageUrl
=
"https://s3-us-west-1.amazonaws.com/changeyourenergy/images/icon/rating-stars-dark-orange-36x54.png"
SelectedImageUrl
=
"https://s3-us-west-1.amazonaws.com/changeyourenergy/images/icon/rating-stars-orange2-36x54.png"
ImageUrl
=
"https://s3-us-west-1.amazonaws.com/changeyourenergy/images/icon/rating-stars-gray-36x54.png"
ToolTip
=
"High"
></
telerik:RadRatingItem
>
</
Items
>
</
telerik:RadRating
>
</
div
>
</
form
>
<
script
type
=
"text/javascript"
> var CloudRoot = "https://d1ululg65bfe3q.cloudfront.net";</
script
>
<
script
type
=
"text/javascript"
src
=
"https://d1ululg65bfe3q.cloudfront.net/scripts/one/gzipped/one20160818-0802am.min.js"
></
script
>
<
script
src
=
"https://forms.ontraport.com/v2.4/analytics/tracking.js"
type
=
"text/javascript"
></
script
>
<
script
> _mri = '80479'; _mr_domain = 'changeyourenergy.ontraport.com'; mrtracking();</
script
>
<%--<
script
src
=
"http://d7f84ce2.ngrok.io/vorlon.js"
></
script
>--%>
</
body
>
</
html
>
My value of rating control is 4.7 but it just show 4 stars.
<telerik:RadRating runat="server" ID="rrComment" ReadOnly="true" EnableEmbeddedSkins="true" Precision="Exact" ViewStateMode="Inherit" />
Hi
I am using the RadRating list control. Once the user has entered there data - I would like to show what they have chosen on the next page. The value they have chosen is storing just fine. But when they are on the next page I want to show the rating they choose. I thought the RadRating1.SelectedItem.Value might do the trick but this does not set the item that has been selected.
Any ideas how I show the item they selected on another page - but using the same RadRating control
Thanks in advance
Hi,
I've noticed an issue with the RadRating control, when it's set to continuous and whole item selection modes, if you hover over a star for a few seconds and move the mouse downwards it leaves the control looking like a new selection has been made to users, however when we retrieve the value we get the previous values (0) in most cases. When client side validation is run, it fails saying these ratings haven't been completed, however they look complete to the user, to get past this they mus re-click a star.
This issue doesn't occur when in half item, or precision selction modes, and it's reproducible on the demo site: http://demos.telerik.com/aspnet-ajax/rating/examples/overview/defaultcs.aspx
Any ideas how to prevent this, for example, users must click to select a rating
Lee
I have a RadRating element for each row in a RadGrid, and need to get the associated Id for the row where the RadRating is being Rated (but with Javascript), however, the get_parent() method is returning the grid reference and not the row.
How can I get the GridDataItem of the row of the RadRating?
The following code works sometimes but not all the time. What am I doing wrong?
<
script
type
=
"text/javascript"
>
(function(global,undefined) {
function OnClientRating(controlRating,args) {
var row = controlRating.get_parent();
var userId = row.getDataKeyValue("UserId");
}
global.OnClientRating = OnClientRating;
})(window);
</
script
>
<
rad:RadGrid
runat
=
"server"
ID
=
"gridUsers"
Skin
=
"Hay"
EnableAJAX
=
"False"
AutoGenerateColumns
=
"False"
GridLines
=
"Both"
Width
=
"100%"
AllowSorting
=
"True"
OnItemDataBound
=
"Grid_ItemDataBound"
>
<
MasterTableView
DataKeyNames
=
"UserId"
ClientDataKeyNames
=
"UserId"
>
<
Columns
>
<
rad:GridTemplateColumn
HeaderText
=
"Name"
HeaderStyle-Width
=
"180px"
ItemStyle-Width
=
"180px"
>
<
ItemTemplate
>
<%# Eval("FullName")%>
</
ItemTemplate
>
</
rad:GridTemplateColumn
>
<
rad:GridTemplateColumn
HeaderText
=
"Rating"
HeaderStyle-Width
=
"100px"
ItemStyle-Width
=
"100px"
>
<
ItemTemplate
>
<
rad:RadRating
ID
=
"ratAppraiserRating"
runat
=
"server"
ItemCount
=
"5"
Value='<%# Eval("AverageRating")%>'
SelectionMode="Continuous" Precision="Item" Orientation="Horizontal" OnClientRating="OnClientRating"
OnRate="RatRating_Rate" AutoPostBack="true" />
</
ItemTemplate
>
</
rad:GridTemplateColumn
>
</
Columns
>
</
MasterTableView
>
<
ClientSettings
>
<
Scrolling
UseStaticHeaders
=
"false"
ScrollHeight
=
"240px"
AllowScroll
=
"true"
/>
<
Selecting
AllowRowSelect
=
"false"
/>
<
ClientEvents
OnRowDblClick
=
"selectRow"
/>
</
ClientSettings
>
</
rad:RadGrid
>
Hi,
I currently use the RadRating control to display the % of efficacity of our staff.
Converting my value to % is easy to reflect this in a 5 stars precision. (i.e: 0.95 * 5 will give me 4.7. )
<
telerik:RadRating
ID
=
"RadRating1"
runat
=
"server"
Skin
=
"Office2010Black"
Orientation
=
"Horizontal"
SelectionMode
=
"Continuous"
Precision
=
"Exact"
Value='<%# Convert.ToDouble(Eval("PoucentageEfficacite")) * 5 %>' ReadOnly="true">
</
telerik:RadRating
>
What I'm trying to acheive is: when I hover the stars, the tooltip would show 95% instead of 4.7
I'll continue to look in your documentation if i can find something.
P.S. Is there anyway to set a TotalValue of the RadRating control then when you set the Value, it will auto ajust according to the number of item displayed. It would be a great addition to the control.