ColorPicker - Localization

Pick Color(Current Color is blank)

Demo Configurator

Choose language



Isolate this demo as a stand-alone application
  • About this demo
  • C#
  • VB

RadColorPicker provides a mechanism for quick and easy localization, based on the native ASP.NET 2.0 localization. All tab and button labels are obtained from the resource files located in the WebSite's App_GlobalResources directory, so that the language of the ColorPicker is automatically switched to the culture and UI culture of the Web page. The example uses the approach described in this Microsoft help article to programmatically change the culture and UI culture of an ASP.NET Web page.

Each of the localization strings can be modified at runtime using the Localization property. This saves the need to create a new localization file to change a single string.

  • DefaultCS.aspx
  • DefaultCS.aspx.cs
  • scripts.js
  • styles.css
<%@ Page Language="c#" AutoEventWireup="true" Inherits="Telerik.Web.Examples.ColorPicker.Localization.DefaultCS"CodeFile="DefaultCS.aspx.cs"  %>

<%@ Register TagPrefix="qsf" Namespace="Telerik.QuickStart" %>
<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns='http://www.w3.org/1999/xhtml'>
<head runat="server">
    <title>Telerik ASP.NET Example</title>
    <link href="styles.css" rel="stylesheet" />
    <script src="scripts.js"></script>
</head>
<body>
    <form id="form1" runat="server">
    <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
    <telerik:RadSkinManager ID="RadSkinManager1" runat="server" ShowChooser="true" />
    <div class="demo-containers">
        <div class="demo-container">
            <div class="inner-demo-container">
                <telerik:RadColorPicker RenderMode="Lightweight" runat="server" ID="RadColorPicker1" PaletteModes="All">
                    <Localization ApplyButtonText="<%$ Resources:RadColorPicker, ApplyButtonText %>"
                        CurrentColorText="<%$ Resources:RadColorPicker, CurrentColorText %>" HSBTabText="<%$ Resources:RadColorPicker, HSBTabText %>"
                        HSVTabText="<%$ Resources:RadColorPicker, HSVTabText %>" NoColorText="<%$ Resources:RadColorPicker, NoColorText %>"
                        PickColorText="<%$ Resources:RadColorPicker, PickColorText %>" RGBSlidersTabText="<%$ Resources:RadColorPicker, RGBSlidersTabText %>"
                        WebPaletteTabText="<%$ Resources:RadColorPicker, WebPaletteTabText %>" BlankColorText="<%$ Resources:RadColorPicker, BlankColorText %>"
                        HSBSliderDragText="<%$ Resources:RadColorPicker, HSBSliderDragText %>" HSVSliderDragText="<%$ Resources:RadColorPicker, HSVSliderDragText %>"
                        RGBSlidersDecreaseText="<%$ Resources:RadColorPicker, RGBSlidersDecreaseText %>"
                        RGBSlidersDragText="<%$ Resources:RadColorPicker, RGBSlidersDragText %>" RGBSlidersIncreaseText="<%$ Resources:RadColorPicker, RGBSlidersIncreaseText %>"></Localization>
                </telerik:RadColorPicker>
            </div>
            <div class="inner-demo-container">
                <telerik:RadColorPicker RenderMode="Lightweight" runat="server" ID="RadColorPicker2" PaletteModes="All" ShowIcon="true">
                    <Localization ApplyButtonText="<%$ Resources:RadColorPicker, ApplyButtonText %>"
                        CurrentColorText="<%$ Resources:RadColorPicker, CurrentColorText %>" HSBTabText="<%$ Resources:RadColorPicker, HSBTabText %>"
                        HSVTabText="<%$ Resources:RadColorPicker, HSVTabText %>" NoColorText="<%$ Resources:RadColorPicker, NoColorText %>"
                        PickColorText="<%$ Resources:RadColorPicker, PickColorText %>" RGBSlidersTabText="<%$ Resources:RadColorPicker, RGBSlidersTabText %>"
                        WebPaletteTabText="<%$ Resources:RadColorPicker, WebPaletteTabText %>" BlankColorText="<%$ Resources:RadColorPicker, BlankColorText %>"
                        HSBSliderDragText="<%$ Resources:RadColorPicker, HSBSliderDragText %>" HSVSliderDragText="<%$ Resources:RadColorPicker, HSVSliderDragText %>"
                        RGBSlidersDecreaseText="<%$ Resources:RadColorPicker, RGBSlidersDecreaseText %>"
                        RGBSlidersDragText="<%$ Resources:RadColorPicker, RGBSlidersDragText %>" RGBSlidersIncreaseText="<%$ Resources:RadColorPicker, RGBSlidersIncreaseText %>"></Localization>
                </telerik:RadColorPicker>
            </div>
        </div>
    </div>

    <telerik:RadAjaxManager ID="ajaxManager" runat="server">
        <AjaxSettings>
            <telerik:AjaxSetting AjaxControlID="rblLanguages">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="RadColorPicker1"></telerik:AjaxUpdatedControl>
                    <telerik:AjaxUpdatedControl ControlID="RadColorPicker2"></telerik:AjaxUpdatedControl>
                </UpdatedControls>
            </telerik:AjaxSetting>
        </AjaxSettings>
    </telerik:RadAjaxManager>
    <qsf:ConfiguratorPanel runat="server">
        <Views>
            <qsf:View>
                <qsf:RadioButtonList ID="rblLanguages" runat="server" Orientation="Horizontal"
                    AutoPostBack="True" Label="Choose language">
                    <asp:ListItem Value="de-DE">Deutsch</asp:ListItem>
                    <asp:ListItem Value="en-US">English</asp:ListItem>
                    <asp:ListItem Value="fr-FR">Francais</asp:ListItem>
                </qsf:RadioButtonList>
                <input type="hidden" name="cultureRadioList" value="<%= rblLanguages.UniqueID %>" />
            </qsf:View>
        </Views>
    </qsf:ConfiguratorPanel>



    </form>
</body>
</html>

Find Assistance

Help Us Improve

Was this example helpful?