$99 VS $1000+. UI Control for ASP.NET AJAX(contains chart and gridview).
InputClient Side Event in ASP.NET
Home > How to > Input Client Event

With the comprehensive support of PerInput client side events, users can respond and reply to users operations without any postback, thus, users can act efficiently on PerInput control to provide better user experience.

PerInput Client Side Events Overview

Broadly speaking, KT.UI PerInput components mainly allow for following a set of client side events. We will give the simple respective introduction for each one in this section.
  • OnValueChanging: this event will fire when the input control has no focus after the user has changed its value and no new value is assigned.
  • OnValueChanged: this event will occur after a new value has been assigned when the input control has no focus.
  • OnFocus: this event will happen when the control gets focus again and is not in ReadOnly status.
  • OnBlur: this event will occur when the control loses focus and is not in ReadOnly status.
  • OnButtonClick: this event will occur when users click on the button that is associated with the input control.
  • OnKeyPress: this event will fire when users press a key to enter a value.
  • OnDisable: this event will fire when the input control is disabled.
  • OnEnable: this event will occur when the control is enabled.
  • OnError: this event will happen when users have entered an invalid value.
  • OnLoad: this event will occur when the control is loaded on the client.
  • OnMouseOver: this event will occur when users use mouse to enter value to the input area.
  • OnMouseOut: this event will fire when the mouse is not in the input area.
  • OnMoveDown: this event will occur when users decreases the value of an enumeration or numeric range mask part.
  • OnMoveUp: this event will occur when user increase the value of an enumeration or numeric range mask part.
  • OnClientPasswordStrengthCalculating: this event will fire when using the password strength check feature and changing the text, before the indicator is updated.

How to Use PerInput Client Side Events

In order to better use these PerInput client side events, we provide following complete JavaScript sample codes that can be directly called and applied within web ASP.NET application.

function ButtonClick(sender, args)
{
var textBox = sender;
var text = prompt("Type the text you want to set to the RadTextBox", "");
if (text)
textBox.set_value(text);
}
function OnDateChanged(dateInput, args)
{
if (args.get_newDate() == null && args.get_oldDate() == null)
{
logEvent(GetServerId(dateInput.get_id()) + ".OnValueChanged: no selected date ");
}
else
{
if (args.get_newDate() == null)
logEvent(GetServerId(dateInput.get_id()) + ".OnValueChanged: Previous selected date " + args.get_oldDate());
else if (args.get_oldDate() == null)
logEvent(GetServerId(dateInput.get_id()) + ".OnValueChanged: Date changed to " + args.get_newDate());
else
logEvent(GetServerId(dateInput.get_id()) + ".OnValueChanged: Date changed from " + args.get_oldDate() + " to " + args.get_newDate());
}
}

function OnClientError(sender, args)
{
logEvent(GetServerId(sender.get_id()) + ".OnClientError: Invalid character");
}

function OnClientEnumerationChanged(sender, args)
{

logEvent(GetServerId(sender.get_id()) + ".OnClientEnumerationChanged: Enumeration is changed to " + args.get_newValue());
}

function onEnumMove(sender, args)
{
logEvent(GetServerId(sender.get_id()) + ".OnClientMoveUp/Down: Enumeration is moved to " + args.get_newValue());
}

function OnClientValueChanged(sender, args)
{
logEvent(GetServerId(sender.get_id()) + ".OnClientValueChanged: Value is changed to " + args.get_newValue());
}

function SetInputValue(id1, id2)
{
var radInput = $kettic.findControl(document.forms[0], id1);
var valueTbx = $kettic.findControl(document.forms[0], id2);
radInput.set_value(valueTbx.get_value());
logEvent(id1 + " set_value(): " + valueTbx.get_value());
}

function GetInputValue(id)
{
var radInput = $kettic.findControl(document.forms[0], id);
alert(id + "value is: " + radInput.get_value())
logEvent(id + " get_value(): " + radInput.get_value());
}

function GetServerId(clientId)
{
return clientId.indexOf("_") > -1 ? clientId.replace(/.+_([a-zA-Z0-9]+)$/m, "$1") : clientId;
}

More Guides!

This page just focuses on PerInput client side events, if users want to get the manual on server side event of Input control as well as its sample ASP.NET and C# setting codes, you can link to KT.UI PerInput server side event.
ASP.NET AJAX UI Controls