New to Telerik UI for ASP.NET Core? Download free 30-day trial

ASP.NET Core ColorPicker API

Loading Demo...

EXAMPLE

VIEW SOURCE
EDIT IN
- Telerik REPL

Also available for:

var colorPickerPrevState, colorPickerPrevPopup; window.demoComponentProperties = { sections: [ { label: 'Values', controls: [{ type: 'colorpicker', name: 'value', label: 'Value', defaultValue: '#ff0000', placeholder: '#ff0000' }, { type: 'button', label: 'Set Value', onClick: function (values) { setValue(values.value); } }, { type: 'button', label: 'Get Value', onClick: function () { alert($('#colorpicker').data('kendoColorPicker').value()); } }] }, { label: 'Enable / Disable', controls: [{ type: 'segmented', name: 'state', options: [{ value: 'enabled', label: 'Enable' }, { value: 'disabled', label: 'Disable' }], defaultValue: 'enabled' }] }, { label: 'Open / Close', controls: [{ type: 'segmented', name: 'popup', options: [{ value: 'open', label: 'Open' }, { value: 'close', label: 'Close' }], defaultValue: 'close' }] } ], onChange: function (values) { var colorpicker = $('#colorpicker').data('kendoColorPicker'); if (!colorpicker) { return; } if (values.state !== colorPickerPrevState) { colorPickerPrevState = values.state; colorpicker.enable(values.state === 'enabled'); } if (values.popup !== colorPickerPrevPopup) { colorPickerPrevPopup = values.popup; values.popup === 'open' ? colorpicker.open() : colorpicker.close(); } } }; function setValue(value) { try { $('#colorpicker').data('kendoColorPicker').value(kendo.parseColor(value)); } catch (exception) { alert('Cannot parse color: "' + value + '"'); } }

ColorPicker:

.box-col { text-align: center; } .box-col label { display: block; }

ASP.NET Core ColorPicker API

Support & Learning Resources

Additional Resources