When the body has no margin, and a Rating with Precision set to Half or Exact cannot apply the hovered styles to the ratings. This happens whenever the Rating component is inside a ListView.
The below code demonstrates the issue:
<telerik:RadListView ID="lvRatings" runat="server" DataKeyNames="ID">
<ItemTemplate>
<div>
<asp:Label ID="lblRating" runat="server"><%# Eval("Value")%></asp:Label>
<telerik:RadRating ID="rrRating" runat="server" RenderMode="Lightweight" Precision="Item" /> <%--this is the one that works--%>
<telerik:RadRating ID="RadRating1" runat="server" RenderMode="Lightweight" Precision="Half" /> <%--this is the one that does not work when body margin is set to 0--%>
</div>
</ItemTemplate>
</telerik:RadListView>
<telerik:RadListView ID="lvTextCriteria" runat="server" DataKeyNames="ID">
<ItemTemplate>
<div>
<asp:Label ID="lblCriteria" runat="server"><%# Eval("Value")%></asp:Label><sub> (max 1000 chars)</sub>
<asp:TextBox ID="txtCriteria" runat="server" TextMode="MultiLine" Rows="5" Width="100%" MaxLength="1000"></asp:TextBox>
</div>
</ItemTemplate>
</telerik:RadListView>
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
BindRatings();
BindTextCriteria();
}
}
private void BindRatings()
{
var dt = new DataTable();
dt.Columns.Add("ID", typeof(int));
dt.Columns.Add("Value", typeof(string));
dt.Rows.Add(1, "Overall Experience");
dt.Rows.Add(2, "Quality of Service");
dt.Rows.Add(3, "Value for Money");
dt.Rows.Add(4, "Staff Friendliness");
dt.Rows.Add(4, "Staff Friendliness");
dt.Rows.Add(4, "Staff Friendliness");
lvRatings.DataSource = dt;
lvRatings.DataBind();
}
private void BindTextCriteria()
{
var dt = new DataTable();
dt.Columns.Add("ID", typeof(int));
dt.Columns.Add("Value", typeof(string));
dt.Rows.Add(1, "What did you like most about your experience?");
dt.Rows.Add(2, "What could we improve?");
dt.Rows.Add(3, "Any additional comments or suggestions?");
dt.Rows.Add(3, "Any additional comments or suggestions?");
dt.Rows.Add(3, "Any additional comments or suggestions?");
dt.Rows.Add(3, "Any additional comments or suggestions?");
dt.Rows.Add(3, "Any additional comments or suggestions?");
lvTextCriteria.DataSource = dt;
lvTextCriteria.DataBind();
}
To reproduce the issue, load the page, scroll down and try to hover over the Rating.
The hovered state of the items of RadRating is not cleared when the Precision property of the rating is set to Item.
A possible workaround is adding the following script just before the closing </form> tag:
var $T = Telerik.Web.UI;
$T.RadRating.prototype._mouseOut = function (e, mouseMove) {
var targetElement = e.target || e.srcElement;
if (this._ulWrapper === targetElement || $telerik.$(this._ulWrapper).has(targetElement).length > 0) {
if (!mouseMove && $T.RatingPrecision.Item != this._precision)
this._hoveredItem = null;
}
this._attachDocumentHandlers(false);
this._createPartElements(false);
this._storeStartCoords(false);
this._spanSize = null;
this._hoveredItem = null;
this._clearOverState();
if (this._clearSelectedStateOnHover)
this._synchronizeUIWithValue(this._value);
}
RadRating has anchor elements in its default rendering and they can still be focused via the Tab key even if the control is disabled.
Since the disabled attribute is not valid for anchor tags, they can have tabIndex set to -1 to prevent keyboard focus.
Here is a small sample that shows how you can achieve this:
<asp:TextBox ID="Textbox1" runat="server" />
<telerik:RadRating runat="server" ID="RadRating1" Enabled="false" OnClientLoad="OnClientLoad">
</telerik:RadRating>
<script>
function OnClientLoad(sender, args) {
if (!sender.get_enabled()) {
var anchors = sender.get_element().getElementsByTagName("a");
for (var i = 0; i < anchors.length; i++) {
anchors[i].setAttribute("tabIndex", "-1");
}
}
}
</script>
Numbers start appearing in the items of RadRating when RenderMode is Lightweight and text-align:right is applied to a parent element of the control.
Currently the RadRating control can be used in touch devices only when its Precision property is set to Item. It should be possible to perform selection in the rating regardless of its precision.
The hovered state of the items of RadRating is not cleared when the Precision property of the rating is set to Item.
A possible workaround is adding the following script just before the closing </form> tag:
var $T = Telerik.Web.UI;
$T.RadRating.prototype._mouseOut = function (e, mouseMove) {
var targetElement = e.target || e.srcElement;
if (this._ulWrapper === targetElement || $telerik.$(this._ulWrapper).has(targetElement).length > 0) {
if (!mouseMove && $T.RatingPrecision.Item != this._precision)
this._hoveredItem = null;
}
this._attachDocumentHandlers(false);
this._createPartElements(false);
this._storeStartCoords(false);
this._spanSize = null;
this._hoveredItem = null;
this._clearOverState();
if (this._clearSelectedStateOnHover)
this._synchronizeUIWithValue(this._value);
}