Tooltips of RadRating

15 posts, 1 answers
  1. Sharepoint Developer
    Sharepoint Developer avatar
    6 posts
    Member since:
    Sep 2009

    Posted 17 Dec 2009 Link to this post

    Hi all, is there a way to change the default tooltips of the items in the RadRating control to custom text? (instead of "1", "2", "3", ... I'd like to set "Poor", "OK", "Good", ...).

    I've tried everything, even modifying the RadRating.js file (which BTW is obfuscated so it's a nightmare to change :-D).

    Can I customize this behavior?

    Thanks in advance.
    Kind regards.
  2. Answer
    Svetlina Anati
    Admin
    Svetlina Anati avatar
    2795 posts

    Posted 18 Dec 2009 Link to this post

    Hi Jose,

    Currently ypou cannot achieve what you want out of the box but we are planning to implement this functionality. For the time being, you can achieve this by using javascript e.g as shown below:

       <script type="text/javascript">  
    function OnClientLoad(sender, args)
    {
      var items = sender._items;
      items[0].childNodes[0].title = "Poor";
      items[1].childNodes[0].title = "Average";
      items[2].childNodes[0].title = "Good";
      items[3].childNodes[0].title = "Very Good";
      items[4].childNodes[0].title = "Excellent";       
    }
       </script>
       <telerik:RadRating ID="rating" runat="server" ItemCount="5" OnClientLoad="OnClientLoad" />

    Please, use this code as a start point and fine tune it according to your needs. 


    Greetings,
    Svetlina
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Watch a video on how to optimize your support resource searches and check out more tips on the blogs.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Sharepoint Developer
    Sharepoint Developer avatar
    6 posts
    Member since:
    Sep 2009

    Posted 18 Dec 2009 Link to this post

    Thank you so much, that works perfectly fine! :-)
  5. Svetlina Anati
    Admin
    Svetlina Anati avatar
    2795 posts

    Posted 18 Dec 2009 Link to this post

    Hello Jose,

    I am glad I could help. In case you experience any further problems or you have additional questions, do not hesiatte to contact us again!


    All the best,
    Svetlina
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Watch a video on how to optimize your support resource searches and check out more tips on the blogs.
  6. arnaud
    arnaud avatar
    104 posts
    Member since:
    Jul 2008

    Posted 07 Feb 2010 Link to this post

    Hi,

    About futur implementations :

    - Under Firefox : Tooltips are not visible -> annoying when you try to rate something with Precision="Exact"

    - Under IE : Tooltips are ok but when your rating control is ReadOnly="true" (when you want to actually show a value, 2.3 stars for exemple), the tooltip doesn't show the rating value but the value of where you mouse over the control.

    Regards
    Arnaud Boiselle
  7. Tsvetie
    Admin
    Tsvetie avatar
    1517 posts

    Posted 11 Feb 2010 Link to this post

    Hello Arnaud Boiselle,
    Regarding the tooltips of the rating control - the code of the control only sets title for the items of the rating. The value of the title attribute changes while the user moves the mouse over the rating control. However, the rating control has no control over the showing/hiding of the browser tooltip - this depends entirely on the browser itself. As we are aware that the browser tooltips behave differently in different browsers, we have added the EnableToolTips property - in case you set it to "false", the rating control will not output a title attribute for its items.

    Once you have disabled the browser tooltips, you can add a RadToolTip control to display the pending value of the control. I have attached a simple page that demonstrates two configurations. Please note that the code in the attached page uses an internal method of the rating and as a result, it may not work in case you decide to upgrade.

    As for the value, displayed in the tooltip in case ReadOnly=true - I will add it to our TODO list and we will fix it. I updated your Telerik points for bringing this problem to our attention.

    Sincerely yours,
    Tsvetie
    the Telerik team

    Watch a video on how to optimize your support resource searches and check out more tips on the blogs.
    Follow the status of features or bugs in PITS and vote for them to affect their priority.
  8. Paul Butler
    Paul Butler avatar
    7 posts
    Member since:
    Jan 2010

    Posted 04 Mar 2010 Link to this post

    Hi There,

    Is there also a way to change the values of each star - in a similar way to tooltips?

    I tried this - but it didn't like it:

            function OnClientLoad(sender, args)

            {

                var items = sender._items;

                // This works fine

                items[0].childNodes[0].title = "Coldest";

                items[1].childNodes[0].title = "Cold";

                items[2].childNodes[0].title = "Warm";

                items[3].childNodes[0].title = "Hot";

                items[4].childNodes[0].title = "Hottest";

                // Don't think this works

                items[0].childNodes[0].value = "3001";

                items[1].childNodes[0].value = "3002";

                items[2].childNodes[0].value = "3003";

                items[3].childNodes[0].value = "3004;

                items[4].childNodes[0].value = "3005";

            }


    These are values held in a lookup table - so what I want to do is grab the values from the table on the page load and dynamically create the JavaScript OnClientLoad function that changes the Tooltips (like above example - based on lookup table description) and Values if possible with the lookup table key

    I'll then add the function to the page using:
    Page.ClientScript.RegisterStartupScript(this.GetType(), "key", jsfunctionstring);
  9. Tsvetie
    Admin
    Tsvetie avatar
    1517 posts

    Posted 05 Mar 2010 Link to this post

    Hi Paul Butler,
    The current version of the rating control does not support client-side modifications of the rating items. Changing the title of the A element of a rating item with JavaScript will work only for the case Precision=Item. However, this approach will not work with the Q1 2010 version of the rating. Additionally, even if you manage to change the tooltip and value of the rating items with JavaScript, those changes will not be persisted after postback automatically. That is why, I would recommend that you wrap the rating control in UpdatePanel and update the items in the Items collection server-side.

    Kind regards,
    Tsvetie
    the Telerik team

    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.
  10. Nadine
    Nadine avatar
    20 posts
    Member since:
    Jan 2009

    Posted 18 Oct 2010 Link to this post

    Hello,

    can you tell me, if this feature is available in the new current version?

    I would like to use values/strings directly out of the database and show them as tooltip. Is it possible?

    Thank you

    Nadine
  11. Tsvetie
    Admin
    Tsvetie avatar
    1517 posts

    Posted 21 Oct 2010 Link to this post

    Hi Nadine,
    You can fully customize ( e.g. set the Value/ToolTip) of each rating item server-side, in case you use the Items collection of the control. Please, refer to our online demos for a quick overview of the functionality:

    http://demos.telerik.com/aspnet-ajax/rating/examples/itemscollection/defaultcs.aspx

    Sincerely yours,
    Tsvetie
    the Telerik team
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
  12. Nadine
    Nadine avatar
    20 posts
    Member since:
    Jan 2009

    Posted 22 Oct 2010 Link to this post

    Hi Tsvetie,

    thank you for the reply.
    I think it'll work for me in this case... but what if I want to keep the number of rating stars dynamically?
    Maye I want to define the number of available rates later in the database per project... so in this case this solution won't help me, right?

    Nadine
  13. Nadine
    Nadine avatar
    20 posts
    Member since:
    Jan 2009

    Posted 22 Oct 2010 Link to this post

    Hi again,

    desperately this doesn't work for me.

     

    I want to use values via Databinding for the Tooltips ... this is not possible...

    I get a parser error: no Databinding for RadRatingItem.

     

    So it's not possible to fill Ratings dynamically via Databinding, right?

     

    Nadine

  14. arnaud
    arnaud avatar
    104 posts
    Member since:
    Jul 2008

    Posted 22 Oct 2010 Link to this post

    Hi nadine,

    Can you show us your test code ?

    Arnaud
  15. Nadine
    Nadine avatar
    20 posts
    Member since:
    Jan 2009

    Posted 22 Oct 2010 Link to this post

    It was like this:

    <Items>
                                <telerik:RadRatingItem  

    ToolTip

     

    =<%# GetUIString(DataBinder.Eval(Container.DataItem, "KlartextEnglischLang"))%>

     

    />
                            </Items>

    Nadine
  16. arnaud
    arnaud avatar
    104 posts
    Member since:
    Jul 2008

    Posted 22 Oct 2010 Link to this post

    Nadine,

    Can I suggest you to do it this way (in my example the RadRating is inside a RadGrid for databinding purpose) :

    <telerik:GridTemplateColumn DataField="id_table" UniqueName="rating">
                           <ItemTemplate>
                               <telerik:RadRating ID="RadRating1" runat="server" ItemCount="5" Value='<%# DataBinder.Eval( Container, "DataItem.id_table"  ) %>'>
                                   <Items>
                                       <telerik:RadRatingItem Value="1" />
                                       <telerik:RadRatingItem Value="2" />
                                       <telerik:RadRatingItem Value="3" />
                                       <telerik:RadRatingItem Value="4" />
                                       <telerik:RadRatingItem Value="5" />
                                   </Items>
                               </telerik:RadRating>
                           </ItemTemplate>
                       </telerik:GridTemplateColumn>

    Then in the RadGrid itemdataboundevent :

    Private Sub RadGrid1_ItemDataBound(ByVal sender As Object, ByVal e As Telerik.Web.UI.GridItemEventArgs) Handles RadGrid1.ItemDataBound
          If TypeOf e.Item Is GridDataItem Then
              Dim dataItem As GridDataItem = CType(e.Item, GridDataItem)
              Dim RadRating1 As RadRating = CType(dataItem("rating").FindControl("RadRating1"), RadRating)
              RadRating1.Items.Item(0).ToolTip = "Item 1"
              RadRating1.Items.Item(1).ToolTip = "Item 2"
              RadRating1.Items.Item(2).ToolTip = "Item 3"
              RadRating1.Items.Item(3).ToolTip = "Item 4"
              RadRating1.Items.Item(4).ToolTip = "Item 5"
          End If
      End Sub

    Hope it helps
    Arnaud

Back to Top
UI for ASP.NET Ajax is Ready for VS 2017