Configure Values

OpacityValue

The ColorPicker control allows you to change the opacity value by using the OpacityValue property. The selected color opacity is adjusted by using the OpacityValue.

The OpacityValue property is Number type and its default value is 100.

  1. In the CSHTML page, configure the ColorPicker widget as follows.
  • cshtml
  • /*ej-Tag Helper code to render ColorPicker*/
    
    @*In the CSHTML page, add the Html helpers to render ColorPicker widget*@
    
      <ej-color-picker id="colorPicker" value="#278787" opacity-value="40"></ej-color-picker>
  • cshtml
  • /*Razor code to render ColorPicker*/
    
        @{Html.EJ().ColorPicker("colorPicker").Value("#278787").OpacityValue(40).Render();}

    NOTE

    To render the ColorPicker Control you can use either Razor or Tag helper code as given in the above code snippet.

    The following screenshot displays the output of the above code example.

    ColorPicker with Opacity Value

    Button and TooltipText

    ButtonText

    The ColorPicker control allows you to define the text to be displayed in button elements. You can specify the text by using ButtonText property. In ColorPicker control, popup contains two button elements “Apply” and “Cancel”.

    To configure the ButtonText property for the button elements, use the corresponding default values listed in the following table.

    List of Button elements

    Element Default value
    Apply Apply
    Cancel Cancel

    TooltipText

    The ColorPicker control consists of more number of sub controls and elements. To provide some information about each element and sub control, you can use the tooltip concept and you can achieve this by using TooltipText property.

    To configure the TooltipText, use the following listed elements and its corresponding default value.

    List of Tooltip elements

    Element Default value
    Switcher Switcher
    AddButton Add Color
    Basic Basic
    MonoChrome Mono Chrome
    FlatColors Flat Colors
    SeaWolf Sea Wolf
    WebColors Web Colors
    Sandy Sandy
    PinkShades Pink Shades
    Misty Misty
    Vintage Vintage
    MoonLight Moon Light
    CandyCrush Candy Crush
    CurrentColor Current Color
    SelectedColor Selected Color
    Citrus Citrus

    When it is necessary to set the button text and TooltipText values in Spanish culture, the ColorPicker allow you to define the culture values to ButtonText and TooltipText property. The following section explains on how to define the Spanish culture values to ColorPicker control.

    1. In the CSHTML page, configure the ColorPicker widget as follows.
  • cshtml
  • /*ej-Tag Helper code to render ColorPicker*/
    
    @*In the CSHTML page, add the Html helpers to render ColorPicker widget*@
    
     <ej-color-picker id="colorPicker" value="#278787">
            <e-color-picker-button-text apply="aplicar" cancel="cancelar"/>
            <e-color-picker-tooltip-text sandy="arenoso"/>
        </ej-color-picker>
  • cshtml
  • /*Razor code to render ColorPicker*/
    
        @{Html.EJ().ColorPicker("colorPicker4").Value("#278787").ColorPickerButtonText(color => color.Apply("aplicar").Cancel("cancelar")).ColorPickerTooltipText(tooltip => tooltip.Sandy("arenoso")).Render();}

    The following screenshot displays the output of the above code example.

    ColorPicker with Culture Support