Telerik Forums
UI for ASP.NET AJAX Forum
4 answers
63 views

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.

 

Rumen
Telerik team
 answered on 22 Sep 2017
7 answers
88 views

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">
 
<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"
                    HoveredSelectedImageUrl="https://s3-us-west-1.amazonaws.com/changeyourenergy/images/icon/rating-stars-dark-orange-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"
                    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"
                    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"
                    ToolTip="Medium-High"></telerik:RadRatingItem>
                <telerik:RadRatingItem Value="5"
                    HoveredSelectedImageUrl="https://s3-us-west-1.amazonaws.com/changeyourenergy/images/icon/rating-stars-dark-orange-36x54.png"
                    ToolTip="High"></telerik:RadRatingItem>
            </Items>
        </telerik:RadRating>
        </div>
    </form>
 
     
    <script type="text/javascript">     var CloudRoot = "https://d1ululg65bfe3q.cloudfront.net";</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>
Rumen
Telerik team
 answered on 10 Aug 2017
0 answers
57 views

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" />

binbin
Top achievements
Rank 1
 asked on 13 Apr 2017
3 answers
44 views

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

 


Indy
Top achievements
Rank 1
 answered on 15 Nov 2016
6 answers
89 views
Dear Telerik

What a great new update! Thanks. Just a short question about the rating ctrl:

What I would like to have is that an user selects a whole item (e.g. 3 stars, 4 stars ,...),
but the initial value is a precise interpretation of the average of the ratings.

e.g.
2 polls, rating precision set to "whole item":
person a: 4 stars
person b: 5 stars
--> the average of 4.5 will be displayed as 5 stars (always rounds)
--> I'd favor it would show exact as 4.5 stars

Can I somehow code that the rater selects whole items, the result is displayed exact?

Regards,
phil
Marin Bratanov
Telerik team
 answered on 04 Oct 2016
16 answers
404 views
Hi,

I am using RadRating Control in a RadGrid. i have paucity of space for the default sized stars RadRating generates. Is there anyway to reduce the size of the stars? i tried creating a custom skin but in vain. can anybody help me? Help much appreciated.

Thank you,

Murali Krishna.
Marin Bratanov
Telerik team
 answered on 10 Jun 2016
1 answer
79 views

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

Ianko
Telerik team
 answered on 07 Apr 2016
1 answer
31 views
I want to open a Tooltip with TooltipManager when the user clicks over a READ-ONLY RadRating. Is there a way to achieve this? It works with OnMouseOver, but i'm unable to assign the Click event :-(
Marin Bratanov
Telerik team
 answered on 19 Jan 2016
2 answers
141 views

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>

Viktor Tachev
Telerik team
 answered on 24 Dec 2015
3 answers
83 views

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.

 

 

Danail Vasilev
Telerik team
 answered on 15 Sep 2015
Narrow your results
Selected tags
Tags
+? more
Top users last month
horváth
Top achievements
Rank 2
Iron
Iron
Steve
Top achievements
Rank 2
Iron
Erkki
Top achievements
Rank 1
Iron
Mark
Top achievements
Rank 2
Iron
Iron
Veteran
Jakub
Top achievements
Rank 1
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
horváth
Top achievements
Rank 2
Iron
Iron
Steve
Top achievements
Rank 2
Iron
Erkki
Top achievements
Rank 1
Iron
Mark
Top achievements
Rank 2
Iron
Iron
Veteran
Jakub
Top achievements
Rank 1
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?