Edit this page

FlatColorPicker HtmlHelper Overview

The FlatColorPicker HtmlHelper extension is a server-side wrapper for the Kendo UI FlatColorPicker widget.

Configuration

  1. Add a FlatColorPicker.

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

Event Handling

You can subscribe to all FlatColorPicker events.

By Handler Name

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

Example
      @(Html.Kendo().FlatColorPicker()
            .Name("flatcolorpicker")
            .Events(e => e
                  .Change("flatcolorpicker_change")
            )
      )
      <script>
          function flatcolorpicker_change(e) {
              //Handle the change event.
          }
      </script>

By Template Delegate

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

Example
      @(Html.Kendo().FlatColorPicker()
            .Name("flatcolorpicker")
            .Events(e => e
                .Change(@<text>
                  function(e) {
                      //Handle the change event inline.
                  }
                  </text>)
            )
      )

Reference

Existing Instances

To reference an existing Kendo UI FlatColorPicker instance, use the jQuery.data() configuration option. Once a reference is established, use the FlatColorPicker API to control its behavior.

Example
  //Put this after your Kendo UI FlatColorPicker for ASP.NET Core declaration.
  <script>
  $(function() {
      //Notice that the Name() of the FlatColorPicker is used to get its client-side instance.
      var flatcolorpicker = $("#flatcolorpicker").data("kendoFlatColorPicker");
  });
  </script>

See Also