ColorPicker Field Control

From Sense/Net Wiki
Jump to: navigation, search
  • 100%
  • 6.3
  • Enterprise
  • Community
  • Planned


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


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

Supported Field types


  • 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.


   <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.


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" />
    $(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) {
                columns: 12,
                palette: p,
                change: select
        else {
                buttons: false
        function select(e) {


Simple example

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

Related links