ColorColumn
A column that displays color values (built-in color classes or CSS colors) as a colored element similar to the ColorField. When the user clicks the element, a ColorPicker lets the user select from a range of colors.
Color column
//<code-header>
fiddle.title = 'Color column';
//</code-header>
// grid with ColorColumn
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 : 'color', field : 'color', text : 'ColorColumn', width : 100, colors : DataGenerator.colors }
]
});new Grid({
columns : [
{
type : 'color',
field : 'color',
text : 'Color'
}
]
});
Configs
84
Configs
84Common
autoHeightColumn
autoWidthColumn
fieldColumn
fitModeColumn
flexColumn
listenersEvents
maxWidthColumn
textColumn
widthColumn
Other
Adds an option in the picker to set no background color
By default, the color code (hex value etc.) is stored in the record field. If you want to store the color
name instead, set this to true.
The colors property can be an array of string CSS colors or of objects with color
and text properties from which the user can choose from. This will override the
pickers default colors.
Provide an array of string CSS colors:
new Grid({
columns : [
{
type : 'color',
field : 'color',
text : 'Color',
colors : ['#00FFFF', '#F0FFFF', '#89CFF0', '#0000FF', '#7393B3']
}
]
});
Show the color name in addition to a colored swatch.
formulaColumn
pinnedColumn
pinnedWidthColumn
readOnlyColumn
Integration
vueColumn
Interaction
cellEditorColumn
collapsedColumn
collapseModeColumn
collapsibleColumn
draggableColumn
editorColumn
filterableColumn
finalizeCellEditColumn
groupableColumn
hideableColumn
invalidActionColumn
managedCellEditingColumn
resizableColumn
revertOnEscapeColumn
sealedColumn
searchableColumn
sortableColumn
toggleAllHiddenColumn
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
Rendering
afterRenderCellColumn
cellClsColumn
clsColumn
groupRendererColumn
headerRendererColumn
iconColumn
rendererColumn
tooltipColumn
tooltipRendererColumn
Properties
154
Properties
154Common
autoHeightColumn
autoWidthColumn
fieldColumn
fitModeColumn
flexColumn
maxWidthColumn
textColumn
widthColumn
Class hierarchy
Identifies an object as an instance of ColorColumn class, or subclass thereof.
Identifies an object as an instance of ColorColumn class, or subclass thereof.
isColumnColumn
isEventsEvents
isLocalizableLocalizable
isModelModel
isModelLinkModelLink
isModelStmModelStm
isTreeNodeTreeNode
Other
Adds an option in the picker to set no background color
By default, the color code (hex value etc.) is stored in the record field. If you want to store the color
name instead, set this to true.
The colors property can be an array of string CSS colors or of objects with color
and text properties from which the user can choose from. This will override the
pickers default colors.
Provide an array of string CSS colors:
new Grid({
columns : [
{
type : 'color',
field : 'color',
text : 'Color',
colors : ['#00FFFF', '#F0FFFF', '#89CFF0', '#0000FF', '#7393B3']
}
]
});
Show the color name in addition to a colored swatch.
contentElementColumn
defaultsColumn
elementColumn
formulaColumn
gridColumn
isPersistableModel
pinnedColumn
pinnedWidthColumn
readOnlyColumn
subGridColumn
textElementColumn
textWrapperColumn
visibleColumn
Editing
copyOfModel
isBatchUpdatingModel
isCommittingModel
isCreatingModel
isModifiedModel
isValidModel
modificationDataModel
modificationsModel
Integration
vueColumn
Interaction
cellEditorColumn
collapsedColumn
collapseModeColumn
collapsibleColumn
draggableColumn
editorColumn
filterableColumn
finalizeCellEditColumn
groupableColumn
hideableColumn
invalidActionColumn
managedCellEditingColumn
resizableColumn
revertOnEscapeColumn
sealedColumn
searchableColumn
sortableColumn
toggleAllHiddenColumn
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
Parent & children
allChildrenTreeNode
allUnfilteredChildrenTreeNode
childLevelTreeNode
descendantCountTreeNode
firstChildTreeNode
isLeafTreeNode
isLoadedTreeNode
isParentTreeNode
isRootTreeNode
lastChildTreeNode
nextSiblingTreeNode
parentTreeNode
parentIdTreeNode
previousSiblingTreeNode
previousSiblingsTotalCountTreeNode
visibleDescendantCountTreeNode
Rendering
afterRenderCellColumn
cellClsColumn
clsColumn
groupRendererColumn
headerRendererColumn
iconColumn
rendererColumn
tooltipColumn
tooltipRendererColumn
Functions
77
Functions
77Configuration
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
defaultRendererColumn
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
5
CSS variables
5| Name | Description |
|---|---|
--b-color-column-border-width | Color box border |
--b-color-column-border-color | Color box border color |
--b-color-column-picker-width | Width of the color column picker |
| No | |
--b-color-column-empty-border-width | Color box border width when no color is selected |
--b-color-column-empty-border-color | Color box border color when no color is selected |