Attach the OnBlur event to NumericTextBox of GridNumericColumn

Environment

Product

RadGrid for ASP.NET AJAX

Description

How to attach the OnBlur Client-side event to the RadNumericTextBox of the Grid's built-in GridNumericColumn?

Solution

To do that, you will need to access the RadNumericTextBox of the GridNumericColumn in the ItemCreated event and set its ClientEvents.OnBlur property to the name of the JavaScript function you want it to call when it looses focus (on blur).

This approach applies to EditMode="InPlace".

Example Markup

<telerik:RadGrid ID="RadGrid1" runat="server" AutoGenerateEditColumn="true" AutoGenerateDeleteColumn="true" 
    OnItemCreated="RadGrid1_ItemCreated" OnNeedDataSource="RadGrid1_NeedDataSource">
    <MasterTableView AutoGenerateColumns="false" InsertItemPageIndexAction="ShowItemOnLastPage" EditMode="InPlace">
        <Columns>
            <telerik:GridNumericColumn UniqueName="ColumnUniqueName" DataField="ColumnUniqueName" />
        </Columns>
    </MasterTableView>
</telerik:RadGrid>

Accessing the NumericTextBox and attaching the attaching the OnBlur Client-side event to it.

protected void RadGrid1_ItemCreated(object sender, GridItemEventArgs e)
{
    if (e.Item is GridDataItem)
    {
        GridDataItem dataItem = (GridDataItem)e.Item;

        if (dataItem.IsInEditMode)
        {
            RadNumericTextBox currentLumQuantityTextBox = dataItem["ColumnUniqueName"].Controls[0] as RadNumericTextBox; // Change the ColumnUniqueName to your column's actual unique name
            currentLumQuantityTextBox.ClientEvents.OnBlur = "handleBlur";
        }
    }
}

Protected Sub RadGrid1_ItemCreated(ByVal sender As Object, ByVal e As GridItemEventArgs)
    If TypeOf e.Item Is GridDataItem Then
        Dim dataItem As GridDataItem = CType(e.Item, GridDataItem)

        If dataItem.IsInEditMode Then
            Dim currentLumQuantityTextBox As RadNumericTextBox = TryCast(dataItem("ColumnUniqueName").Controls(0), RadNumericTextBox)
            currentLumQuantityTextBox.ClientEvents.OnBlur = "handleBlur"
        End If
    End If
End Sub 

The JavaScript function that will be called upon loosing the focus (on blur)

<script>
    function handleBlur(sender, args) {
        // Execute some logic
    }
</script>