Pop-up Modal Edit Form Isn't Very Modal

[alo]

Hello,

I'm not sure if this is intended behavior, but it appears the pop-up modal edit form isn't so modal.  When in modal mode, you can actually tab through all the page controls.  If the control is a link and you press the enter key and it will post to the link.

You can try it out on the demo site:

http://demos.telerik.com/aspnet-ajax/grid/examples/dataediting/popupeditform/defaultcs.aspx

I've attached an image of two modal windows open at the same time.

Al

[Veli]

Hi Alo,

The modal background in RadGrid only prevents mouse clicks beyond the popup edit form. It does not prevent any other interaction with the page. Have in mind that showing a modal popup when editing an item in RadGrid is not a security-critical task. A user can freely cancel the edit form. In this respect, we only want to prevent accidental clicks outside of the edit form that, if followed by a postback, would lose any changes to the data.

Veli
the Telerik team

[alo]

Would it be possible to prevent the tab from leaving the modal pop-up window?

[Veli]

Hello Alo,

Yes, you can implement this behavior using javascript. You need to capture the focus event on your page and bring the focus back to the edit form once any element beyond the edit form is focused. The tricky part is capturing the focus event, as focus does not bubble. Luckily, this quirkmode.org article helps.

function pageLoad() {
    var grid = $find("RadGrid1"); //use the ClientID of your grid component here
    if (grid._editIndexes.length) {
        var editForm = getElementsByClassName(grid.get_element(), "rgEditForm")[0];
        if (editForm) {
            attachFocus(document.body, function (e) {
                var target = e.target || e.srcElement;
                if (!$telerik.isDescendantOrSelf(editForm, target)) {
                    editForm.focus();
                }
            });

            setTimeout(function () {
                //try to focus (may fail if edit form is not visible yet
                try { editForm.focus() } catch (e) { };
            }, 100);
        }
    }
}

function attachFocus(element, func) {
    if (element.addEventListener) {
        element.addEventListener("focus", func, true); //attach in the capturing phase
    }
    else if (element.attachEvent) {
        element.attachEvent("onfocusin", func); //attach 'focusin' for IE
    }
}

function getElementsByClassName(container, className) {
    return container.getElementsByClassName ? container.getElementsByClassName(className) : /* try getElementsByClassName */
            container.querySelectorAll ? container.querySelectorAll("." + className) :       /* try querySelectorAll */
            jQuery && jQuery.jquery ? jQuery("." + className).toArray() :                    /* try jQuery selector */
            $telerik.$ ? $telerik.$("." + className).toArray() :                             /* try jQuery loaded by Telerik selector */
            (function () {                                                                   /* brute force */
                var ret = [],
                    all = container.getElementsByTagName("*");
                for (var i = 0, len = all.length; i < len; i++) {
                    if (Sys.UI.DomElement.containsCssClass(all[i], className)) {
                        ret[ret.length] = all[i];
                    }
                }

                return ret;
            })();
}

The example tries to find the first edit form (an elements with CSS class of "rgEditForm"). If it does, we register a global focus handler on the page. The handler watches for the current target of focus. If it is an element outside of the edit form, the edit form is focused back.

Veli
the Telerik team

[alo]

That's an interesting approach.  It would be nice to have this option built into the controls, but I'll see if this is something that works out.

Thanks for your great help and your suggestions.

Al