locked
Style the average rating stars

    Question

  • I am getting the value for rating from a webservice, the values are in integer format. I just need to show the rating stars.

    Right now i am using "average rating" but i want the "rating stars" to be disabled so that a user can not change the rating.

    Secondly i want to change the color of stars as per my app's theme, but its default blue and i am not able to change it..

    below is the code what i am using:

    <div   id="ratingControl"  data-win-control="WinJS.UI.Rating"  data-win-options="{averageRating : 3.4,}">
                      </div>

    i have tried to disable it by("disable:value") but this disables the whole rating.

    i just want to show the stars as per the values i m getting.

    Please brief me with the code.


    deepanshu jaiswal monocept

    Tuesday, December 18, 2012 11:28 AM

Answers

  • hi, roadie1000

    plz try this sample, i can fill the stars with yellow color

    in the sample plz click on test button

    https://skydrive.live.com/redir?resid=FE4B416453F604E7!197&authkey=!AM0BwXi1Cmej-Ho

    • Marked as answer by roadie1000 Monday, January 21, 2013 6:12 AM
    Friday, January 18, 2013 1:36 PM

All replies

  • Included on the WinJS.UI.Rating object reference are some common CSS selectors you can use to style the controls. The article details pretty well what each is useful for and even has some examples. Check that out here: http://msdn.microsoft.com/en-us/library/windows/apps/br211895.aspx

    You can also  pretty easily look at the default styles for them. These default styles are included in your project and pretty easy to read.

    You can get the files by going to the Solution Explorer window in Visual Studio, looking at the top of the explorer underneath your project for an item called "References" it'll have a disclosure widget (little arrow) beside the name, and you can click that to see what is in your project's references. Inside of those references, you'll have two folders, one for JS and one for CSS. If you look inside the CSS folder you'll see ui-dark.css and ui-light.css. You can open either one of these and search for .win-rating which is the base class for the rating control.



    Tuesday, December 18, 2012 8:27 PM
  • iam not able to make it. 

    i am using this code : "<div id="ratingControl"  data-win-control="WinJS.UI.Rating"  data-win-options="{averageRating :1.2 }"></div>"

    but its showing like this: 

                                                            

    first of all i want this to be user disabled and secondly the color should be yellow.


    deepanshu jaiswal monocept

    Wednesday, December 19, 2012 3:22 PM
  • What aren't you able to make? Could you give some examples of the CSS styles you have tried?

    We should be able to help you troubleshoot better if we know what you've tried.

    Thursday, December 20, 2012 3:26 PM
  • iam not able to make it. 

    i am using this code : "<div id="ratingControl"  data-win-control="WinJS.UI.Rating"  data-win-options="{averageRating :1.2 }"></div>"

    but its showing like this: 

                                                            

    first of all i want this to be user disabled and secondly the color should be yellow.


    deepanshu jaiswal monocept

    You have to define CSS in your project to accomplish what you want.  Got.dibbs decribed where to find those classes and also where to learn about how to use them.

    Example: 

    .win-star.win-average.win-full {
    	background-color: yellow; 
    }

    Thursday, December 20, 2012 8:18 PM
  • hi try like this..

    in your HTML

    <

    divid="autoTestQualityStars"class="qualitystatus"data-win-control="WinJS.UI.Rating"data-win-options="{disabled:true}">

    in styles (.css)

    .win-rating.qualitystatus{

         

    width: 100%;

        }

     

    .win-rating.qualitystatus.win-star{

           

    height:54px;

           

    width:24px;

           

    font-size:38px;

        }

     

    .win-rating.qualitystatus.win-star.win-average.win-full{

                   

    color: yellow;

        }

    in your .js file

    varratingControl = id("autoTestQualityStars").winControl;

            ratingControl.averageRating = String(3);

    varratingControl = id("autoTestQualityStars").winControl;

            ratingControl.averageRating = String(Math.round(0));

    • Marked as answer by Song Tian Monday, December 24, 2012 8:26 AM
    • Unmarked as answer by roadie1000 Wednesday, January 16, 2013 11:42 AM
    Friday, December 21, 2012 6:54 AM
  • yes i can show you the css code:

    .win-rating .win-star {
    background-color:yellow;
    }                                                                                                                  

    .win-rating .win-star.win-average {
       background-color:yellow;
       color:black; 
    }

                                                                                                                                  


    deepanshu jaiswal monocept

    Friday, December 21, 2012 7:15 AM
  • i have used this code and i am getting this:                                         

    but actually i want the stars to be yellow not the background.


    deepanshu jaiswal monocept

    Friday, December 21, 2012 7:19 AM
  • hi please use my code in a sample, you can get what you needed ,coz long back I too faced the same problem now I over came that
    Friday, December 21, 2012 7:22 AM
  • thanks vivek

    i am working on your code but its not showing any color , the stars are blank:  

    May be i will try it out in a sample. 

    deepanshu jaiswal monocept

    Friday, December 21, 2012 7:38 AM
  • ok please let me know the result, and mark it as answer if you got solution
    Friday, December 21, 2012 8:13 AM
  • Hi,

    Per my experience, NagendraVivek ’s reply should be able to help on issue.

    Since we haven’t heard from you for long time, I am marking NagendraVivek ’s  reply as answer now. If NagendraVivek ’s reply did not resolve your problem, please feel free to unmark the answer and let us know the error or problem. If you have further issue but different than the original one in this thread, please open a new question. Thanks for your cooperation.


    Roy
    MSDN Community Support | Feedback to us
    Develop and promote your apps in Windows Store
    Please remember to mark the replies as answers if they help and unmark them if they provide no help.

    Monday, December 24, 2012 8:26 AM
  • can i make changes in the base file??

    color of the stars never change, the background color do change but the actual stars are purple in color.

    brief me with the code and an example if possible.


    deepanshu jaiswal monocept

    Thursday, January 17, 2013 12:19 PM
  • have you tried the code snippet ? it should work as same code works fine for me,i can made the stars like this with above code,

    output


    Friday, January 18, 2013 7:59 AM
  • if possible drop your sample here
    Friday, January 18, 2013 7:59 AM
  • HTML Code:

      <div id="autoTestQualityStars" class= "qualitystatus" data-win-control="WinJS.UI.Rating" data-win-options="{disabled:true}"></div>

    Javascript:

    var ratingControl = document.getElementById("autoTestQualityStars").winControl;
                            ratingControl.averageRating = Restaurant_Rating;
                        var ratingControl = document.getElementById("autoTestQualityStars").winControl;
                        ratingControl.averageRating = String(Math.round(0));

    CSS:


    .win-rating.qualitystatus{

    width: 12%;
    }
     
    .win-rating.qualitystatus.win-star{
    height:54px;
    width:24px;
    font-size:38px;
    color:yellow;
    }
     
    .win-rating.qualitystatus.win-star.win-average.win-full{

    background-color: yellow;
    }


    deepanshu jaiswal monocept

    Friday, January 18, 2013 11:56 AM
  • hi, roadie1000

    plz try this sample, i can fill the stars with yellow color

    in the sample plz click on test button

    https://skydrive.live.com/redir?resid=FE4B416453F604E7!197&authkey=!AM0BwXi1Cmej-Ho

    • Marked as answer by roadie1000 Monday, January 21, 2013 6:12 AM
    Friday, January 18, 2013 1:36 PM
  • thanks a lot now its working fine...

    deepanshu jaiswal monocept

    Monday, January 21, 2013 6:13 AM