User Interface Config
The User Interface section of Predefined Configuration.
It is defined as follows:
Property | Description |
---|---|
CheckboxColumns | Names of (boolean) Columns which will be rendered with a checkbox (editable if column is editable) |
ColorPalette | An optional list of colours that will be displayed in the Colour Picker in place of the default set that ships with Adaptable. |
ColumnMenuItems | A collection of UserMenuItem objects to be added to the Column Header Menu (the one that appears as a dropdown in each Column Header). |
ContextMenuItems | A collection of UserMenuItem objects to be added to the Context Menu (the one that appears when you right-click on a cell, or cells, in the Grid). |
EditLookUpItems | A list of Columns which, when being edited, will automatically display a Dropdown allowing the user easily to select a value. |
PermittedValuesItems | An optional list of values which are permitted for a given column. |
StyleClassNames | An optional list of css styles (existing and available) that can be used when creating styles in Adaptable (e.g. in the Conditional Styles, Format Column and other functions that use an AdaptableStyle). |
As can be seen, this section of Config contains a number of useful properties and collections.
ColorPalette
This is an optional list of colours that will be displayed in the Colour Picker in place of the default set that ships with Adaptable.
note
It's used in Functions which create an Adptable Style (e.g. Conditional Style, Format Column, Flashing Cell)
tip
Provide a list of hex values as a string array which AdapTable will convert into colours.
ColumnMenuItems
A collection of UserMenuItem objects to be added to the Column Header Menu
note
There is no limit on the number of UserMenuItems that can be provided
A UserMenuItem
contains the following properties:
Property | Description |
---|---|
Icon | Optional icon to show in the Menu Item |
Label | The text that will appear in the Menu Item |
SubMenuItems | Array of Menu Items, enabling creation of (limitless levels of) sub menus |
UserMenuItemClickedFunction | User Function that runs when a Menu Item is selected by the User |
UserMenuItemLabelFunction | User Function that can provide alternative run-time value for a Menu Item label |
UserMenuItemShowPredicate | Predicate User Function that evaluates whether a Menu Item should display |
tip
To control which, if any, of the pre-shipped Adaptable Column Menu items are displayed use the showAdaptableColumnMenu property in UserInterfaceOptions.
See UserMenuItemClickedFunction, UserMenuItemLabelFunction and UserMenuItemShowPredicate for more in-depth Help on these User Functions.
See Column Menu for full details on this topic.
ContextMenuItems
A collection of UserMenuItem objects to be added to the Context Menu
note
There is no limit on the number of UserMenuItems that can be provided
tip
To control which, if any, of the pre-shipped Adaptable Column Menu items are displayed use the showAdaptableColumnMenu property in UserInterfaceOptions.
See Column Menu section above for more details.
EditLookUpItems
This is a list of Columns which, when being edited, will automatically display a Dropdown allowing the user easily to select a value.
Order of Values in Dropdown
Column values will be displayed in the dropdown will be shown according to the following logic:
LookUpValues: You can provide a list of LookUpValues that will be displayed in the Dropdown. This list can be either 'hardcoded' or returned from a function.
PermittedValues: If no LookUpValues are provided, Adaptable will show a list of PermittedValues (if one has been provided).
Distinct Column Values: Otherwise, Adaptable will fetch all the distinct values in the Column and populate the Dropdown with them.
warning
The column must also be marked as editable in the column schema for the Dropdown to appear.
An EditLookupItem
contains the following properties:
Property | Description |
---|---|
GetColumnValuesFunction | The name of the function which will run each time Look Up Values are required. |
LookUpValues | Any particular values to show in the Lookup - the list can be either hard-coded or returned by a function. |
Scope | Which Column(s) will show the Edit Lookup Mandatory |
As can be seen, there are 2 options for providing Edit Look Up Values:
- Hard Coded List - via the LookUpValues property which accepts an array
- JavaScript Function - via the GetColumnValuesFunction which will be provided by developers and invoked by AdapTable
caution
Whichever method you provide you must also provide Scope so AdapTable knows which column(s) to provide the values for.
note
The order of evaluation of Scope is first ColumnIds and then DataTypes.
LookUpValues
This is the simplest way - simply provide a list of values in an array.
GetColumnValuesFunction
For more complicated scenarios you can provide a JavaScript function that will be invoked by AdapTable for all the columns in the Scope.
As with all instances where a JavaScript function needs to be provided to AdapTable, this is done in 2 steps:
note
Predefined Config is stored as JSON so cannot include JavaScript functions (as they cannot be stringifed)
Provide a custom, named GetColumnValuesFunction implementation in the User Functions section of Adaptable Options.
Reference that function by name in Predefined Config.
PermittedValuesItems
Option to tell AdapTable which values to display in a given column's Filter, Expression Editor, Bulk Update dropdown etc..
tip
Leave this unset for AdapTable to retrieve a list of distinct column values automatically
note
If this property is set, then only these values will appear when distinct column values are required.
A Permitted Values Item
contains the following properties:
Property | Description |
---|---|
GetColumnValuesFunction | The name of the function which will run each time Permitted values are required. |
PermittedValues | Hardcoded list of Permitted Values that will be shown in the Column Filter and when building a Query. |
Scope | Scope where Permitted Values will show Mandatory |
There are 2 options for providing Permitting Values:
- Hard Coded List - via the PermittedValues property which accepts an array
- JavaScript Function - via the GetColumnValuesFunction which will be provided by developers and invoked by AdapTable
caution
Whichever method you provide you must also provide Scope so AdapTable knows which column(s) to provide the values for.
note
The order of evaluation of Scope is first ColumnIds and then DataTypes.
PermittedValues
This is the simplest way - simply provide a list of values in an array.
GetColumnValuesFunction
For more complicated scenarios you can provide a JavaScript function that will be invoked by AdapTable for all the columns in the Scope.
As with all instances where a JavaScript function needs to be provided to AdapTable, this is done in 2 steps:
note
Predefined Config is stored as JSON so cannot include JavaScript functions (as they cannot be stringifed)
Provide a custom, named GetColumnValuesFunction implementation in the User Functions section of Adaptable Options.
Reference that function by name in Predefined Config.
StyleClassNames
An optional list of css styles (existing and available) that can be used when creating styles in Adaptable (e.g. in the Conditional Style, Format Column, Flashing Cell and other fucntions that use an Adaptable Style.
important
This allows you quickly to select the css style name instead of having to build a style manually.
When this collection is not empty the Syle Creation dialog will include a 'Use Style Class Name' checkbox.
note
If that checkbox is checked, the dialog will displa a dropdown containing the contents of this collection.
warning
You must ensure that any style name you list here is available to Adaptable in a stylesheet that you provide
RowStyles
A list of RowStyles which allow you to specifiy how Adaptable should look.
tip
You can choose to style All, Odd or Even rows (the last 2 are used when wanting alternating row styles).
note
This is particularly useful for when you create a custom theme for Adaptable and want the grid to share the same colour scheme.
The RowStyle object contains 2 properties:
Style: the Adaptable Style object - can be either a classname or a set of style-related properties.
RowType: specifies which rows the Style will be applied on - can be 'All', 'Odd' or 'Even'
caution
If this property is left empty (the default) then the row style in the Grid theme will be used
CheckboxColumns
Checkbox Columns are boolean columns where AdapTable will automatically display a checkbox - checked if the cell value is true.
note
If the Column is ReadOnly the checkbox is disabled but the check mark remains visible
All that is required is simply to provide a list of boolean columnIds which should display a checkbox.
When a checkbock is clicked / unclicked the CheckboxColumnClickedEvent is fired by AdapTable.