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
Configs
89Common
autoHeightColumn
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
cellEditorColumn
collapsedColumn
collapseModeColumn
collapsibleColumn
draggableColumn
editorColumn
filterableColumn
finalizeCellEditColumn
groupableColumn
hideableColumn
invalidActionColumn
managedCellEditingColumn
resizableColumn
revertOnEscapeColumn
sealedColumn
searchableColumn
sortableColumn
toggleAllHiddenColumn
Rendering
The empty rating icon to show
The filled rating icon to show
afterRenderCellColumn
cellClsColumn
clsColumn
groupRendererColumn
headerRendererColumn
iconColumn
rendererNumberColumn
tooltipColumn
tooltipRendererColumn
Integration
vueColumn
Menu
cellMenuItemsColumn
enableCellContextMenuColumn
enableHeaderContextMenuColumn
headerMenuItemsColumn
showColumnPickerColumn
Misc
alwaysClearCellColumn
autoSyncHtmlColumn
bubbleEventsEvents
callOnFunctionsEvents
editTargetSelectorColumn
filterTypeColumn
headerWidgetsColumn
headerWritingModeColumn
htmlEncodeColumn
htmlEncodeHeaderTextColumn
instantUpdateColumn
localeClassLocalizable
localizableLocalizable
localizablePropertiesLocalizable
responsiveLevelsColumn
tagsColumn
touchConfigColumn
treeColumn
Properties
160
Properties
160Common
autoHeightColumn
autoWidthColumn
fieldColumn
fitModeColumn
flexColumn
largeStepNumberColumn
maxNumberColumn
maxWidthColumn
minNumberColumn
stepNumberColumn
textColumn
unitNumberColumn
widthColumn
Class hierarchy
Identifies an object as an instance of RatingColumn class, or subclass thereof.
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
cellEditorColumn
collapsedColumn
collapseModeColumn
collapsibleColumn
draggableColumn
editorColumn
filterableColumn
finalizeCellEditColumn
groupableColumn
hideableColumn
invalidActionColumn
managedCellEditingColumn
resizableColumn
revertOnEscapeColumn
sealedColumn
searchableColumn
sortableColumn
toggleAllHiddenColumn
Rendering
The empty rating icon to show
The filled rating icon to show
afterRenderCellColumn
cellClsColumn
clsColumn
groupRendererColumn
headerRendererColumn
iconColumn
rendererNumberColumn
tooltipColumn
tooltipRendererColumn
Editing
copyOfModel
isBatchUpdatingModel
isCommittingModel
isCreatingModel
isModifiedModel
isValidModel
modificationDataModel
modificationsModel
Integration
vueColumn
JSON
jsonModel
Menu
cellMenuItemsColumn
enableCellContextMenuColumn
enableHeaderContextMenuColumn
headerMenuItemsColumn
showColumnPickerColumn
Misc
alwaysClearCellColumn
autoSyncHtmlColumn
callOnFunctionsEvents
editTargetSelectorColumn
filterTypeColumn
firstStoreModel
headerWidgetsColumn
headerWritingModeColumn
htmlEncodeColumn
htmlEncodeHeaderTextColumn
instantUpdateColumn
localeHelperLocalizable
localeManagerLocalizable
responsiveLevelsColumn
stmModelStm
tagsColumn
touchConfigColumn
treeColumn
Other
contentElementColumn
defaultsColumn
elementColumn
formatNumberColumn
formulaColumn
gridColumn
isPersistableModel
pinnedColumn
pinnedWidthColumn
readOnlyColumn
subGridColumn
textElementColumn
textWrapperColumn
visibleColumn
Parent & children
allChildrenTreeNode
allUnfilteredChildrenTreeNode
childLevelTreeNode
descendantCountTreeNode
firstChildTreeNode
isLeafTreeNode
isLoadedTreeNode
isParentTreeNode
isRootTreeNode
lastChildTreeNode
nextSiblingTreeNode
parentTreeNode
parentIdTreeNode
previousSiblingTreeNode
previousSiblingsTotalCountTreeNode
visibleDescendantCountTreeNode
Functions
76
Functions
76Configuration
Editing
beginBatchModel
cancelBatchModel
clearChangesModel
copyModel
endBatchModel
getDataModel
getUnmodifiedModel
hasBatchedChangeModel
isFieldModifiedModel
removeModel
revertChangesModel
setModel
Events
detachListenersBase
Identification
Misc
animatePropertyBase
callbackBase
downloadTestCaseBase
equalsModel
linkModelLink
resolveCallbackBase
updateLocalizationLocalizable
Other
addListenerEvents
getFilterableValueColumn
getRawValueColumn
hasListenerEvents
hideColumn
isEditableModel
onEvents
refreshCellColumn
refreshCellsColumn
refreshHeaderColumn
relayAllEvents
removeAllListenersEvents
removeListenerEvents
resizeToFitContentColumn
resumeEventsEvents
showColumn
suspendEventsEvents
toggleColumn
toggleChildrenColumn
triggerEvents
unEvents
Parent & children
ancestorsExpandedTreeNode
appendChildTreeNode
bubbleTreeNode
bubbleWhileTreeNode
clearChildrenTreeNode
containsTreeNode
convertToParentTreeNode
getDescendantCountTreeNode
insertChildColumn
isExpandedTreeNode
removeChildTreeNode
replaceChildrenTreeNode
traverseTreeNode
traverseBeforeTreeNode
traverseWhileTreeNode
Events
5
Events
5Event handlers
5
Event handlers
5Typedefs
2
Typedefs
2BryntumListenerConfigEvents
RelationConfigModel
CSS variables
3
CSS variables
3| Name | Description |
|---|---|
--b-rating-column-icon-size | Icon size (applied as font-size) |
--b-rating-column-empty-color | Empty icon color |
--b-rating-column-filled-color | Filled icon color |