Class SfRating

The Blazor Rating component allows users to rate items by clicking on a set of symbols displayed on a numeric scale. This enables users to provide feedback or ratings for products, services, or content.

Inheritance

System.Object

SfBaseComponent

SfRating

Inherited Members

SfBaseComponent.Dispose()

SfBaseComponent.Dispose(Boolean)

SfBaseComponent.GetEffectivePlatform()

SfBaseComponent.GetMainComponentPlatform()

SfBaseComponent.IsMainLicenseComponent()

SfBaseComponent.LicenseContext

SfBaseComponent.OnObservableChange(String, Object, Boolean, NotifyCollectionChangedEventArgs)

SfBaseComponent.ValidateLicense()

Namespace: Syncfusion.Blazor.Inputs

Assembly: Syncfusion.Blazor.dll

Syntax

public class SfRating : SfBaseComponent

Remarks

The Rating component supports various features including custom templates, different precision types, tooltips, labels, and accessibility features. It can be configured for read-only display or interactive rating input.

Examples

A simple Blazor Rating component with a preset value.

 
<SfRating Value="3" />

A Blazor Rating component with a visible label.

 
<SfRating ShowLabel="true" /> 

Constructors

SfRating()

Declaration

public SfRating()

Properties

AllowReset

Gets or sets a value that specifies whether to show or hide the reset button in the rating component.

Declaration

public bool AllowReset { get; set; }

Property Value

Type	Description
System.Boolean	true to show the reset button; otherwise, false. The default value is false.

Remarks

When true, the reset button will be visible to the user and they will be able to click it to reset the rating value to its default state. The reset functionality is only available when this property is set to true and the component is not in read-only or disabled mode.

Created

Gets or sets an event callback that is raised when the SfRating component rendering is completed.

Declaration

public EventCallback<object> Created { get; set; }

Property Value

Type	Description
Microsoft.AspNetCore.Components.EventCallback<System.Object>	An Microsoft.AspNetCore.Components.EventCallback<> of type object that represents the event callback function.

Remarks

This event is triggered after the rating component has been fully rendered and initialized. It provides a way to execute custom logic once the component is ready for user interaction.

CssClass

Gets or sets one or more CSS classes that can be used to customize the appearance of the rating component.

Declaration

public string CssClass { get; set; }

Property Value

Type	Description
System.String	One or more CSS classes to customize the appearance of the rating component, such as by changing its colors, fonts, sizes, or other visual aspects. The default value is null.

Remarks

This property allows you to apply custom styling to the rating component by specifying CSS class names. Multiple CSS classes can be specified by separating them with spaces.

Disabled

Gets or sets a value that specifies whether the rating component is enabled or disabled.

Declaration

public bool Disabled { get; set; }

Property Value

Type	Description
System.Boolean	true to disable the rating component; otherwise, false. The default value is false.

Remarks

When true, the rating component will be disabled and the user will not be able to interact with it. A disabled rating component may have a different visual appearance than an enabled one, typically appearing grayed out.

EmptyTemplate

Gets or sets a template that defines the appearance of each unrated item in the rating component.

Declaration

public RenderFragment<RatingItemContext> EmptyTemplate { get; set; }

Property Value

Type	Description
Microsoft.AspNetCore.Components.RenderFragment<RatingItemContext>	A Microsoft.AspNetCore.Components.RenderFragment<> of type RatingItemContext that represents the empty item template content. The default value is null.

Remarks

The RatingItemContext is passed as context to the template, allowing access to information about the unrated item, such as its Value and Index. When this template is not specified, the default empty rating icon is used.

Examples

Rating with custom empty template.

 
<SfRating> 
   <EmptyTemplate>
        <span class="e-rating-icon e-icons e-star"></span>
   </EmptyTemplate>
</SfRating>

EnableAnimation

Gets or sets a value that specifies whether to add animation when an item in the rating component is hovered.

Declaration

public bool EnableAnimation { get; set; }

Property Value

Type	Description
System.Boolean	true to enable hover animations; otherwise, false. The default value is true.

Remarks

When true, an animation will be added when the user hovers their cursor over an item in the rating component to provide visual feedback. This enhances the user experience by providing smooth visual transitions during mouse interactions.

EnableSingleSelection

Gets or sets a value that specifies whether to enable single item selection mode in the rating component.

Declaration

public bool EnableSingleSelection { get; set; }

Property Value

Type	Description
System.Boolean	true to enable single selection mode where only the selected item will be highlighted; false to use default behavior where all items up to the selected one are highlighted. The default value is false.

Remarks

When true, only the selected item will be in the selected state, and all other items will be unselected. When false, all items before and including the selected one will be in the selected state, which is the traditional rating behavior.

FullTemplate

Gets or sets a template that defines the appearance of each rated item in the rating component.

Declaration

public RenderFragment<RatingItemContext> FullTemplate { get; set; }

Property Value

Type	Description
Microsoft.AspNetCore.Components.RenderFragment<RatingItemContext>	A Microsoft.AspNetCore.Components.RenderFragment<> of type RatingItemContext that represents the full item template content. The default value is null.

Remarks

The RatingItemContext is passed as context to the template, allowing access to information about the rated item, such as its Value and Index. When this template is not specified, the default filled rating icon is used.

Examples

Rating with custom full template.

 
<SfRating> 
   <FullTemplate>
        <span class="e-rating-icon e-icons e-star-filled"></span>
   </FullTemplate>
</SfRating>

ID

Gets or sets the unique identifier for the rating element.

Declaration

public string ID { get; set; }

Property Value

Type	Description
System.String	A string that represents the unique identifier for the rating element. The default value is null.

Remarks

This property sets the id attribute for the rating element. If not specified, a unique ID will be automatically generated. The ID is used for accessibility purposes and can be referenced by other elements or scripts.

ItemsCount

Gets or sets the number of items (symbols) displayed in the rating component.

Declaration

public int ItemsCount { get; set; }

Property Value

Type	Description
System.Int32	An integer that specifies the number of items (symbols) displayed in the rating component. The default value is 5.

Remarks

The rating component typically consists of a number of items, such as stars or other symbols, that represent the rating scale. This property determines how many rating items will be displayed, allowing users to select from a range of 1 to the specified count.

LabelPosition

Gets or sets the position of the label in the rating component.

Declaration

public LabelPosition LabelPosition { get; set; }

Property Value

Type	Description
LabelPosition	One of the LabelPosition enumeration values that specifies the position of the label. The default value is Right.

Remarks

You can use this property to customize the position of the label within the rating component to suit the needs of your application. For example, you can set the LabelPosition property to Top to position the label at the top center of the rating component, or set it to Left to position the label at the left side of the component.

LabelTemplate

Gets or sets a template that is used as a custom label to override the default label of the rating.

Declaration

public RenderFragment<double> LabelTemplate { get; set; }

Property Value

Type	Description
Microsoft.AspNetCore.Components.RenderFragment<System.Double>	A Microsoft.AspNetCore.Components.RenderFragment<> of type double that represents the label template content. The default value is null.

Remarks

The current value of the rating is passed as context to the template, allowing you to build custom label content. When this property is set, it overrides the default label display and allows for complete customization of the label appearance and content.

Examples

Rating with label template.

 
<SfRating> 
   <LabelTemplate>
        <span>@context Out Of 5</span>
   </LabelTemplate>
</SfRating>

Min

Gets or sets the minimum rating value that a user can select.

Declaration

public Nullable<double> Min { get; set; }

Property Value

Type	Description
System.Nullable<System.Double>	A double value representing the minimum rating that can be selected. The default value is 0.

Remarks

You can use the Min property to customize the minimum possible rating in the SfRating component. For example, if you want to allow users to provide ratings from 1 to 5, you can set the Min property to 1 and ItemsCount to 5. If the current Value is less than the minimum, it will be automatically adjusted to the minimum value.

OnItemHover

Gets or sets an event callback that is raised when a user hovers over a rating item.

Declaration

public EventCallback<RatingHoverEventArgs> OnItemHover { get; set; }

Property Value

Type	Description
Microsoft.AspNetCore.Components.EventCallback<RatingHoverEventArgs>	An Microsoft.AspNetCore.Components.EventCallback<> of type RatingHoverEventArgs that represents the event callback function.

Remarks

This event is triggered when the user moves the cursor over a rating item, providing information about the hovered item. The event arguments contain details such as the element reference and the current hover value.

Precision

Gets or sets the precision type of the rating, which determines the granularity of the rating and allows users to provide ratings with varying levels of precision.

Declaration

public PrecisionType Precision { get; set; }

Property Value

Type	Description
PrecisionType	One of the PrecisionType enumeration values that specifies the precision type. The default value is Full.

Remarks

The Precision property can be set to one of the following values:

• Full: The rating is increased in whole number increments. For example, if the current rating is 3, the next possible ratings are 4, 5, and so on.
• Half: The rating is increased in increments of 0.5 (half). For example, if the current rating is 3.5, the next possible ratings are 4, 4.5, 5, and so on.
• Quarter: The rating is increased in increments of 0.25 (quarter). For example, if the current rating is 3.75, the next possible ratings are 4, 4.25, 4.5, and so on.
• Exact: The rating is increased in increments of 0.1. For example, if the current rating is 3.9, the next possible ratings are 4, 4.1, 4.2, and so on.

ReadOnly

Gets or sets a value that specifies whether the rating component is in read-only mode.

Declaration

public bool ReadOnly { get; set; }

Property Value

Type	Description
System.Boolean	true to enable read-only mode; otherwise, false. The default value is false.

Remarks

When true, the rating component will be in read-only mode, which means that the user will not be able to interact with it and change the rating value. In read-only mode, the rating is displayed for viewing purposes only and cannot be modified by user interactions.

ShowLabel

Gets or sets a value that specifies whether to display a label that shows the current value of the rating.

Declaration

public bool ShowLabel { get; set; }

Property Value

Type	Description
System.Boolean	true to display the rating value label; otherwise, false. The default value is false.

Remarks

When true, a label will be displayed that shows the current value of the rating. The position of the label can be controlled using the LabelPosition property.

ShowTooltip

Gets or sets a value that specifies whether to show tooltips for the rating items.

Declaration

public bool ShowTooltip { get; set; }

Property Value

Type	Description
System.Boolean	true to show tooltips for the rating items; otherwise, false. The default value is true.

Remarks

When true, tooltips will be displayed when hovering over rating items, showing the current rating value. The tooltip content can be customized using the TooltipTemplate property.

TooltipTemplate

Gets or sets a template that is used as custom tooltip content to override the default tooltip content of the rating.

Declaration

public RenderFragment<double> TooltipTemplate { get; set; }

Property Value

Type	Description
Microsoft.AspNetCore.Components.RenderFragment<System.Double>	A Microsoft.AspNetCore.Components.RenderFragment<> of type double that represents the tooltip template content. The default value is null.

Remarks

The current value of the rating is passed as context to the template, allowing you to build custom tooltip content. When this property is set, it overrides the default tooltip display and allows for complete customization of the tooltip appearance and content.

Examples

Rating with tooltip template.

 
<SfRating> 
   <TooltipTemplate>
        <div>@context Star</div>
   </TooltipTemplate>
</SfRating>

Value

Gets or sets the current rating value that is used to display and update the rating selected by the user.

Declaration

public Nullable<double> Value { get; set; }

Property Value

Type	Description
System.Nullable<System.Double>	A nullable double value that represents the current rating. The value ranges from the Min to the ItemsCount. The default value is null.

Remarks

Based on the Precision property, users can select ratings with varying levels of precision. You can use the Value property to initialize the rating component with a specific rating value, or to get the current rating value selected by the user. For example, if you want to initialize the rating component with a rating of 3.5, you can set the Value property to 3.5.

ValueChanged

Gets or sets an event callback that is raised when the Value property is changed.

Declaration

public EventCallback<double> ValueChanged { get; set; }

Property Value

Type	Description
Microsoft.AspNetCore.Components.EventCallback<System.Double>	An Microsoft.AspNetCore.Components.EventCallback<> of type double that represents the event callback function.

Remarks

This event is triggered whenever the rating value changes, either through user interaction or programmatic updates. The callback receives the new rating value as a parameter.

Visible

Gets or sets a value that indicates whether the rating component is visible or hidden.

Declaration

public bool Visible { get; set; }

Property Value

Type	Description
System.Boolean	true if the rating component is visible; otherwise, false. The default value is true.

Remarks

When false, the rating component will be hidden from view but will still be present in the DOM. This property is useful for conditionally showing or hiding the rating component based on application logic.

Methods

BuildRenderTree(RenderTreeBuilder)

Declaration

protected override void BuildRenderTree(RenderTreeBuilder __builder)

Parameters

Type	Name	Description
Microsoft.AspNetCore.Components.Rendering.RenderTreeBuilder	__builder

OnAfterRenderAsync(Boolean)

Method invoked after each time the component has been rendered.

Declaration

protected override Task OnAfterRenderAsync(bool firstRender)

Parameters

Type	Name	Description
System.Boolean	firstRender	Set to true for the first time component rendering; otherwise gets false.

Returns

Type	Description
System.Threading.Tasks.Task	A System.Threading.Tasks.Task representing any asynchronous operation.

Overrides

SfBaseComponent.OnAfterRenderAsync(Boolean)

OnInitializedAsync()

Method invoked when the component is ready to start.

Declaration

protected override Task OnInitializedAsync()

Returns

Type	Description
System.Threading.Tasks.Task	A System.Threading.Tasks.Task representing any asynchronous operation.

Overrides

SfBaseComponent.OnInitializedAsync()

OnParametersSetAsync()

Declaration

protected override Task OnParametersSetAsync()

Returns

Type
System.Threading.Tasks.Task