- Items count
- Disabled
- Visible
- Read only
- CssClass
- Changing icon using CssClass
Contact Support
Appearance in ASP.NET MVC Rating Control
6 Dec 20245 minutes to read
You can also customize the appearance of rating control.
Items count
You can specify the number of rating items using the ItemsCount property.
@using Syncfusion.EJ2.Inputs
@Html.EJS().Rating("rating").Value(3).ItemsCount(8).Render()
public ActionResult ItemsCount()
{
return View();
}
Disabled
You can disable the Syncfusion® ASP.NET MVC Rating control by using the Disabled property. When the Disabled
property is set to true
, the rating control will be disabled and the user will not be able to interact with it and a disabled rating control may have a different visual appearance than an enabled one.
@using Syncfusion.EJ2.Inputs
@Html.EJS().Rating("rating").Value(3).Disabled(true).Render()
public ActionResult Disabled()
{
return View();
}
Visible
You can use the Visible property of the ASP.NET MVC Rating control to control the visibility of the control. When the Visible
property is set to true
, the rating control will be visible on the page. When it is set to false
, the control will be hidden.
@using Syncfusion.EJ2.Inputs
@Html.EJS().Rating("rating").Value(3).Visible(true).Render()
public ActionResult Visible()
{
return View();
}
Read only
You can use the ReadOnly property of the ASP.NET MVC Rating control to make the control non-interactive and prevent the user from changing the rating value.
@using Syncfusion.EJ2.Inputs
@Html.EJS().Rating("rating").Value(3).ReadOnly(true).Render()
public ActionResult ReadOnly()
{
return View();
}
CssClass
You can customize the appearance of the rating control, such as by changing its colors, fonts, sizes, or other visual aspects by using the CssClass property.
Changing rating symbol border color
You can change the rating icon border color in ASP.NET MVC Rating control, you can use the CssClass
property and set the text-stroke
CSS property of .e-rating-icon
to your desired border color.
@using Syncfusion.EJ2.Inputs
@Html.EJS().Rating("rating").Value(3).CssClass("custom-font").Render()
<style>
.e-rating-container.custom-font .e-rating-item-list:hover .e-rating-item-container .e-rating-icon,
.e-rating-container.custom-font .e-rating-item-container .e-rating-icon {
/* To change rating symbol border color */
-webkit-text-stroke: 2px #ae9e9d;
}
</style>
public ActionResult BorderColor()
{
return View();
}
Changing rated/un-rated symbol fill color
You can customize the fill colors of rated and un-rated icons in the Rating control using the CssClass
property and the linear-gradient
color-stops in the background
CSS property of .e-rating-icon
. The first color-stop defines the rated fill color and the second defines the un-rated fill color.
@using Syncfusion.EJ2.Inputs
@Html.EJS().Rating("rating").Value(3).CssClass("custom-font").Render()
<style>
.e-rating-container.custom-font .e-rating-item-list:hover .e-rating-item-container .e-rating-icon,
.e-rating-container.custom-font .e-rating-item-container .e-rating-icon {
/* To change rated symbol fill color and un-rated symbol fill color */
background: linear-gradient(to right, #ffe814 var(--rating-value), #d8d7d4 var(--rating-value));
background-clip: text;
-webkit-background-clip: text;
}
</style>
public ActionResult FillColor()
{
return View();
}
This will customize the rated fill color to #ffe814
and un-rated fill color to #d8d7d4
. --rating-value
in the linear-gradient provides the current value of the rating item.
Changing the item spacing
You can change the space between the rating items in ASP.NET MVC Rating control, by using the CssClass
property and setting the margin
/ padding
CSS property of .e-rating-item-container
to your desired size.
@using Syncfusion.EJ2.Inputs
@Html.EJS().Rating("rating").Value(3).CssClass("custom-font").Render()
<style>
.e-rating-container.custom-font .e-rating-item-container {
/* To change the size between items */
margin: 0px 7px;
}
</style>
public ActionResult ItemSpacing()
{
return View();
}
Changing icon using CssClass
You can change the rating item icon in ASP.NET MVC Rating control, you can use the CssClass
property and set the content
CSS property of .e-icons.e-star-filled:before
to your desired font icon.
@using Syncfusion.EJ2.Inputs
@Html.EJS().Rating("rating").Value(3).CssClass("custom-icon").Render()
<style>
.custom-icon .e-icons.e-star-filled:before {
content: "\e702";
}
@@font-face {
font-family: 'custom-icon';
src: url(data:application/x-font-ttf;charset=utf-8;base64,AAEAAAAKAIAAAwAgT1MvMj1vSfQAAAEoAAAAVmNtYXDnEudXAAABiAAAADZnbHlmVIZrowAAAcgAAAEYaGVhZCK6KOUAAADQAAAANmhoZWEIUAQDAAAArAAAACRobXR4CAAAAAAAAYAAAAAIbG9jYQCMAAAAAAHAAAAABm1heHABDQCJAAABCAAAACBuYW1lv3dY+QAAAuAAAAJVcG9zdN12YnkAAAU4AAAALwABAAAEAAAAAFwEAAAAAAAD8wABAAAAAAAAAAAAAAAAAAAAAgABAAAAAQAAEGWKhV8PPPUACwQAAAAAAN/UcgcAAAAA39RyBwAAAAAD8wPaAAAACAACAAAAAAAAAAEAAAACAH0AAQAAAAAAAgAAAAoACgAAAP8AAAAAAAAAAQQAAZAABQAAAokCzAAAAI8CiQLMAAAB6wAyAQgAAAIABQMAAAAAAAAAAAAAAAAAAAAAAAAAAAAAUGZFZABA5wLnAgQAAAAAXAQAAAAAAAABAAAAAAAABAAAAAQAAAAAAAACAAAAAwAAABQAAwABAAAAFAAEACIAAAAEAAQAAQAA5wL//wAA5wL//wAAAAEABAAAAAEAAAAAAAAAjAAAAAEAAAAAA/MD2gB8AAATDxYVHw8/DjUvHiMPDC8PDwaoDAwMCwoKCgkICAgHBgYFBQQEAwICAQEBAQIDAwQFBQsVIyE5UmWI7FM5IR0WDQgFBAMDAgEBAQECAgMEBAUFBgYHCAgICQoKCgsMDAwMDAwNDAwNDBkYGBgXFRUUEhEICAYHCQsLDA0ODg8QEBARERESEQ4ODg4ODg0DwgYHBwgICQkKCgoLCwwLDA0MDQwNDQ4NDQ4NDQ4NDQ0NFSIwK0Rfbo/9XkUrJyMWFA0NDQ4NDQ4NDQ0ODA0NDA0LDAwLCgsKCgkICQgHBwYFBQQDAwIBAQIFBgkLDg8REwoKCwwRDw8NDQsLCggIBgUEAwIBAQECAgQEBQAAABIA3gABAAAAAAAAAAEAAAABAAAAAAABAAsAAQABAAAAAAACAAcADAABAAAAAAADAAsAEwABAAAAAAAEAAsAHgABAAAAAAAFAAsAKQABAAAAAAAGAAsANAABAAAAAAAKACwAPwABAAAAAAALABIAawADAAEECQAAAAIAfQADAAEECQABABYAfwADAAEECQACAA4AlQADAAEECQADABYAowADAAEECQAEABYAuQADAAEECQAFABYAzwADAAEECQAGABYA5QADAAEECQAKAFgA+wADAAEECQALACQBUyBjdXN0b20taWNvblJlZ3VsYXJjdXN0b20taWNvbmN1c3RvbS1pY29uVmVyc2lvbiAxLjBjdXN0b20taWNvbkZvbnQgZ2VuZXJhdGVkIHVzaW5nIFN5bmNmdXNpb24gTWV0cm8gU3R1ZGlvd3d3LnN5bmNmdXNpb24uY29tACAAYwB1AHMAdABvAG0ALQBpAGMAbwBuAFIAZQBnAHUAbABhAHIAYwB1AHMAdABvAG0ALQBpAGMAbwBuAGMAdQBzAHQAbwBtAC0AaQBjAG8AbgBWAGUAcgBzAGkAbwBuACAAMQAuADAAYwB1AHMAdABvAG0ALQBpAGMAbwBuAEYAbwBuAHQAIABnAGUAbgBlAHIAYQB0AGUAZAAgAHUAcwBpAG4AZwAgAFMAeQBuAGMAZgB1AHMAaQBvAG4AIABNAGUAdAByAG8AIABTAHQAdQBkAGkAbwB3AHcAdwAuAHMAeQBuAGMAZgB1AHMAaQBvAG4ALgBjAG8AbQAAAAACAAAAAAAAAAoAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAIBAgEDAAVoZWFydAAAAA==) format('truetype');
font-weight: normal;
font-style: normal;
}
.custom-icon .e-icons.e-star-filled {
font-family: 'custom-icon' !important;
speak: none;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
</style>
public ActionResult ChangeIcon()
{
return View();
}