AUTHOR: Tsvetomir Milchev
DATE POSTED: November 09, 2018
When in browser mode, the GridNumericColumn looks and behaves like a standard GridBoundColumn. When in edit mode, however, it displays a RadNumericTextBox control. This column type is for numeric values. Hence, non-numeric characters are not allowed.
In case of an invalid character, there is a red exclamation mark shown for a blink of a moment. This error indication is not very talkative and does not provide a clearly stated message why the input is not accepted. Showing a tooltip describing the error would provide a better user experience.
Here is one example of using RadToolTipManager for creating a Tooltip that gives feedback about the error.
Note: The steps below are targeting the RadNumericTextBox in a GridNumericColumn but the approach is applicable for all input controls.
1. Attach the onError and onKeyPress Client-side events to the RadNumeriTextBox in the ItemDataBound event handler of the RadGrid control.
protected
void
RadGrid1_ItemDataBound(
object
sender, GridItemEventArgs e)
{
if
(e.Item.IsInEditMode)
GridEditFormItem dataItem = e.Item
as
GridEditFormItem;
RadNumericTextBox numericTextBox = dataItem[
"Freight"
].Controls[0]
RadNumericTextBox;
numericTextBox.ClientEvents.OnError =
"onError"
;
numericTextBox.ClientEvents.OnKeyPress =
"onKeyPress"
}
2. Set up the RadToolTipManager in the markup according to your needs.
<
telerik:RadToolTipManager
ID
=
"RadToolTipManager1"
runat
"server"
Position
"MiddleRight"
RelativeTo
"Element"
Animation
"Fade"
ShowEvent
"FromCode"
HideEvent
>
</
3. Create the tooltip in the onError event handler and show it.
function
onError(sender, args) {
tooltipManager = $find(
"<%= RadToolTipManager1.ClientID %>"
);
tooltip = tooltipManager.createToolTip(sender.get_element());
var
message =
'Invalid input! Use only digits!'
tooltip.set_content(message);
tooltip.show();
4. Hide the Tooltip in the OnKeyPress event handler.
onKeyPress(sender, args) {
HideTooltip();
HideTooltip() {
tip = Telerik.Web.UI.RadToolTip.getCurrent();
(tip) tip.hide();
Resources Buy Try