Theme manager
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.
Name
Position
Team
Training
Company
13
33
42
100
29
92
13
81
72
55
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
}, ...
]
Inputs
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. |