ColorPalette Overview

Telerik UI for ASP.NET MVC Ninja image

The ColorPalette is part of Telerik UI for ASP.NET MVC, 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.

The Telerik UI ColorPalette HtmlHelper for ASP.NET MVC is a server-side wrapper for the Kendo UI ColorPalette widget.

Initializing the ColorPalette

The following example demonstrates how to define the ColorPalette.

    @(Html.Kendo().ColorPalette()
          .Name("colorpalette") // The name of the ColorPalette is mandatory. It specifies the "id" attribute of the widget.
          .Value("#ff0000") // Set the value of the ColorPalette.
    )

Events

You can subscribe to all ColorPalette events.

Handling by Handler Name

The following example demonstrates how to subscribe to events by a handler name.

    @(Html.Kendo().ColorPalette()
        .Name("colorpalette")
        .Events(e => e
            .Change("colorpalette_change")
        )
    )
    <script>
        function colorpalette_change(e) {
            // Handle the change event.
            var colorpalette = this;
            console.log(colorpalette.value());
        }
    </script>

Handling by Template Delegate

The following example demonstrates how to subscribe to events by a template delegate.

    @(Html.Kendo().ColorPalette()
          .Name("colorpalette")
          .Events(e => e
              .Change(@<text>
                function(e) {
                    // Handle the change event inline.
                    console.log(e.sender.value());
                }
                </text>)
          )
    )

Referencing Existing Instances

To reference an existing Telerik UI ColorPalette instance, use the jQuery.data() configuration option. Once a reference is established, use the ColorPalette client-side API to control its behavior.

    // Place the following after your Telerik UI ColorPalette for ASP.NET MVC declaration.
    <script>
        $(function() {
            // The Name() of the ColorPalette is used to get its client-side instance.
            var colorpalette = $("#colorpalette").data("kendoColorPalette");
        });
    </script>

See Also

In this article