messagesObject

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

Example

<input id="colorpicker" type="color" />
<script>
$("#colorpicker").kendoColorPicker({
  messages: {
    apply: "Update",
    cancel: "Discard"
  }
})
</script>

messages.applyString(default: "Apply")

Allows customization of the "Apply" button text.

Example

<input id="colorpicker" type="color" />
<script>
$("#colorpicker").kendoColorPicker({
  messages: {
    apply: "Update"
  }
})
</script>

messages.cancelString(default: "Cancel")

Allows customization of the "Cancel" button text.

Example

<input id="colorpicker" type="color" />
<script>
$("#colorpicker").kendoColorPicker({
  messages: {
    cancel: "Discard"
  }
})
</script>

messages.clearColorString(default: "Clear color")

Allows customization of the Clear Color button label.

Example

<input id="colorpicker" type="color" />
<script>
  $("#colorpicker").kendoColorPicker({
    clearButton: true,
    messages: {
      clearColor: "Remove Color"
    }
  });
</script>

messages.previewInputString

Overrides the messages.hex property. Legacy option.

Example

<input id="colorpicker" type="color" />
<script>
$("#colorpicker").kendoColorPicker({
  messages: {
    previewInput: "Edit Color"
  }
})
</script>

messages.contrastRatioString(default: "Contrast ratio")

Allows customization of the "Contrast ratio" text in the contrast tool.

Example

<input id="colorpicker" type="color" />
<script>
  $("#colorpicker").kendoColorPicker({
    contrastTool: true,
    messages: {
      contrastRatio: "Color Contrast"
    }
  });
</script>

messages.failString(default: "Fail")

Allows customization of the "Fail" text in the contrast tool.

Example

<input id="colorpicker" type="color" />
<script>
  $("#colorpicker").kendoColorPicker({
    contrastTool: true,
    messages: {
      fail: "Poor"
    }
  });
</script>

messages.passString(default: "Pass")

Allows customization of the "Pass" text in the contrast tool.

Example

<input id="colorpicker" type="color" />
<script>
  $("#colorpicker").kendoColorPicker({
    contrastTool: true,
    messages: {
      pass: "Good"
    }
  });
</script>

messages.gradientString(default: "Gradient view")

Allows customization of the Gradient view button.

Example

<input id="colorpicker" type="color" />
<script>
  $("#colorpicker").kendoColorPicker({
    views: ["gradient", "palette"],
    messages: {
      gradient: "Color Gradient"
    }
  });
</script>

messages.paletteString(default: "Palette view")

Allows customization of the Palette view button.

Example

<input id="colorpicker" type="color" />
<script>
  $("#colorpicker").kendoColorPicker({
    views: ["gradient", "palette"],
    messages: {
      palette: "Color Palette"
    }
  });
</script>

messages.toggleFormatString(default: "Toggle format")

Allows customization of the toggle format button's title in the Gradient's input editor.

Example

<input id="colorpicker" type="color" />
<script>
  $("#colorpicker").kendoColorPicker({
    messages: {
      toggleFormat: "Switch Format"
    }
  });
</script>

messages.redString(default: "Red")

Allows customization of the rgb's red input's aria-label in the Gradient's input editor.

Example

<input id="colorpicker" type="color" />
<script>
  $("#colorpicker").kendoColorPicker({
    format: "rgb",
    messages: {
      red: "Red Component"
    }
  });
</script>

messages.greenString(default: "Green")

Allows customization of the rgb's green input's aria-label in the Gradient's input editor.

Example

<input id="colorpicker" type="color" />
<script>
  $("#colorpicker").kendoColorPicker({
    format: "rgb",
    messages: {
      green: "Green Component"
    }
  });
</script>

messages.blueString(default: "Blue")

Allows customization of the rgb's blue input's aria-label in the Gradient's input editor.

Example

<input id="colorpicker" type="color" />
<script>
  $("#colorpicker").kendoColorPicker({
    format: "rgb",
    messages: {
      blue: "Blue Component"
    }
  });
</script>

messages.alphaString(default: "Alpha")

Allows customization of the rgb's alpha input's aria-label in the Gradient's input editor.

Example

<input id="colorpicker" type="color" />
<script>
  $("#colorpicker").kendoColorPicker({
    opacity: true,
    messages: {
      alpha: "Transparency"
    }
  });
</script>

messages.hexString(default: "HEX")

Allows customization of the hex input's aria-label in the Gradient's input editor.

Example

<input id="colorpicker" type="color" />
<script>
  $("#colorpicker").kendoColorPicker({
    format: "hex",
    messages: {
      hex: "Hexadecimal"
    }
  });
</script>