Adaptable Style

Many Modules have a Style property which all reference the same Adaptable Style object. These include:

The contents of the Adaptable Style object are as follows:

warning

All properties in the object are nullable so only set those which differ from the current default in the grid

PropertyDescription
BackColorColour background of cell - provide a hex value.
BorderColorColour of cell border - provide a hex value.
ClassNameName of existing Css Class; use instead of setting other object properties
FontSizeSize of font: 'XSmall', 'Small', 'Medium', 'Large' or 'XLarge'
FontStyleStyle of the font: 'Normal' or 'Italic'
FontWeightWhether font appears as 'Normal' or 'Bold'
ForeColorFont colour in cell - provide a hex value.
ConditionalStyle: {
ConditionalStyles: [
{
Scope: {
All: true,
},
Style: {
BackColor: 'green',
FontStyle: 'Italic',
ForeColor: '#ffffe0',
FontWeight: 'Bold'
},
Rule:{
BooleanExpression: '[notional] > 1400',
}
},
],
},

ClassName

The Style object includes a ClassName property that enables a css style name to be provided which AdapTable will use.

important

Other properties in the Style object will take precedence if 2 css properties are both set

User Interface Options has a collection entitled styleClassNames, which lists all the css classes that the user is able to pick in the Style screen.

If this property is populated then forms which show the Style dialog will additionally display a dropdown containing all the values in the array.

tip

If providing the object in Predefined Config the style name doesn't need to be included in styleClassNames

caution

Make sure to include a style element with the same name in your own CSS files

// Add 4 styles in a css file
.brownStyle {
color: brown;
font-weight: normal !important;
}
.yellowStyle {
background: lightyellow !important;
font-style: italic !important;
}
.darkGreenStyle {
color: darkgreen !important;
}
.darkRedStyle {
color: darkred !important;
font-weight:bolder !important;
}
// List the 4 named Css Styles User Interface Options
// This means they will be listed in the dropdown in the Style Wizard
adaptableOptions.userInterfaceOptions = {
styleClassNames: ['brownStyle', 'yellowStyle','darkGreenStyle' , 'darkRedStyle'],
};
// Reference the Styles in Quick Search, Conditional Style and Format Column Config
adaptableOptions.predefinedConfig: {
QuickSearch: {
Style: {
ClassName: 'brownStyle'
},
},
FormatColumn: {
FormatColumns: [
{
Scope: {
ColumnIds: ['bid'],
},
Style: {
ClassName: 'yellowStyle'
},
}
],
},
ConditionalStyle: {
ConditionalStyles: [
{
Scope: {
DataTypes: ['Number'],
},
Style: {
ClassName: 'darkGreenStyle',
},
Rule: {
Predicate: {
PredicateId: 'Positive',
},
},
},
{
Scope: {
DataTypes: ['Number'],
},
Style: {
ClassName: 'darkRedStyle',
},
Rule: {
Predicate: {
PredicateId: 'Negative',
},
},
},
],
},
}