ASP.NET Core ColorGradient Overview
The Telerik UI ColorGradient TagHelper and HtmlHelper for ASP.NET Core are server-side wrappers for the Kendo UI ColorGradient widget.
The ColorGradient is a component that renders a gradient color palette. It has a hue and an alpha slider and provides an input that allows you to enter a color or copy the selected one.
Telerik UI for ASP.NET Core is a
professional grade UI library with 110+ components for building modern and feature-rich applications. To try it out sign up for a free 30-day trial.
New to Telerik UI for ASP.NET Core?
Initializing the ColorGradient
The ColorGradient is usually used as a color editor. The following example demonstrates how to define the ColorGradient.
@(Html.Kendo().ColorGradient()
.Name("colorGradient") // The name of the ColorGradient is mandatory. It specifies the "id" attribute.
.Value("#ff0000")
)
<kendo-colorgradient name="colorgradient"
value="#ff0000">
</kendo-colorgradient>
Basic Configuration
The ColorGradient provides default configuration options such as input, format, opacity, and so on.
The following example shows a basic implementation of the control.
@(Html.Kendo().ColorGradient()
.Name("colorGradient")
.Input(true)
.Format(ColorGradientFormat.Hex)
.Opacity(true)
.Value("#f16e0aff")
)
<kendo-colorgradient name="colorgradient"
input="true"
format="ColorGradientFormat.Hex"
opacity="true"
value="#f16e0aff">
</kendo-colorgradient>
Functionality and Features
Events
You can subscribe to the change ColorGradient event, as is demonstrated in the following example.
@(Html.Kendo().ColorGradient()
.Name("colorGradient")
.Events(ev => ev.Change("colorgradient_change"))
)
<script>
function colorgradient_change(e) {
console.log("The newly selected color is ", e.value);
}
</script>
<kendo-colorgradient name="colorgradient" on-change="colorgradient_change">
</kendo-colorgradient>
<script>
function colorgradient_change(e) {
console.log("The newly selected color is ", e.value);
}
</script>
For a complete example, refer to the demo on using the events of the ColorGradient.
Referencing Existing Instances
To reference an existing Telerik UI ColorGradient instance, use the jQuery.data() configuration option. Once a reference is established, use the ColorGradient client-side API to control its behavior.
@(Html.Kendo().ColorGradient()
.Name("colorGradient")
)
//Get an instance of the ColorGradient by using its Name().
<script>
$(function() {
var colorGradientControl = $("#colorGradient").data("kendoColorGradient");
});
</script>
<kendo-colorgradient name="colorgradient">
</kendo-colorgradient>
//Get an instance of the ColorGradient by using its Name().
<script>
$(function() {
var colorGradientControl = $("#colorgradient").data("kendoColorGradient");
});