The Blotter provides many functions to allow you to style and theme your Grid.
A unique function that provides an empty toolbar for developers at design time to fill.
The application toolbar contains 2 Divs:
Conditional Styles allow you to set the look and feel of your rows and / or columns based on a set of rules that you specify (using a Query).
When create a Conditional Style you will select the:
Scope: whether the style is applied for a single column or an entire row
If you are using Column Categories then you can also apply a style just to the columns in a single category
Colours and Font Properties: used to create the style that suits your needs by selecting the fore and back colours and font elements that you require. Just select those elements that you wish to change from the default setting.
If you don't want to create the style yourself then there is an option to select the name of a pre-existing CSS style instead. Note: this is not available for all underlying grids.. See User Interface Config for more details.
Query: determines when the style will be applied. For more information on building and editing Queries using multiple Conditions and Criteria see Queries
The conditional styles you create will be applied to your grid when a row's values match ALL the criteria you have set. If a row's values do not match the criteria, the default styles will be used instead.
The Dashboard is the area at the top of the Adaptable Blotter interface designed to give you quick access to commonly used Functions. It contains the Home Toolbar and Function Toolbars.
You can 'minimise' the Dashboard by clicking the UP chevron on the right hand side of the toolbars. This will leave just the name of the Blotter in a small expandable button that you can click to re-open the Dashboard. This option is useful for maximising screen estate.
Alternatively you can hide the Dashboard altogether by selecting 'Hide Dashboard' from the column header menu. (Select 'Show Dashboard' from the menu to put the Dashboard back.)
Use the Dashboard function to specify at runtime which dropdowns and Function Shortcuts will appear in the Home Toolbar, and the order and visibility of the Function Toolbars.
You can set numeric cells to briefly change colour when their values change. This flashing effect is a useful visual aid.
By default, flashing cells is disabled. If you want to enable flashing cells on every column, tick the All Columns checkbox. If you only want flashing cells to be enabled on some columns, tick the Live checkbox for the columns you want to flash.
For each column that you want flashing cells enabled, you can set the Flash Duration, Up Colour and Down Colour properties as appropriate.
The colour picker for choosing your own colours is provided by the browser and are not part of the Adaptable Blotter
This function allows you to quickly style a column so that it always appears with the colours and font properties you specify.
Simply select the column and choose the fore and back colours and font properties as appropriate.
Format Column differs from the Conditional Styles function because the latter only applies the style when a particular condition is met. However Format Column will always style the column irrespective of the data contained in the cell.
The style has the last level of style-application preference, so any quick searches or conditional styles will be applied ahead of it.
You can only create one Format Column for a column.
This function allows you to render numeric columns using coloured horizontal bars.
The width of the bar is proportional to the value in the column.
You are able to specify whether to see, additionally, the actual cell value (which you can also choose to see as a tooltip).
You can set the minimum and maximum values which the Blotter uses to work out the width of the bar (the defaults are the currently minimum and maximum values in the column respectively). Alternatively, you can set these to be other columns rather than 'hard-coded' values (e.g. you can set the percent bar in Column 'A' so that it displays the width as the percentage of the value in Column 'A' compared to that in Column 'B'.
The colours and font settings that the Adaptable Blotter uses are set using a Theme which acts as a 'skin'.
User the Theme Picker to choose which of the available themes you wish to see. (See Themes for more details).
Adaptable Blotter ships with 2 themes - "Light Theme" and "Dark Theme", but you can easily add your own using CSS Variables.
Make sure to include the name of your Theme in Theme Config as part of Predefined Config.
Function that allows you to specify how rows will appear visually if / when their contents change.
You are able to use the defaults (Up: Green, Down: Red, Neutral: Gray) or select your own. You can also choose whether to 'jump' to the selected row.
At present there is no 'flashing' for updated rows, meaning that they remain with their Updated Row colours until they are cleared. This can be done either through the Context Menu (for a single row) or via the Column Menu (for all rows).