Views

The ColorPicker provides options for configuring its popup view and for implementing and customizing combined views.

Getting Started

You can configure the ColorPicker to render either a GradientComponent or a PaletteComponent in its popup. To choose between the two, provide either gradient or palette to the view input property of the component. By default, the gradient view will be used.

@Component({
    selector: 'my-app',
    template: `
        <div class="example-config">
            <div>
                <input type="radio" name="view" value="gradient" class="k-radio" id="gradient" [(ngModel)]="view">
                <label class="k-radio-label" for="gradient">Gradient</label>
            </div>
            <div>
                <input type="radio" name="view" value="palette" class="k-radio" id="palette" [(ngModel)]="view">
                <label class="k-radio-label" for="palette">Palette</label>
            </div>
        </div>
        <div>
            <kendo-colorpicker
                [view]="view"
                [value]="value"
            >
            </kendo-colorpicker>
        </div>
    `
})
export class AppComponent {
    public view: string = 'gradient';
    public value: string = '#548235';
}

Implementing Combined Views

To set a combined view and have both the ColorPalette and ColorGradient rendered in the ColorPicker popup, set the view property to combo.

@Component({
    selector: 'my-app',
    template: `
        <div [style.color]="picker.value">{{ picker.value }}</div>
        <kendo-colorpicker #picker [view]="'combo'" [value]="selectedColor"></kendo-colorpicker>
    `
   })
export class AppComponent {
    public selectedColor: string = '#f9d9ab';
}

Customizing the Combined Views

The ColorPicker enables the user to customize the combo view of its popup.

@Component({
    selector: 'my-app',
    template: `
        <div [style.color]="picker.value">{{ picker.value }}</div>
        <kendo-colorpicker
            [format]="'hex'"
            [paletteSettings]="paletteSettings"
            [gradientSettings]="{ opacity: false }"
            #picker
            [view]="'combo'"
            [value]="selectedColor"
        >
        </kendo-colorpicker>
    `
   })
export class AppComponent {
    public selectedColor: string = '#f9d9ab';

    public paletteSettings: PaletteSettings = {
        tileSize: 24,
        columns: 8,
        palette: [
            "#f0d0c9", "#e2a293", "#d4735e", "#65281a",
            "#eddfda", "#dcc0b6", "#cba092", "#7b4b3a",
            "#fcecd5", "#f9d9ab", "#f6c781", "#c87d0e",
            "#e1dca5", "#d0c974", "#a29a36", "#514d1b",
            "#f0d0c9", "#e2a293", "#d4735e", "#65281a",
            "#eddfda", "#dcc0b6", "#cba092", "#7b4b3a",
            "#fcecd5", "#f9d9ab", "#f6c781", "#c87d0e",
            "#e1dca5", "#d0c974", "#a29a36", "#514d1b",
            "#c6d9f0", "#8db3e2", "#548dd4", "#17365d",
            "#fcecd5", "#f9d9ab", "#f6c781", "#c87d0e",
            "#e1dca5", "#d0c974", "#a29a36", "#514d1b",
            "#c6d9f0", "#8db3e2", "#548dd4", "#17365d"
        ]
    };
}

In this article