StyleSelector
Description
A StyleSelector is an interface that represents a function that selects and returns a CSS style that will be applied to an HTML element.
Typescript
It has the following signature:
(context: StyleContext, seeker: StyleSeeker): OptionalStyleDefinitionAttributes
|
Parameter |
Type |
Description |
|---|---|---|
|
context |
Represents the context of the element to style. |
|
|
seeker |
Object useful to retrieve and build a style. |
|
|
[output] |
Returns the style to apply to the HTML element. |
A StyleSelector can be provided to the DataGrid through the DataGridOptions.
Example
The following example shows how to provide custom styles to data rows and data cells that are based on runtime values.
...
datagrid.setOptions({ styleSelector: selectCustomStyle });
...
function selectCustomStyle(context, seeker)
{
let style;
switch (context.type)
{
case "dataRow":
{
// Set custom style only when row meets criteria.
if (context.dataItem["employee"] === "Dodsworth, Anne")
{
// Define custom style
style = {
style: {
background: "darkcyan",
color: "lightgray"
}
};
// Merge it with default style
style = seeker.merge(seeker.base(context), style);
}
else
{
// Use default style if dataRow does not meet criteria.
style = seeker.base(context);
}
}
break;
case "dataCell":
{
// Set custom style only when cell meets criteria.
const field = context.columnDefinition.field;
if (field === "stockLevel" && context.dataItem[field] <= .25)
{
// Define custom style
style = {
style: {
background: "crimson",
color: "white"
}
};
// Merge it with default style
style = seeker.merge(seeker.base(context), style);
}
else
{
// Use default style if dataCell does not meet criteria.
style = seeker.base(context);
}
}
break;
// Use default style for any element other then a dataRow or dataCell, or else these elements will not be styled.
default:
{
style = seeker.base(context);
}
break;
}
return style;
}
Need help? Contact us!