RadRating not displaying stars properly

5 posts, 1 answers
  1. Kaleb
    Kaleb avatar
    8 posts
    Member since:
    Jul 2012

    Posted 17 Jul 2012 Link to this post

    I have implemented a RadRating control on a usercontrol, and I haven't done anything super fancy to the tool itself.  It sits inside a table cell.  Here is the code for the RadRating tool:

     

    <td valign="top">
                <telerik:RadRating ID="VendorRating" runat="server" Skin="CustomSkin" EnableEmbeddedSkins="false"
                    EnableEmbeddedBaseStylesheet="false" />
                <asp:RangeValidator ID="RatingValidator" runat="server" ControlToValidate="VendorRating"
                    MinimumValue="1" MaximumValue="5" ErrorMessage="Please provide a rating!"></asp:RangeValidator>
            </td>

     

     

     

    This table also contains a textbox for comments and a save button.  When the save button is clicked, VendorRating.Value is saved to the database.  The save functionality all works properly, and the validator on VendorRating works.

    This table sits inside a control that is hidden until the user clicks an "Add a Review" button that sits at the bottom of a table containing all of the existent reviews.  It is when the "Add a Review" button that displays the radrating that the error occurs.

    The problem is that when I view the website outside of the development environment, on certain computers the rating stars consistently don't show up at all (they look like white space) and that whitespace turns to black boxes when clicked.  This happens consistently on affected computers, but never on others.  The stars in the existing ratings display properly on page load, but when the user control to enter a review is made visible, those stars also render strangely.

    I have attached a screenshot to demonstrate the viewing error.  The RadRatings use a custom skin (all I did for that was to edit the sprite image to match my needs.  The RadRatings in the existing reviews are disabled so the number of stars cannot be changed.  The RadRating in the write review control is enabled to allow users to select the rating value.

    Any help is greatly appreciated!

    Kaleb

     

  2. Answer
    Bozhidar
    Admin
    Bozhidar avatar
    680 posts

    Posted 17 Jul 2012 Link to this post

    Hi,

    It seems that you have sum custom CSS loaded on your page that overrides the RadRating styles. Can you remove all custom CSS and check again if the issue still exists?

    RadRating is built with UL, LI, A and SPAN HTML elements and any global CSS applied to that elements could break the control. If this is the case, I would recommend not to use global CSS selectors, but to cascade for the specific part of your site and not to apply any unwanted styles to RadRating.

    Greetings,
    Bozhidar
    the Telerik team
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Kaleb
    Kaleb avatar
    8 posts
    Member since:
    Jul 2012

    Posted 19 Jul 2012 Link to this post

    Hi Bozhidar,

    I have applied your solution to my code, but I haven't been able to find out if that resolved the issue as of yet.  If it doesn't, I will post but otherwise assume you were correct.  There was custom CSS affecting all <span> items, so that might have been it.

    Thanks for your help,

    Kaleb
  5. Kaleb
    Kaleb avatar
    8 posts
    Member since:
    Jul 2012

    Posted 19 Jul 2012 Link to this post

    Greetings again,

    On another spot on the same page, I was using other RadRating controls.

    They are dynamically-generated RadRating tools that pull both radrating.Value and radrating.ItemCount's value from a DB column.  The database connection is working fine (I am grabbing the correct values).  What the code does is loop through a collection of database rows, and gets each row's "Rating" column and then sets Value and ItemCount from that value.  It then adds the RadRating tool to a table cell, that cell to a table row, makes a fills a few more cells, adds those to the row, and finally adds that row to a table and begins the loop anew.

    There is also a dropdownlist that allows the user to select how to sort the records (which destroys the table and rebuilds it in the new order.  After sorting, sometimes the stars stop showing up properly in the rating control.  Even though, say, ItemCount and Value are set to 5 for a rating, it will show 5 stars and only have 3 marked.

    The RadRating is disabled since it is read-only and the user should not be able to manipulate its value.  Here is the inner contents of the for loop that makes the table rows:

    //Review is an object representing a SQL database object.
    //Review sits in a collection of other database objects from
    //the same SQL table.  The collection has already been ordered
    //according to desired search parameters from the dropdownlist
    if ( Review.Approved.Equals("A") )
    {
        //Build rating cell
        RadRating Rating = new RadRating();
        //Some rating information
        Rating.Enabled = false;
        //Note that ItemCount and Value are set to the same value!
        Rating.ItemCount = Review.Rating;
        Rating.Value = Review.Rating;
        Rating.EnableToolTips = false;
        cell.Controls.Add(Rating);
          
        row.Cells.Add(cell);
        //This never fires, even when ItemCount and Rating are being shown as different
        if (Review.Rating != Rating.ItemCount)
            Response.Write("DIFFERENT VALUES");
        //Review
        cell = new TableCell();
        cell.Text = Review.ReviewText;
        row.Cells.Add(cell);
        ReviewsTable.Rows.Add(row);
        row = new TableRow();
        cell = new TableCell();
        //reset rating for next iteration
        Rating = null;
    }

    The problem I've encountered with the ItemCount and/or Value displaying properly is very strange.  I have testing code for when the error occurs (Response.Write("DIFFERENT VALUES"), but that never fires.

    This problem did reproduce on my machine, but it hasn't since I removed the global <span> affecting custom CSS.  Is it possible that that CSS was causing the RadRating tools to display this discrepancy between ItemCount and Value, or should I dig deeper to find what caused the bug?

    Thanks again,

    Kaleb

  6. Niko
    Admin
    Niko avatar
    387 posts

    Posted 23 Jul 2012 Link to this post

    Hi Kaleb,

    Please, find attached a sample web page, where various approaches to setting ItemCount have been demonstrated. Running this page I wasn't able to stumble upon any issues.
    Therefore the issue with the ItemCount property of the rating should be caused by some of the containers, where it resides.
    Please, note that there is a known inconsistency when using RadRating within an UpdatePanel or an ajaxified container. It will cause an incorrect rendering of the RadRating, because the CSS resources are not loaded on time during the ajax request. In order to circumvent this race condition, you could have the CSS already loaded on the page. Here are two approaches to doing that:

    Load the styles through a link tag using the Page.ClientScript.GetWebResourceUrl method:
    <link href='<%= Page.ClientScript.GetWebResourceUrl(typeof(RadRating), "Telerik.Web.UI.Skins.Rating.css") %>' rel="stylesheet" type="text/css" />
     <link href='<%= Page.ClientScript.GetWebResourceUrl(typeof(RadRating), "Telerik.Web.UI.Skins.Default.Rating.Default.css") %>' rel="stylesheet" type="text/css" />

    Use the RadStyleSheetManager:
    <telerik:RadStyleSheetManager ID="StyleSheetManager1" runat="server">
            <StyleSheets>
                <telerik:StyleSheetReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Skins.Rating.css" />
                <telerik:StyleSheetReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Skins.Forest.Rating.Forest.css" />
            </StyleSheets>
        </telerik:RadStyleSheetManager>

    Please, have in mind that if these resources are already loaded on the page, the control should be prevented from trying to load them:
    <telerik:RadRating ID="rating" runat="server" EnableEmbeddedBaseStylesheet="false" EnableEmbeddedSkins="false" />

    Hope this is of help.

    All the best,
    Niko
    the Telerik team
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017