How to set different image for each star

[Yukiko Imazu]

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

[Silambarasan I]

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: 

http://www.syncfusion.com/downloads/support/forum/140327/ze/Rating-786604222 

 

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 

[Yukiko Imazu]

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

[Silambarasan I]

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 

[Yukiko Imazu]

Hi Silambarasan,

Thank you for replying 

and support for this issue.

Regards,

Yukiko

[Silambarasan I]

Hi Yukiko, 

 

Thanks for your update.  

Please get back to us if you need any further assistance. 

 

Regards, 

Silambarasan