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';

	template: `
		<gui-grid [columns]="columns"
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 = {
		schemaManager: true
        "id": "#1",
        "name": "Mark Ross",
        "company": "Genco Pura Olive Oil Company",
        "position": "Team Leader",
        "teamSort": "TI",
        "training": 13,
        "budget": -7000
    }, ...

infoPanelboolean | GuiInfoPanelfalse Pass a boolean to enable or disable info panel. Adding GuiInfoPanel object, allows deeper info panel configuration.
enabledbooleanfalse Enable/disable info panel.
schemaManagerbooleantrue Enables schemaManager.
infoDialogbooleantrue Sets info dialog visibility.
columnsManagerbooleantrue Sets column manager visibility.
sourceSizebooleantrue Sets source size visibility.