New to Telerik UI for ASP.NET MVC? Download free 30-day trial

ColorPickerBuilder

Methods

Buttons(System.Boolean)

Specifies whether the widget should display the Apply / Cancel buttons.

Parameters

value - System.Boolean

The value that configures the buttons.

Example


            @(Html.Kendo().ColorPicker()
                .Name("palette")
                .Views(new string[] { "palette"})
                .Buttons(false)
            )

ContrastTool()

Enables the contrast tool in the ColorGradient.

Example


            @(Html.Kendo().ColorPicker()
                .Name("palette")
                .Views(new string[] { "palette"})
                .ContrastTool()
            )

ContrastTool(System.Boolean)

Enables the contrast tool in the ColorGradient.

Parameters

enabled - System.Boolean

Enables or disables the contrasttool option.

Example


            @(Html.Kendo().ColorPicker()
                .Name("palette")
                .Views(new string[] { "palette"})
                .ContrastTool(false)
            )

ContrastTool(System.Action)

Enables the contrast tool in the ColorGradient.

Parameters

configurator - System.Action<ColorPickerContrastToolSettingsBuilder>

The action that configures the contrasttool.

Example


            @(Html.Kendo().ColorPicker()
                .Name("palette")
                .Views(new string[] { "palette"})
                .ContrastTool(tool=>tool
                   .BackgroundColor("#ffffff")
                )
            )

ClearButton(System.Boolean)

Specifies whether the widget should display the 'Clear color' button.

Parameters

value - System.Boolean

The value that configures the clearbutton.

Example


            @(Html.Kendo().ColorPicker()
                .Name("palette")
                .Views(new string[] { "palette"})
                .ClearButton(true)
            )

CloseOnSelect(System.Boolean)

Specifies whether selection of a color in the palette view closes the popup. Applied only when buttons are set to false and the currently selected view is palette.

Parameters

value - System.Boolean

The value that configures the closeonselect.

Example


            @(Html.Kendo().ColorPicker()
                .Name("palette")
                .Views(new string[] { "palette"})
                .CloseOnSelect(true)
            )

Columns(System.Double)

The number of columns to show in the color dropdown when a pallete is specified. This is automatically initialized for the "basic" and "websafe" palettes. If you use a custom palette then you can set this to some value that makes sense for your colors.

Parameters

value - System.Double

The value that configures the columns.

Example


            @(Html.Kendo().ColorPicker()
                .Name("palette")
                .Views(new string[] { "palette"})
                .Columns(3)
            )

Input(System.Boolean)

Whether to render the input in the ColorGradient component.

Parameters

value - System.Boolean

The value that configures the input.

Example


            @(Html.Kendo().ColorPicker()
                .Name("palette")
                .Views(new string[] { "palette"})
                .Input(true)
            )

Messages(System.Action)

Allows localization of the strings that are used in the widget.

Parameters

configurator - System.Action<ColorPickerMessagesSettingsBuilder>

The action that configures the messages.

Example


            @(Html.Kendo().ColorPicker()
                .Name("palette")
                .Views(new string[] { "palette"})
                .Messages(m => m.Apply("Update").Cancel("Discard"))
            )

Opacity(System.Boolean)

Only for the HSV selector. If true, the widget will display the opacity slider. Note that currently in HTML5 the <input type="color"> does not support opacity.

Parameters

value - System.Boolean

The value that configures the opacity.

Example


            @(Html.Kendo().ColorPicker()
                .Name("palette")
                .Views(new string[] { "palette"})
                .Opacity(true)
            )

Preview(System.Boolean)

Displays the color preview element and the previously selected color for comparison. With buttons set to false, both elements will update at the same time.

Parameters

value - System.Boolean

The value that configures the preview.

Example


            @(Html.Kendo().ColorPicker()
                .Name("palette")
                .Views(new string[] { "palette"})
                .Preview(true)
            )

ToolIcon(System.String)

A CSS class name to display an icon in the color picker button. If specified, the HTML for the element will look like this:

Parameters

value - System.String

The value that configures the toolicon.

Example


            @(Html.Kendo().ColorPicker()
                .Name("palette")
                .Views(new string[] { "palette"})
                .ToolIcon("gear")
            )

Value(System.String)

The initially selected color. Note that when initializing the widget from an <input> element, the initial color will be decided by the field instead.

Parameters

value - System.String

The value that configures the value.

Example


            @(Html.Kendo().ColorPicker()
                .Name("palette")
                .Views(new string[] { "palette"})
                .Value("#b72bba")
            )

View(Kendo.Mvc.UI.ColorPickerView)

Defines the initially selected view in the ColorPicker.

Parameters

value - ColorPickerView

The value that configures the view.

Example


            @(Html.Kendo().ColorPicker()
                .Name("palette")
                .Views(new string[] { "palette"})
                .View(ColorPickerView.Palette)
            )

Format(Kendo.Mvc.UI.ColorPickerFormat)

Defines the format of the gradient input editor

Parameters

value - ColorPickerFormat

The value that configures the format.

Example


            @(Html.Kendo().ColorPicker()
                .Name("palette")
                .Views(new string[] { "palette"})
                .Format(ColorPickerFormat.Hex)
            )

Size(Kendo.Mvc.UI.ComponentSize)

Sets the size of the component.

Parameters

value - ComponentSize

The value that configures the size.

Example


            @(Html.Kendo().ColorPicker()
                .Name("palette")
                .Views(new string[] { "palette"})
                .Size(ComponentSize.Medium)
            )

Rounded(Kendo.Mvc.UI.Rounded)

Sets a value controlling the border radius.

Parameters

value - Rounded

The value that configures the rounded.

Example


            @(Html.Kendo().ColorPicker()
                .Name("palette")
                .Views(new string[] { "palette"})
                .Rounded(Rounded.Full)
            )

FillMode(Kendo.Mvc.UI.FillMode)

Sets a value controlling how the color is applied.

Parameters

value - FillMode

The value that configures the fillmode.

Example


            @(Html.Kendo().ColorPicker()
                .Name("palette")
                .Views(new string[] { "palette"})
                .FillMode(FillMode.Solid)
            )

Events(System.Action)

Configures the client-side events.

Parameters

clientEventsAction - System.Action<ColorPickerEventBuilder>

The client events action.

Example


             @( Html.Kendo().ColorPicker()
                        .Name("ColorPicker")
                        .Events(events =>
                            events.Select("select").Change("change")
                        )
            )

Palette(System.Collections.Generic.IEnumerable)

Sets the range of colors that the user can pick from.

Parameters

palette - System.Collections.Generic.IEnumerable<String>

A list of colors.

Example


             @( Html.Kendo().ColorPicker()
                        .Name("ColorPicker")
                        .Palette(new List<string> { "#ff0000", "#00ff00", "#0000ff" })
            )

Palette(Kendo.Mvc.UI.ColorPickerPalette)

Sets the range of colors that the user can pick from.

Parameters

palette - ColorPickerPalette

One of the preset palettes of colors

Example


             @( Html.Kendo().ColorPicker()
                        .Name("ColorPicker")
                        .Palette(ColorPickerPalette.WebSafe)
            )

Enable(System.Boolean)

Enables or disables the picker.

Parameters

value - System.Boolean

Whether the picker is enabled

Example


             @( Html.Kendo().ColorPicker()
                        .Name("ColorPicker")
                        .Enable(false)
            )

TileSize(System.Int32)

Sets the size of the palette tiles

Parameters

tileSize - System.Int32

The tile size (for square tiles)

Example


             @( Html.Kendo().ColorPalette()
                        .Name("ColorPalette")
                        .TileSize(32)
            )

TileSize(System.Action)

Sets the size of the palette tiles

Parameters

sizeAction - System.Action<PaletteSizeBuilder>

The tile size (for square tiles)

Example


             @( Html.Kendo().ColorPalette()
                        .Name("ColorPalette")
                        .TileSize(s => s.Width(20).Height(10))
            )

Views(System.String[])

Sets the views of the component.

Parameters

views - System.String[]

The array value that configures the views.

Example


            @(Html.Kendo().ColorPicker()
                .Name("palette")
                .Views(new string[] { "palette"})
            )

Formats(System.String[])

Sets the available input formats in the gradient input editor.

Parameters

formats - System.String[]

Only "hex" and "rgb" are valid values.

Example


             @( Html.Kendo().ColorPicker()
                        .Name("ColorPicker")
                        .Formats(new string[]{ "rgb", "hex" })
            )

ToComponent()

Returns the internal view component.

Name(System.String)

Sets the name of the component.

Parameters

componentName - System.String

The name of the component.

Example


            @(Html.Kendo().Grid<OrderViewModel>()
               .Name("grid")
               .Columns(columns =>
               {
                   columns.Bound(p => p.OrderID).Filterable(false);
                   columns.Bound(p => p.Freight);  
               })
               .DataSource(dataSource => dataSource
                   .Ajax()
                   .PageSize(20)
                   .Read(read => read.Action("Orders_Read", "Grid"))
               )
            )

Deferred(System.Boolean)

Suppress initialization script rendering. Note that this options should be used in conjunction with Kendo.Mvc.UI.Fluent.WidgetFactory.DeferredScripts(System.Boolean)

Parameters

deferred - System.Boolean

ModelMetadata(System.Web.Mvc.ModelMetadata)

Uses the Metadata of the Model.

Parameters

modelMetadata - System.Web.Mvc.ModelMetadata

The metadata set for the Model

HtmlAttributes(System.Object)

Sets the HTML attributes.

Parameters

attributes - System.Object

The HTML attributes.

HtmlAttributes(System.Collections.Generic.IDictionary)

Parameters

attributes - System.Collections.Generic.IDictionary<String,Object>

AsChildComponent()

Render()

Renders the component.

Example


            @(@Page Inherits="System.Web.Mvc.ViewPage<IEnumerable<Product>>" )
            @( Html.Kendo().Grid(Model)
                .Name("grid")
                .DetailTemplate(product => {
                    )
                       Product Details:
                       <div>Product Name: @( product.ProductName )</div>
                       <div>Units In Stock: @( product.UnitsInStock )</div>
                    @(
                })
                .Render();
            )

ToHtmlString()

ToClientTemplate()

In this article
Not finding the help you need?