ColorPicker Field Control

•  
•  
•  
•  

• sensenet.com
• Forum
• Blog
• [1]
• [2]

• 100%
• 6.3
• Enterprise
• Community
• Planned

Overview

The ColorPicker Field Control displays a color picker or a palette based on the current Color Fields configuration. The chosen color will be stored in the Color Field in hex.

Color palette

Color picker

Details

The color field's color palette and color picker is based on 'kendoui ColorPicker control'.

Supported Field types

• Color Field

Properties

• Palette (optional): Sets the display type of the color picker in Edit mode. Can Contain a list of color codes in hex. The color codes must be separated by comma. (e.g. #f0d0c9;#e2a293;#d4735e;#65281a). The default display mode of the Color Field (without adding this property) is the color picker mode.

Example:

   <sn:ColorPicker ID="ColorPicker1" runat="server" FieldName="Color" Palette="#f0d0c9;#e2a293;#d4735e;#65281a" />

For a complete list of common Field Control properties see common Field Control properties.

Templates

The ColorPicker Field Control is a simple Field Control that renders a single TextBox and a hidden field to store the palette information with some JavaScript manipulation. In Browse mode simply the value of the Field is rendered.

Browse view template

<%@  Language="C#" %>
<%# DataBinder.Eval(Container, "Data") %>

Edit view template

<%@  Language="C#" %>
<asp:TextBox ID="InnerShortText" CssClass="sn-ctrl sn-ctrl-text sn-ctrl-colorpicker" runat="server"></asp:TextBox>
<asp:HiddenField ID="paletteField" Value='<%# ((SNFields.ColorFieldSetting)((SNControls.ColorPicker)Container).Field.FieldSetting).Palette %>' runat="server" />

<script>
    $(function () {
        var colors = $('.sn-ctrl-colorpicker').next('input').val().split(';');
        $colorPicker = $(".sn-ctrl-colorpicker");
        var p = [];
        if (colors.length > 1) {
            $.each(colors, function (i, item) {
                p.push(item);
            });
            $("#colorPalette").kendoColorPalette({
                columns: 12,
                palette: p,
                change: select
            });
        }
        else {
            $colorPicker.kendoColorPicker({
                buttons: false
            });
        }
        function select(e) {
            $colorPicker.val(e.value);
        }
    });
</script>

Example/Tutorials

Simple example

   <sn:ColorPicker ID="ColorPicker1" runat="server" FieldName="Color" />

Related links

• Field Control
• Color Field