Edit this page

FlatColorPicker HtmlHelper Overview

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

Configuration

Below are listed the steps for you to follow when configuring the Kendo UI FlatColorPicker.

  1. Make sure you followed all the steps from the introductory article on Telerik UI for ASP.NET MVC.

  2. Create a new action method which renders the view.

    Example
        public ActionResult Index()
        {
            return View();
        }
    
  3. 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.
            %>
    
    
            @(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() {
              //Handle the change event.
          }
      </script>

      @(Html.Kendo().FlatColorPicker()
            .Name("flatcolorpicker")
            .Events(e => e
                  .Change("flatcolorpicker_change")
            )
      )
      <script>
          function flatcolorpicker_change() {
              //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() {
                      //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 MVC 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