RadGrid onBlur event?

[Yurii]

Is there a way to get event on client side when RadGrid lost focus? I need inform client of finishing row edit/insert action.

[Dan Lehmann]

Could try:
rgTestGrid.Attributes.Add("onblur", "alert('blur');")

For me that doesn't fire in IE but it may be something else with the grid I was testing with. If you get that to work, remember to re-add the attribute every postback.

Hope that helps,
Dan

[Yurii]

For me it does not work either.

[Vasil]

Hello Yurii,

If I understands you correctly you want to know if all the children of the grid are not in focus. The Dan's solution will work if the grid is really focused. But if an input inside the grid is in focus the grid itself is not in focus.
You could follow the Kristoffer S Hansen's solution in this forum:
http://stackoverflow.com/questions/2354881/invoke-parent-controls-event-on-childs
In your case you could attach the childFocus and childBlur handlers for focus/blur events of all elements inside the edit form of your grid and use the JavaScript below:

parentfocus;

function childFocus()
{
    parentfocus = setTimeout(gridAndHisChildrenHaveBlured,50);
}

function childBlur()
{
    clearTimeout(parentfocus);
}

function gridAndHisChildrenHaveBlured()
{
    alert("You have not saved your changes in the add/edit form yet").
}

I hope this helps.

Regards,
Vasil
the Telerik team

[J]

Sorry to necro this thread, but I'm in a similar situation.  I want to cancel all editing and de-select any rows when the grid loses focus.  I was able to do this by adding the following:

function grdAthletes_LostFocus(sender, eventArgs)
{
    $find(sAthleteGridID).get_masterTableView().fireCommand("CancelAll", ""); //Cancel any editing activities in the grid
    $find(sAthleteGridID).get_masterTableView().clearSelectedItems(); //De-select any rows
}

    protected void Page_Load(object sender, EventArgs e)
    {
    //Add event handler to detect a loss of focus on the grid
    grdAthletes.Attributes.Add("onfocusout", "grdAthletes_LostFocus()");
    grdAthletes.Attributes.Add("onblur", "grdAthletes_LostFocus()");
}

But, when I'm in Edit mode (in place editing), the event is triggered and editing is canceled.  I need to only fire the event if the grid and any child controls do not have focus.  I looked at the linked post but I didn't quite understand where to add the event handlers for the edit form controls.  Can you provide an example of how to do this?

Thanks.

[Vasil]

Hi Juan,

You can set onblur handler for your grid using onblur="yourFunction(this, event);" and then declare such function that to handle the blur. Since the events in JavaScript are bubbling up, if the inner editors does not handle them, your handler attached on the grid will be executed for them also.
Additionally you can use the document.activeElement, to find out what is the focused element at the current moment.


All the best,
Vasil
the Telerik team

[J]

I am already handling the onBlur, it detects that just fine (see code from previous post above; the 1st code block is my onBlur javascript handler, the 2nd code block is my page_load where I add the onBlur attribute).  It's ONLY when I'm in edit mode, when I tab to the next field it fires the onBlur event of the grid.  I can use document.getActiveElement in that event but that will return a TextBox or DropDownList or whatever is being used to edit, it doesn't tell me if that item is part of the grid or not.

Or am I overlooking something?

[Vasil]

Hello Juan,

If you handle the blur event of the grid, and you receive blur for html element, then this element is sure inside the grid.
If you want to check if random element is inside the grid, you can use parentNote, and then parent note of the parent note, until you hit the document or the grid. If at any step the parentNode is the grid, you know your element is inside the grid. Something like:

//element is your element
var IsInsideTheGrid = false;
while(element.parentNode)
{
    element  = element.parentNode;
    if (element.id == yourGridClientID)
    {
       IsInsideTheGrid =true;
       break;
    }
}
alert(IsInsideTheGrid );

All the best,
Vasil
the Telerik team

[J]

This approach ALMOST works but not quite.  It detects that moving from 1 field to another as being inside the grid but going from a field to a control outside of the grid doesn't fire.  Here is the code I'm using at this point:

    var sAthleteGridID = "<%=grdAthletes.ClientID %>";

    /// <summary>
    /// Checks if the currently focused item is inside the grid.
    /// </summary>
    function IsItemInsideGrid()
    {
        var ret_bIsInGrid = false;
        var objCurItem = document.activeElement;
        var sObjectChain = "";

        if (objCurItem != null) {
            sObjectChain = objCurItem.id;

            //Keep looking at the object's parent object until the grid or top-most parent is found
            while (objCurItem.parentNode)
            {
                objCurItem = objCurItem.parentNode;

                if ((objCurItem != null)  && (objCurItem.id.length > 0))
                {
                    sObjectChain += (" -> " + objCurItem.id);

                    if (objCurItem.id.indexOf(sAthleteGridID) > -1)
                    {
                        ret_bIsInGrid = true;
                        break;
                    }
                }
            }

//          if (sObjectChain.length > 0)
//              alert(sObjectChain);
        }

        if (!ret_bIsInGrid)
        {
            //If currently editing a row, commit the changes and stop the editing
            if (rowEditedItem) {
                bHasChanges = false;
                $find(sAthleteGridID).get_masterTableView().updateItem(rowEditedItem);


                $find(sAthleteGridID).get_masterTableView().fireCommand("CancelAll", ""); //Cancel any editing activities in the grid
                $find(sAthleteGridID).get_masterTableView().clearSelectedItems(); //De-select any rows
            }
        }

        return ret_bIsInGrid;
    }

    /// <summary>
    /// Handles the client side events when the athletes grid loses focus.
    /// </summary>
    function grdAthletes_LostFocus(sender, eventArgs) {
        setTimeout(IsItemInsideGrid, 50);
    }

From my code behind file:

protected void Page_Load(object sender, EventArgs e)
        {
            try
            {
            //Add event handler to detect a loss of focus on the grid
            grdAthletes.Attributes.Add("onfocusout", "grdAthletes_LostFocus()");
            grdAthletes.Attributes.Add("onblur", "grdAthletes_LostFocus()");
            }
            catch (Exception ex)
            {
                System.Diagnostics.Debug.Print("Error: " + ex.ToString());
            }
        }

 protected void grdAthletes_ItemDataBound(object sender, GridItemEventArgs e)
        {
            try
            {
                if (e.Item.IsInEditMode)
                {
                    //Add lost focus event handlers for the grid editors - seems to have no effect
                    ((GridEditableItem)e.Item).Attributes.Add("onfocusout", "grdAthletes_LostFocus()");
                    ((GridEditableItem)e.Item).Attributes.Add("onblur", "grdAthletes_LostFocus()");
}
            }
            catch (Exception ex)
            {
                System.Diagnostics.Debug.Print("Error: " + ex.ToString());
            }
        }

The only other thing I can think to try is that in the ItemDataBound event, create a loop that goes through each field, get it's control object and adds the event handler attributes to it but Control doesn't have an Attributes property to work with so I'd also have to detect what type of editor is being used for that field, cast the Control object to that type and then add the attributes to it.

OR

I would have to figure out a way to add OnFocus events to every object on the page and have it pointed to the same LostFocus javascript method.

I think with some more time I can figure out how to make that happen, but I must say that this "solution" feels very hack-ish.  I'd ask for you guys to consider adding this kind of functionality built in sometime in the future.  Being able to detect lost focus on the grid and any of its children should be a relatively simple matter and then add a new client event for OnGridLostFocus to handle it.

[Vasil]

Hi Juan,

You don't need to set blur for all inputs in the ItemDataBound event. As alternative you can use event capturing for the whole grid, and add it only once.
Check this article that elaborates the problem further:
http://www.quirksmode.org/blog/archives/2008/04/delegating_the.html

Greetings,
Vasil
the Telerik team