RatingColumn
A column that displays a star rating. Click a start to set a value, shift+click to unset a single start from the end. Clicking the first and only star toggles it.
This column inherits from NumberColumn and uses a NumberField widget as its editor when the CellEdit feature is active.
new Grid({
appendTo : document.body,
columns : [
{ type: 'rating', max : 10, field: 'rating' }
]
});
Useful configs
| Config | Description |
|---|---|
| max | Maximum number of stars |
| emptyIcon | Icon class for empty stars |
| filledIcon | Icon class for filled stars |
| editable | Allow clicking to change the rating |
See also
- NumberColumn - Parent column type
Configs
Configs are options you supply in a configuration object when creating an instance of this class-
Allow user to click a rating icon to change the value
Has a corresponding runtime editable property.
-
The empty rating icon to show
Has a corresponding runtime emptyIcon property.
-
The filled rating icon to show
Has a corresponding runtime filledIcon property.
Properties
Properties are getters/setters or publicly accessible variables on this class-
Identifies an object as an instance of RatingColumn class, or subclass thereof.
-
Identifies an object as an instance of RatingColumn class, or subclass thereof.
-
Allow user to click a rating icon to change the value
Has a corresponding editable config.
-
The empty rating icon to show
Has a corresponding emptyIcon config.
-
The filled rating icon to show
Has a corresponding filledIcon config.
Functions
Functions are methods available for calling on the class-
defaultRenderer( )private
Renderer that displays a number of stars in the cell. Also adds CSS class 'b-rating-cell' to the cell.
CSS variables
CSS variables that can be set to adjust appearance| Name | Description |
|---|---|
| --b-rating-column-empty-color | Empty icon color |
| --b-rating-column-filled-color | Filled icon color |
| --b-rating-column-icon-size | Icon size (applied as font-size) |