Events
The ColorPicker for ASP.NET Core exposes the Change(), Select(), Open(), and the Close() events that you can use to further manipulate the component or other HTML elements as per your requirements.
For a complete example on ColorPicker events, refer to the demo on using the events of the ColorPicker.
Handling by Handler Name
The following example demonstrates how to subscribe to events by a handler name.
@(Html.Kendo().ColorPicker()
.Name("colorpicker")
.Events(e => e
.Open("colorpicker_open")
.Close("colorpicker_close")
.Select("colorpicker_select")
.Change("colorpicker_change")
)
)
<script>
// The ColorPicker instance is available as an e.sender or this.
function colorpicker_open(e) {
// Handle the open event.
}
function colorpicker_close(e) {
// Handle the close event.
}
function colorpicker_select(e) {
// Handle the select event.
}
function colorpicker_change(e) {
// Handle the change event.
}
</script>
<kendo-colorpicker name="colorpicker" on-select="colorpicker_select" on-change="colorpicker_change" on-open="colorpicker_open" on-close="colorpicker_close">
</kendo-colorpicker>
<script>
// The ColorPicker instance is available as an e.sender or this.
function colorpicker_open(e) {
// Handle the open event.
}
function colorpicker_close(e) {
// Handle the close event.
}
function colorpicker_select(e) {
// Handle the select event.
}
function colorpicker_change(e) {
// Handle the change event.
}
</script>
Handling by Template Delegate
The following example demonstrates how to subscribe to events by a template delegate.
@(Html.Kendo().ColorPicker()
.Name("colorpicker")
.Events(e => e
.Open(@<text>
function(e) {
//Handle the open event inline.
}
</text>)
.Close(@<text>
function(e) {
//Handle the close event inline.
}
</text>)
.Select(@<text>
function(e) {
//Handle the select event inline.
}
</text>)
.Change(@<text>
function(e) {
//Handle the change event inline.
}
</text>)
)
)
<kendo-colorpicker name="colorpicker"
on-select="function(){
// Handle the select event.
}"
on-change="function(){
// Handle the change event.
}"
on-open="function(){
// Handle the open event.
}"
on-close="function(){
// Handle the close event.
}">
</kendo-colorpicker>