Overview:

This is the eight post in the series on Kendo UI wrappers for ASP.NET MVC. We will look at one more wrapper in this post namely Color Picker. This post is part of a getting started with Kendo UI wrappers for ASP.NET MVC and you can find the index post here.

What is ColorPicker Wrapper?

The ColorPicker is a drop-down widget for selecting colors. It’s designed to replace a HTML5 <input type="color"> field, which is not yet widely supported in browsers. ColorPicker widget provides a user-friendly interface for picking colors.

Fig 1: ColorPicker Widget

ColorPicker wrapper is just a kendo helper for ASP.NET MVC.

Basic Usage:

In order to use the ColorPicker widget on any page, we will use the ColorPicker wrapper or helper available as part of the kendo wrappers. Following is the code to create a color picker on any page. Note that Name() is a mandatory setting for the color picker. Without setting the name we will get an exception which will tell that name is not set.

Here is the output of the above code:

Fig 2: Color Picker Basic Usage

Color Palette:

We can customize the color palette that is displayed in the color picker drop down. The wrapper provides Palette() configuration method which accepts the palette. There 2 ways of providing the palette. They are:

1. ColorPickerPalette Enumeration:

We can pass enum called ColorPickerPalette to Palette() method of the widget. The enum supports Basic, None and WebSafe palette. Here is the code for setting the palette:

Here is the output of setting palette to Basic, WebSafe and None:

Fig 3: Basic Color Palette

Fig 4: Web Safe Palette

Fig 5: No Palette

2. Provide Palette as Array

We can pass a string array to Palette() method which should contain the hex codes of the colors we want to show in the palette. Here is the code to do this:

And here is the output of the code changes:

Fig 6: Custom Palette

Custom Color Tile Size:

So far we have seen how the color picker works and what palettes it supports. One thing to notice in palettes is the size of the individual color tiles. It looks small. What if we wanted a bigger tile? The wrapper supports a TileSize() configuration method which takes in an integer. Here is a code set the tile sizes of the color palette:

Here is the output of above code changes:

Fig 7: Custom Color Tile Size

Accessing control on client:

So far we have seen how to instantiate a control with the helpers. And since the Kendo controls are all client side, lets take a look at how to get the control using JavaScript code. Kendo controls are HTML5 compliant so we make use of HTML5 attributes like “data-“ and construct our controls. You can use the jquery data() method to get to an already instantiated control. Here is the code snippet for the same:

Accessing & Setting Value from client side:

All kendo controls have rich client side API support. One of the api method is value() which lets you read the selected value and also set new value of the color picker. Here is the code:

In the above code – we just created the color picker using the server side helpers. On client side, after document has loaded, we grab the control, use the value() method to set a new value. And then use the same method to read back the selected value.

Handling Events:

Color Picker supports four events which can be handled on the client side. They are:

• change: Fires when a color was selected
• select: Fires when a new color is displayed in the drop-down picker
• open: Fires when the picker popup is opening
• close: Fire when the picker popup is closing

Here is the code wire up the events and JavaScript code for the handlers:

Summary:

Through this post we looked at yet another kendo wrapper for MVC namely Color Picker. Using color picker is as easy as settings some configuration methods and the rest is done by the helper for you. Hope this excites you to test out Kendo UI in your projects.

Till next time, Happy Coding.