ColorGradient Overview

The Telerik UI ColorGradient HtmlHelper for ASP.NET MVC is a server-side wrapper 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 MVC Ninja image
New to Telerik UI for ASP.NET MVC?

Telerik UI for ASP.NET MVC 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.

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")
    )

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")
    )

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>

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>

See Also

In this article