Theme manager enables you to control the grid theme, which includes:
- Theme,
- Row coloring,
- Vertical grid,
- Horizontal grid,
To activate theme manager you need to have infoPanel config enabled. To open the config, click on the Theme manager icon at the bottom of the grid.
import { Component } from '@angular/core';
@Component({
template: `
<gui-grid [columns]="columns"
[source]="users"
[sorting]="true"
[infoPanel]="infoPanel"
id="gw-theme-manager-grid">
</gui-grid>`
})
export class ThemeManagerComponent {
users = users;
columns: Array<GuiColumn> = [{
header: 'Name',
field: 'name'
}, {
header: 'Position',
field: 'position'
}, {
header: 'Team',
field: 'teamShort',
width: 80
}, {
header: 'Training',
field: 'training',
type: GuiDataType.NUMBER,
width: 100
}, {
header: 'Company',
field: 'company'
}];
infoPanel: GuiInfoPanel = {
enabled:true,
infoDialog:false,
columnsManager:false,
schemaManager: true
};
}[
{
"id": "#1",
"name": "Mark Ross",
"company": "Genco Pura Olive Oil Company",
"position": "Team Leader",
"teamSort": "TI",
"training": 13,
"budget": -7000
}, ...
]| Input | Type | Default | Description |
|---|---|---|---|
| infoPanel | boolean | GuiInfoPanel | false | Pass a boolean to enable or disable info panel. Adding GuiInfoPanel object, allows deeper info panel configuration. |
| enabled | boolean | false | Enable/disable info panel. |
| schemaManager | boolean | true | Enables schemaManager. |
| infoDialog | boolean | true | Sets info dialog visibility. |
| columnsManager | boolean | true | Sets column manager visibility. |
| sourceSize | boolean | true | Sets source size visibility. |