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' }
    ]
});

Rating column
//<code-header>
fiddle.title = 'Rating column';
//</code-header>
// grid with RatingColumn
const grid = new Grid({
    appendTo   : targetElement,
    // makes grid as high as it needs to be to fit rows
    autoHeight : true,
    data       : DataGenerator.generateData(5),
    columns    : [
        { field : 'name', text : 'Name', flex : 1 },
        { type : 'rating', field : 'rating', text : 'RatingColumn', width : 180 }
    ]
});

Configs

89

Common

autoWidthColumn
fieldColumn
fitModeColumn
flexColumn
largeStepNumberColumn
listenersEvents
maxNumberColumn
maxWidthColumn
minNumberColumn
stepNumberColumn
textColumn
unitNumberColumn
widthColumn

Interaction

Allow user to click a rating icon to change the value

collapsedColumn
draggableColumn
editorColumn
groupableColumn
hideableColumn
resizableColumn
sealedColumn
sortableColumn

Rendering

The empty rating icon to show

The filled rating icon to show

cellClsColumn
clsColumn
iconColumn
rendererNumberColumn
tooltipColumn

Accessibility

ariaLabelColumn

Export

Integration

vueColumn

Layout

alignNumberColumn
hiddenColumn
lockedColumn
minWidthColumn
regionColumn

Menu

Merge cells

mergeableColumn

Misc

localeClassLocalizable
localizableLocalizable
tagsColumn
treeColumn

Other

formatNumberColumn
formulaColumn
pinnedColumn
readOnlyColumn

Summary

sumColumn
summariesColumn

Properties

160

Common

autoWidthColumn
fieldColumn
fitModeColumn
flexColumn
largeStepNumberColumn
maxNumberColumn
maxWidthColumn
minNumberColumn
stepNumberColumn
textColumn
unitNumberColumn
widthColumn

Class hierarchy

isRatingColumn: Boolean= truereadonly
Identifies an object as an instance of RatingColumn class, or subclass thereof.
isRatingColumn: Boolean= truereadonlystatic
Identifies an object as an instance of RatingColumn class, or subclass thereof.
isColumnColumn
isEventsEvents
isLocalizableLocalizable
isModelModel
isModelLinkModelLink
isModelStmModelStm
isNumberColumnNumberColumn
isTreeNodeTreeNode

Interaction

Allow user to click a rating icon to change the value

collapsedColumn
draggableColumn
editorColumn
groupableColumn
hideableColumn
resizableColumn
sealedColumn
sortableColumn

Rendering

The empty rating icon to show

The filled rating icon to show

cellClsColumn
clsColumn
iconColumn
rendererNumberColumn
tooltipColumn

Accessibility

ariaLabelColumn

Editing

copyOfModel
isValidModel

Export

Fields

allFieldsstaticModel
autoExposeFieldsstaticModel
childrenFieldstaticModel
fieldMapstaticModel
fieldsstaticModel
idFieldstaticModel

Grouping

Identification

keyModel

Integration

vueColumn

JSON

jsonModel

Layout

alignNumberColumn
hiddenColumn
lockedColumn
minWidthColumn
regionColumn

Lifecycle

configBase

Linked records

hasLinksModelLink
isLinkedModelLink
recordLinksModelLink

Menu

Merge cells

mergeableColumn

Misc

localeHelperLocalizable
localeManagerLocalizable
stmModelStm
tagsColumn
treeColumn

Other

$namestaticModel
defaultsColumn
elementColumn
formatNumberColumn
formulaColumn
gridColumn
pinnedColumn
readOnlyColumn
relationsstaticModel
subGridColumn
typestaticColumn
visibleColumn

Parent & children

allChildrenTreeNode
childLevelTreeNode
firstChildTreeNode
isLeafTreeNode
isLoadedTreeNode
isParentTreeNode
isRootTreeNode
lastChildTreeNode
nextSiblingTreeNode
parentTreeNode
parentIdTreeNode

Summary

sumColumn
summariesColumn

Functions

76

Configuration

applyDefaultsstaticBase

Editing

copyModel
getDataModel
removeModel
setModel

Events

Fields

addFieldstaticModel
getModel
processFieldstaticModel
removeFieldstaticModel

Identification

asIdstaticModel

JSON

toJSONModel

Lifecycle

destroystaticBase

Misc

equalsModel
initClassstaticBase
isOfTypeNamestaticBase
linkModelLink
mixinstaticBase
optionalLstaticLocalizable

Other

hideColumn
LstaticLocalizable
onEvents
relayAllEvents
showColumn
toggleColumn
triggerEvents
unEvents

Parent & children

appendChildTreeNode
bubbleTreeNode
bubbleWhileTreeNode
containsTreeNode
isExpandedTreeNode
removeChildTreeNode
traverseTreeNode

Events

5

Event handlers

5

Typedefs

2

CSS variables

3
NameDescription
--b-rating-column-icon-sizeIcon size (applied as font-size)
--b-rating-column-empty-colorEmpty icon color
--b-rating-column-filled-colorFilled icon color