How to set different image for each star

Hello,

I'm working rating.  I just want to set different color star when it's inactive,
Is it possible to do that?


Thanks,
Yukiko

5 Replies

SI Silambarasan I Syncfusion Team October 11, 2018 09:17 AM UTC

Hi Yukiko, 
 
Thank you for using Syncfusion products. 
 
We have checked your query and your requirement “To set different color for star states” can be achievable by using ‘cssClass’ property in Rating component. We suggest you to specify your custom CSS class and modify the background images for all states as like in the following example. 
 
ASPX 
 
<ej:Rating ID="Rating1" runat="server" Value="3" CssClass="custom"></ej:Rating> 
 
//... 
 
<style> 
    /*Prevent default state image*/ 
    .custom.e-rating.e-horizontal .e-shape, 
    .custom.e-rating.e-vertical .e-shape, 
    .custom.e-rating.e-horizontal .e-shape-list, 
    .custom.e-rating.e-vertical .e-shape-list, 
    .custom.e-rating.e-horizontal .e-reset, 
    .custom.e-rating.e-vertical .e-reset { 
        background: none; 
    } 
 
    /*Customize reset state image*/ 
    .custom.e-rating.e-horizontal .e-reset, 
    .custom.e-rating.e-vertical .e-reset { 
        background: url('../Content/rating/images/rating1.png') no-repeat; 
        background-size: 100%; 
        margin: 1px; 
    } 
 
    /*Customize selected & active state image*/ 
    .custom.e-rating.e-horizontal .e-shape.selected, 
    .custom.e-rating.e-horizontal .e-shape.active, 
    .custom.e-rating.e-vertical .e-shape.selected, 
    .custom.e-rating.e-vertical .e-shape.active { 
        background: url('../Content/rating/images/rating2.png') no-repeat; 
        background-size: 100%; 
    } 
 
    /*Customize inactive state image*/ 
    .custom.e-rating.e-horizontal .e-shape.inactive, 
    .custom.e-rating.e-vertical .e-shape.inactive, 
    .custom.e-rating.e-horizontal .e-shape-list, 
    .custom.e-rating.e-vertical .e-shape-list { 
        background: url('../Content/rating/images/rating3.png') no-repeat; 
        background-size: 100%; 
    } 
 
    .custom.e-rating .e-shape.active { 
        background-position: 0 0; 
    } 
 
    .custom.e-rating.e-horizontal .e-shape-list, 
    .custom.e-rating.e-vertical .e-shape-list { 
        background-position: 0 0; 
        float: left; 
    } 
</style> 
 
 
 
 
Sample link: 
 
The below screenshot represents the output of above sample. 
 
 
Could you please check the above sample and get back to us with more information if your requirement is not fulfilled or need further assistance on this? 
 
Regards, 
Silambarasan 



YI Yukiko Imazu October 12, 2018 07:46 PM UTC

Hi Silambarasan,

Thanks you for replying.
I just want to set different image each star in inactive image.
It's like, 
1st inactive image is purple png file,
2nd inactive image is blue png file,
3rd inactive image is green png file so on.

Is it possible to do this?

Thanks,
Yukiko


SI Silambarasan I Syncfusion Team October 15, 2018 12:20 PM UTC

Hi Yukiko, 
 
Currently, we don’t have support for customizing rating with three different stars for inactive state. We have already logged this as a feature in our end. Also, new features/improvement on EJ1 is frozen because of our next generation Essential JS 2(EJ2) framework. We will consider this feature while implementing rating control in EJ2. 
 
Please let us know if you have any concerns. 
 
Regards, 
Silambarasan 



YI Yukiko Imazu October 16, 2018 01:26 PM UTC

Hi Silambarasan,

Thank you for replying 
and support for this issue.

Regards,
Yukiko




SI Silambarasan I Syncfusion Team October 17, 2018 06:43 AM UTC

Hi Yukiko, 
 
Thanks for your update.  
Please get back to us if you need any further assistance. 
 
Regards, 
Silambarasan 


Loader.
Up arrow icon