ColorEditor Client Side Event in ASP.NET
In addition to various ColorEditor elements and properties settings, KT.UI for ASP.NET AJAX library still provides users with a set of client side events, which are well programmed to let users customize multiple behaviors within ASP.NET project.
In following text, we will list and demonstrate each possible client event that will fire when users run ColorEditor control in details:
- OnClientLoad: OnClientLoad event occurs after the color editor loads on the web page. This event handler will receive two parameters: the color editor instances that occurred the event and event arguments. There is no method of the parameters for this event.
- OnClientColorPreview: OnClientColorPreview client side event happens when move the mouse to hover over a color box within the color palette. This event handler receives two specific parameters: the color editor instance that occurred the event and event arguments with a certain property - that is get_color: returns the color of the color box where the mouse is hovering.
- OnClientColorChanging: OnClientColorChanging client side event fires just before the users choose a color from the color palette. It can also be cancelled by using programming code. This event handler also receives two parameters: the color editor instance that fired the event and event arguments with the following three properties:
- get_oldColor - returns the selected color from just prior to the change
- get_newColor - returns the selected color from after the change
- set_cancel(shouldCancel) - determines whether the event will be cancelled according to the boolean value passed as a parameter
- OnClientColorChange: OnClientColorChange client side event will occur when the users select a color from the color palette. This event handler receives two parameters: the color editor instance that fired the event and event arguments with the following properties - get_oldValue: returns the selected color from just prior to the change.
- OnClientPopupShow: OnClientPopUpShow client side event will only can be fired after the popup palette of a color editor with ShowIcon set to "true" shows. This event handler still receives two certain parameters: one is the color editor instance that fired the event and the other is event arguments. However, there is no method for these two parameters of this event.
Demo Codes for Client Side Events of ColorEditor
First section is the ASPX sample codes for ColorEditor client side events.
<kettic:PerColorEditor ID="PerColorEditor1" SelectedColor="Red"
runat="server" PaletteModes="all"
OnClientLoad="OnClientLoad"
OnClientColorChanging="OnClientColorChanging"
OnClientColorChange="OnClientColorChange"
OnClientColorPreview="OnClientColorPreview"
OnClientPopUpShow="OnClientPopUpShow"
ShowIcon="true">
</kettic:PerColorEditor>
Second part displays the detailed JavaScript codes for setting ColorEditor client side events.
function OnClientLoad(sender, eventArgs) {
logEvent("Color Picker is loaded. Selected color is " + sender.get_selectedColor() + ".");
}
function OnClientColorChange(sender, eventArgs) {
logEvent("Changed selected color from " + eventArgs.get_oldColor() + " to " + sender.get_selectedColor() + ".");
}
function OnClientColorPreview(sender, eventArgs) {
logEvent("Preview color " + eventArgs.get_color() + ".");
}
function OnClientColorChanging(sender, eventArgs) {
logEvent("Changing selected color from " + eventArgs.get_oldColor() + " to " + eventArgs.get_newColor() + ". Selection can be canceled here.");
}
function OnClientPopUpShow(sender, eventArgs) {
logEvent("Popup shown from PerColorEditor with ID: " + sender.get_id());
}
function logEvent(eventInfo) {
var EventLogConsole = $get("<%=EventLogConsole1.ClientID%>");
EventLogConsole.innerHTML += eventInfo + "<br/>";
}
function ClearEventLog() {
var EventLogConsole = $get("<%=EventLogConsole1.ClientID%>");
EventLogConsole.innerHTML = "";
return false;
}
| 
