StyleDefinition / PartialStyleDefinition
Description
A StyleDefinition is an interface that exposes properties to allow customizing the CSS styles and/or class names applied to HTML elements making up the DataGrid and its components.
Properties
|
Property |
Type |
Description |
|---|---|---|
|
key |
string | object |
Unique value identifying the 2 |
|
basedOn? |
string | object |
The key of a |
|
style? |
Object containing a group of properties, where the name of the property corresponds to a CSS property and where the value corresponds to the value of the corresponding CSS property. |
|
|
class? |
string | string[] |
Name of the CSS class(es) to apply on the target HTML element. |
Examples
Example 1
The following example creates a StyleDefinition that targets the grid’s dataCell component. The basedOn property tells it wants to inherit from the theme’s StyleDefinition that also targets the grid’s dataCell component. We could have replaced the call to Xceed.StyleKey.baseKey() with a call to Xceed.StyleKey.defaultKey(Xceed.StyleType.DataCell). In this case, both would have targeted the same theme’s StyleDefinition.
The created StyleDefinition tells it wants the dataCell underlying HTML element to have its CSS style properties background and fontSize set to white and larger respectively and have the CSS class named my-data-cell applied. Since the basedOn property is set, the style and class are going to be merged with the ones imported from the base StyleDefinition.
const styleDefinition = {
key: Xceed.StyleKey.defaultKey(Xceed.StyleType.DataCell),
basedOn: Xceed.StyleKey.baseKey(),
style: {
background: "white",
fontSize: "larger"
},
class: "my-data-cell"
};Example 2
The following example creates a StyleDefinition that targets the grid’s dataCell component and sets the underlying HTML element class to my-data-cell. Since the basedOn property is not set, it will not inherit from the theme’s StyleDefinition. In other words, this StyleDefinition replaces the theme’s StyleDefinition that targets a dataCell.
const styleDefinition = {
key: Xceed.StyleKey.defaultKey(Xceed.StyleType.DataCell),
class: "my-data-cell"
};Example 3
The following example creates a StyleDefinition that targets the grid dataCell’s part named border located within a dataCell. The basedOn property tells it wants to inherit from the theme’s StyleDefinition that targets the same component and part. We could have replaced the call to Xceed.StyleKey.baseKey() with a call to Xceed.StyleKey.defaultKey(Xceed.StyleType.DataCell, “border”). In this case, both would have targeted the same theme’s StyleDefinition.
const styleDefinition = {
key: Xceed.StyleKey.defaultKey(Xceed.StyleType.DataCell),
part: "border",
basedOn: Xceed.StyleKey.baseKey()
};Example 4
The following example creates a StyleDefinition that targets the grid’s dataCell component when it is in the current state. The basedOn property tells it wants to inherit from the theme’s StyleDefinition that targets the same component and state.
The created StyleDefinition tells it wants the dataCell underlying HTML element to have the CSS class named my-data-cell-state-current applied when the dataCell is in the current state. The created StyleDefinition for the current state is actually merged with the default StyleDefinition that targets the same component and part. In this case, the StyleDefinition is going to be merged with the StyleDefinition that has the Xceed.StyleKey.defaultKey(Xceed.StyleType.DataCell) key.
const styleDefinition = {
key: Xceed.StyleKey.stateKey(Xceed.StyleType.DataCell, "current"),
basedOn: Xceed.StyleKey.baseKey(),
class: "my-data-cell-state-current"
};Remarks
A StyleDefinition can be provided through the DataGridOptions and DataGridStartupOptions.
Some predefined keys are available and returned by functions of the StyleKey class in order to target specific components, parts and states of the DataGrid.
A StyleDefinition having a key set using the defaultKey helper function is considered the default style for the targeted component or component part. A StyleDefinition having a key set using the stateKey helper function is considered as a state style for the targeted component or component part. A state style does not replace a default style. It is an additional style that will be merged with it when the targeted state is active.
The DataGrid has many components, parts and states. Each of these could be targeted by a StyleDefinition using one of the StyleKey helper functions. Each theme has a predefined set of StyleDefinition that targets these components, parts and states, each of which specifies the CSS styles and classes to apply to the underlying HTML elements.
A partial type/interface is an object in which properties are optional.