ColorEditor Color Palette| UI Control for ASP.NET AJAX, C#, VB.NET

ColorEditor Color Palette in ASP.NET AJAX

Home > How to > Color Editor Color Palette

KT.UI for ASP.NET PerColorEditor provides users with the complete and easy to integrated color palette control. With the rich support of Color Palettes, users easily customize your custom color palette, and if it is necessary for you, you can combine custom with preset palettes.

Within the color palette object programmed by using PerColorEditor for ASP.NET AJAX, users are capable of defining provided automatic color picker. When click the color pick button, it will open the full color palette and the currently selected color can be displayed. In addition to this, PerColorEditor offers available control to set "No Color" and Color Preview on the color palette. If you want to make your color palette of the color editor out of ordinary, full and simple to select skins to set the visual appearance of the color palette, and users still can use one of the predefined skins or create your own.

How to Set Color Palette of PerColorEditor Control

All in all, there are three strategies can be used to set embedded color palettes, by setting the Preset property of the PerColorEditor, by setting ColorEditorItem and by setting Preset and ColorEditorItem at the same time.

In this part, we will respectively talk about these three solutions, as well as displaying the sample ASPX codes. For C# developers and end users, please go to: set color palette of PerColorEditor with C# programming language.

How to Set Color Palette by Setting Preset

Please see following ASPX demo codes to set Color Palette element by setting Preset property within ASP.NET application.


<kettic:PerColorEditor runat="server" ID="PerColorEditor2" 
Columns="10"   Width="210" 
Preset="Metro" 
ShowRecentColors="True"  
EnableCustomColor="True"  
PaletteModes="All" >
</kettic:PerColorEditor>

Now, the palette is displayed with the color of Metro style. If we set the property of PaletteMode as All, then there will be four color palettes corresponding to these four color modes: WebPalette, RGB, HSB, and HSV. Four sample images are listed below to give users better intuitive visual effect.

/how-to/aspnet-ajax/controls-color-editor/element-color-palette1.jpg

/how-to/aspnet-ajax/controls-color-editor/element-color-palette2.jpg

/how-to/aspnet-ajax/controls-color-editor/element-color-palette3.jpg

/how-to/aspnet-ajax/controls-color-editor/element-color-palette4.jpg

How to Set Color Palette by Setting ColorEditorItem

In this section, users can get the available ASPX codes on setting PerColorEditor color palette element by defining ColorEditorItem.


<kettic:PerColorEditor runat="server" ID="PerColorEditor2" 
Columns="10"   Width="210" Preset="None" 
ShowRecentColors="True"  EnableCustomColor="True"  
PaletteModes="WebPalette"          >
<kettic:ColorEditorItem Title="Red" Value="#FF0000"></kettic:ColorEditorItem>
<kettic:ColorEditorItem Title="Orange" Value="#FF4500"></kettic:ColorEditorItem>
<kettic:ColorEditorItem Title="Yellow" Value="#FFFF00"></kettic:ColorEditorItem>
<kettic:ColorEditorItem Title="Green" Value="#008000"></kettic:ColorEditorItem>                        
<kettic:ColorEditorItem Title="Blue" Value="#0000FF"></kettic:ColorEditorItem>
<kettic:ColorEditorItem Title="Black" Value="#000000"></kettic:ColorEditorItem>
<kettic:ColorEditorItem Title="White" Value="#FFFFFF"></kettic:ColorEditorItem>            
</kettic:PerColorEditor>

Following is the demo screenshot for setting color palette with ColorEditorItem.

/how-to/aspnet-ajax/controls-color-editor/element-color-palette5.jpg

/how-to/aspnet-ajax/controls-color-editor/element-color-palette5.jpg

How to Set Color Palette by Setting Preset and ColorEditorItem

If necessary, users can set your color palette by setting both Preset property and ColorEditorItem attribute.

Check following demo ASPX codes and sample screenshot for this setting.


<kettic:PerColorEditor runat="server" ID="PerColorEditor2" 
Columns="10"   Width="210" Preset="Metro" S
howRecentColors="True"  EnableCustomColor="True"  
PaletteModes="WebPalette">
<kettic:ColorEditorItem Title="Red" Value="#FF0000"></kettic:ColorEditorItem>
<kettic:ColorEditorItem Title="Orange" Value="#FF4500"></kettic:ColorEditorItem>
<kettic:ColorEditorItem Title="Yellow" Value="#FFFF00"></kettic:ColorEditorItem>
<kettic:ColorEditorItem Title="Green" Value="#008000"></kettic:ColorEditorItem>                        
<kettic:ColorEditorItem Title="Blue" Value="#0000FF"></kettic:ColorEditorItem>
<kettic:ColorEditorItem Title="Black" Value="#000000"></kettic:ColorEditorItem>
<kettic:ColorEditorItem Title="White" Value="#FFFFFF"></kettic:ColorEditorItem>            
</kettic:PerColorEditor>

/how-to/aspnet-ajax/controls-color-editor/element-color-palette6.jpg

ASP.NET AJAX UI Controls

ASP.NET AJAX Chart UI Control ASP.NET AJAX Grid UI Control ASP.NET AJAX Barcode UI Control ASP.NET AJAX Button UI Control ASP.NET AJAX Calendar UI Control ASP.NET AJAX NavigationBar UI Control ASP.NET AJAX Captcha UI Control

ASP.NET AJAX Color Editor UI Control

Overview Getting Started

Element

Color Palette

Width and Columns Color Setting

Client Prpgramming

ColorEditor Event

Server Programming