\Kendo\UI\ColorPicker

A PHP wrapper for Kendo UI ColorPicker.

Inherits from \Kendo\UI\Widget.

Usage

To use ColorPicker in a PHP page instantiate a new instance, configure it via the available configuration methods and output it by echo-ing the result of the render method.

Using Kendo ColorPicker

<?php
// Create a new instance of ColorPicker and specify its id
$colorPicker = new \Kendo\UI\ColorPicker('ColorPicker');

// Configure it
$colorPicker->buttons(true)

// Output it

echo $colorPicker->render();
?>

Methods

buttons

Specifies whether the widget should display the Apply / Cancel buttons.

Returns

\Kendo\UI\ColorPicker

Parameters

$value boolean

Example

<?php
$colorPicker = new \Kendo\UI\ColorPicker('ColorPicker');
$colorPicker->buttons(true);
?>

change

Fires when a color was selected, either by clicking on it (in the simple picker), by clicking ENTER or by pressing "Apply" in the HSV picker. For additional information check the change event documentation.

Returns

\Kendo\UI\ColorPicker

Parameters

$value string|\Kendo\JavaScriptFunction

Example - using string which defines a JavaScript function

<?php
$colorPicker = new \Kendo\UI\ColorPicker('ColorPicker');
$colorPicker->change('function(e) { }');
?>

Example - using string which defines a JavaScript name

<script>
    function onChange(e) {
        // handle the change event.
    }
</script>
<?php
$colorPicker = new \Kendo\UI\ColorPicker('ColorPicker');
$colorPicker->change('onChange');
?>

Example - using \Kendo\JavaScriptFunction

<?php
$colorPicker = new \Kendo\UI\ColorPicker('ColorPicker');
$colorPicker->change(new \Kendo\JavaScriptFunction('function(e) { }'));
?>

clearButton

Specifies whether the widget should display the 'Clear color' button.

Returns

\Kendo\UI\ColorPicker

Parameters

$value boolean

Example

<?php
$colorPicker = new \Kendo\UI\ColorPicker('ColorPicker');
$colorPicker->clearButton(true);
?>

close

Fires when the picker popup is closing. For additional information check the close event documentation.

Returns

\Kendo\UI\ColorPicker

Parameters

$value string|\Kendo\JavaScriptFunction

Example - using string which defines a JavaScript function

<?php
$colorPicker = new \Kendo\UI\ColorPicker('ColorPicker');
$colorPicker->close('function(e) { }');
?>

Example - using string which defines a JavaScript name

<script>
    function onClose(e) {
        // handle the close event.
    }
</script>
<?php
$colorPicker = new \Kendo\UI\ColorPicker('ColorPicker');
$colorPicker->close('onClose');
?>

Example - using \Kendo\JavaScriptFunction

<?php
$colorPicker = new \Kendo\UI\ColorPicker('ColorPicker');
$colorPicker->close(new \Kendo\JavaScriptFunction('function(e) { }'));
?>

closeOnSelect

Specifies whether selection of a color in the palette view closes the popup. Applied only when buttons are set to false and the currently selected view is palette.

Returns

\Kendo\UI\ColorPicker

Parameters

$value boolean

Example

<?php
$colorPicker = new \Kendo\UI\ColorPicker('ColorPicker');
$colorPicker->closeOnSelect(true);
?>

columns

The number of columns to show in the color dropdown when a pallete is specified. This is automatically initialized for the "basic" and "websafe" palettes. If you use a custom palette then you can set this to some value that makes sense for your colors.

Returns

\Kendo\UI\ColorPicker

Parameters

$value float

Example

<?php
$colorPicker = new \Kendo\UI\ColorPicker('ColorPicker');
$colorPicker->columns(1);
?>

contrastTool

Enables the contrast tool in the ColorGradient.

Returns

\Kendo\UI\ColorPicker

Parameters

$value boolean|\Kendo\UI\ColorPickerContrastTool|array

Example - using boolean

<?php
$colorPicker = new \Kendo\UI\ColorPicker('ColorPicker');
$colorPicker->contrastTool(true);
?>

Example - using \Kendo\UI\ColorPickerContrastTool

<?php
$colorPicker = new \Kendo\UI\ColorPicker('ColorPicker');
$contrastTool = new \Kendo\UI\ColorPickerContrastTool();
$backgroundColor = 'value';
$contrastTool->backgroundColor($backgroundColor);
$colorPicker->contrastTool($contrastTool);
?>

Example - using array

<?php
$colorPicker = new \Kendo\UI\ColorPicker('ColorPicker');
$backgroundColor = 'value';
$colorPicker->contrastTool(array('backgroundColor' => $backgroundColor));
?>

fillMode

Sets a value controlling how the color is applied.

Returns

\Kendo\UI\ColorPicker

Parameters

$value string

Example

<?php
$colorPicker = new \Kendo\UI\ColorPicker('ColorPicker');
$colorPicker->fillMode('value');
?>

format

Defines the format of the gradient input editor

Returns

\Kendo\UI\ColorPicker

Parameters

$value string

Example

<?php
$colorPicker = new \Kendo\UI\ColorPicker('ColorPicker');
$colorPicker->format('value');
?>

formats

Sets the available input formats in the gradient input editor. Only "hex" and "rgb" are valid values.

Returns

\Kendo\UI\ColorPicker

Parameters

$value array

Example

<?php
$colorPicker = new \Kendo\UI\ColorPicker('ColorPicker');
$colorPicker->formats(array());
?>

input

Whether to render the input in the ColorGradient component.

Returns

\Kendo\UI\ColorPicker

Parameters

$value boolean

Example

<?php
$colorPicker = new \Kendo\UI\ColorPicker('ColorPicker');
$colorPicker->input(true);
?>

messages

Allows localization of the strings that are used in the widget.

Returns

\Kendo\UI\ColorPicker

Parameters

$value \Kendo\UI\ColorPickerMessages|array

Example - using \Kendo\UI\ColorPickerMessages

<?php
$colorPicker = new \Kendo\UI\ColorPicker('ColorPicker');
$messages = new \Kendo\UI\ColorPickerMessages();
$alpha = 'value';
$messages->alpha($alpha);
$colorPicker->messages($messages);
?>

Example - using array

<?php
$colorPicker = new \Kendo\UI\ColorPicker('ColorPicker');
$alpha = 'value';
$colorPicker->messages(array('alpha' => $alpha));
?>

opacity

Only for the HSV selector. If true, the widget will display the opacity slider. Note that currently in HTML5 the does not support opacity.

Returns

\Kendo\UI\ColorPicker

Parameters

$value boolean

Example

<?php
$colorPicker = new \Kendo\UI\ColorPicker('ColorPicker');
$colorPicker->opacity(true);
?>

open

Fires when the picker popup is opening. For additional information check the open event documentation.

Returns

\Kendo\UI\ColorPicker

Parameters

$value string|\Kendo\JavaScriptFunction

Example - using string which defines a JavaScript function

<?php
$colorPicker = new \Kendo\UI\ColorPicker('ColorPicker');
$colorPicker->open('function(e) { }');
?>

Example - using string which defines a JavaScript name

<script>
    function onOpen(e) {
        // handle the open event.
    }
</script>
<?php
$colorPicker = new \Kendo\UI\ColorPicker('ColorPicker');
$colorPicker->open('onOpen');
?>

Example - using \Kendo\JavaScriptFunction

<?php
$colorPicker = new \Kendo\UI\ColorPicker('ColorPicker');
$colorPicker->open(new \Kendo\JavaScriptFunction('function(e) { }'));
?>

palette

Defines the palettes that can be used in the color picker

Returns

\Kendo\UI\ColorPicker

Parameters

$value string

Example

<?php
$colorPicker = new \Kendo\UI\ColorPicker('ColorPicker');
$colorPicker->palette('value');
?>

preview

Displays the color preview element and the previously selected color for comparison. With buttons set to false, both elements will update at the same time.

Returns

\Kendo\UI\ColorPicker

Parameters

$value boolean

Example

<?php
$colorPicker = new \Kendo\UI\ColorPicker('ColorPicker');
$colorPicker->preview(true);
?>

rounded

Sets a value controlling the border radius.

Returns

\Kendo\UI\ColorPicker

Parameters

$value string

Example

<?php
$colorPicker = new \Kendo\UI\ColorPicker('ColorPicker');
$colorPicker->rounded('value');
?>

select

Fires as a new color is displayed in the drop-down picker. This is not necessarily the "final" value; for example this event triggers when the sliders in the HSV selector are dragged, but then pressing ESC would cancel the selection and the color will revert to the original value. For additional information check the select event documentation.

Returns

\Kendo\UI\ColorPicker

Parameters

$value string|\Kendo\JavaScriptFunction

Example - using string which defines a JavaScript function

<?php
$colorPicker = new \Kendo\UI\ColorPicker('ColorPicker');
$colorPicker->select('function(e) { }');
?>

Example - using string which defines a JavaScript name

<script>
    function onSelect(e) {
        // handle the select event.
    }
</script>
<?php
$colorPicker = new \Kendo\UI\ColorPicker('ColorPicker');
$colorPicker->select('onSelect');
?>

Example - using \Kendo\JavaScriptFunction

<?php
$colorPicker = new \Kendo\UI\ColorPicker('ColorPicker');
$colorPicker->select(new \Kendo\JavaScriptFunction('function(e) { }'));
?>

size

Sets the size of the component.

Returns

\Kendo\UI\ColorPicker

Parameters

$value string

Example

<?php
$colorPicker = new \Kendo\UI\ColorPicker('ColorPicker');
$colorPicker->size('value');
?>

tileSize

The size of a color cell.

Returns

\Kendo\UI\ColorPicker

Parameters

$value float|\Kendo\UI\ColorPickerTileSize|array

Example - using float

<?php
$colorPicker = new \Kendo\UI\ColorPicker('ColorPicker');
$colorPicker->tileSize(1);
?>

Example - using \Kendo\UI\ColorPickerTileSize

<?php
$colorPicker = new \Kendo\UI\ColorPicker('ColorPicker');
$tileSize = new \Kendo\UI\ColorPickerTileSize();
$height = 1;
$tileSize->height($height);
$colorPicker->tileSize($tileSize);
?>

Example - using array

<?php
$colorPicker = new \Kendo\UI\ColorPicker('ColorPicker');
$height = 1;
$colorPicker->tileSize(array('height' => $height));
?>

toolIcon

A CSS class name to display an icon in the color picker button. If specified, the HTML for the element will look like this:

Returns

\Kendo\UI\ColorPicker

Parameters

$value string

Example

<?php
$colorPicker = new \Kendo\UI\ColorPicker('ColorPicker');
$colorPicker->toolIcon('value');
?>

value

The initially selected color. Note that when initializing the widget from an element, the initial color will be decided by the field instead.

Returns

\Kendo\UI\ColorPicker

Parameters

$value string|

Example - using string

<?php
$colorPicker = new \Kendo\UI\ColorPicker('ColorPicker');
$colorPicker->value('value');
?>

view

Defines the initially selected view in the ColorPicker.

Returns

\Kendo\UI\ColorPicker

Parameters

$value string

Example

<?php
$colorPicker = new \Kendo\UI\ColorPicker('ColorPicker');
$colorPicker->view('value');
?>

views

The available views in the FlatColorPicker. Valid values are "gradient" and "palette".

Returns

\Kendo\UI\ColorPicker

Parameters

$value array

Example

<?php
$colorPicker = new \Kendo\UI\ColorPicker('ColorPicker');
$colorPicker->views(array());
?>
In this article
Not finding the help you need?