[Solved] ClientSettings AllowKeyboardNavigation="true" not allowing save with EditMode=InPlace

[Chris Marisic]

I have a web form that has an overall panel that defines a default button for it to be the submit button.

I have a child panel that has a radgrid inside of it that is bound to an ObjectDataSource to enable the automatic CRUD operations the grid can manage.

I have the grid set to AllowAutomaticDeletes="true" AllowAutomaticInserts="true" AllowAutomaticUpdates="true"  along with ClientSettings AllowKeyboardNavigation="true"

This allows the keyboard navigation to work correctly that I can select and traverse rows and enable editting of an item however hitting enter while being inside one of the inplace textboxes still causes my full form to submit.

I upgraded from Q3 original release to the most recent Q3 release labeled 1314.35 however I still have this issue. Web browser is Firefox 3.6. Also when viewing the accessibility demo for the grid I cannot get the InForm mode grid to submit an update either.

[Tsvetoslav]

Hi Chris,

Our development team implemented on purpose this behavior - when you are in a input control, textarea etc. the ENTER key should not trigger an update so that the developer can have the opportunity to attach client handlers to those controls - otherwise any custom client event handling will be passed by.

In order to make the grid update on enter, you need to override the following internal method of the control:

<telerik:RadScriptBlock ID="ScriptBlock1" runat="server">

    <script type="text/javascript">
        Telerik.Web.UI.RadGrid.prototype._canHandleKeyboardAction = function(e) {
            var keyCode = e.keyCode || e.charCode;
            if ((keyCode == 32 || keyCode == 13 || keyCode == 33 || keyCode == 34) && this.ClientSettings.KeyboardNavigationSettings.EnableKeyboardShortcuts) {
                var target = Telerik.Web.UI.Grid.GetCurrentElement(e);
                var isClientSelectCheckBox = (target.tagName.toLowerCase() == "input" &&
                                      target.type.toLowerCase() == "checkbox" &&
                                     (target.id && target.id.indexOf("SelectCheckBox") != -1));

                if (keyCode == 33 || keyCode == 34) {
                    if (target.tagName.toLowerCase() == "input" || target.tagName.toLowerCase() == "textarea") {
                        return false;
                    }
                }

            }
            return true;
        }
    </script>

</telerik:RadScriptBlock>

I hope this information helps.

Best wishes,
Tsvetoslav
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.

[Chris Marisic]

I placed that javascript block on my page however it didn't work and pressing enter still caused the default button of the form to be submitted instead of the grid confirm button.

Edit: Upon further inspection Telerik.Web.UI.RadGrid.prototype._canHandleKeyboardAction = function(e) {  is throwing an exception for Telerik is not defined.

[Tsvetoslav]

Hello Chris,

Please, close the current forum discussion and leave the support communication to the formal support ticket you have opened on the same topic.

Thanks in advance. 

Regards,
Tsvetoslav
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.

[Chris Marisic]

This script will only work if there is a grid defined when this is invoked. (ie not hidden inside a panel), adding a if statement fixed everything for me.

<telerik:RadScriptBlock ID="scriptGridEnterKey" runat="server">

<script type="text/javascript">
if (Telerik.Web.UI.RadGrid != null) {
    Telerik.Web.UI.RadGrid.prototype._canHandleKeyboardAction = function(e) {
        var keyCode = e.keyCode || e.charCode;
        if ((keyCode == 32 || keyCode == 13 || keyCode == 33 || keyCode == 34) && this.ClientSettings.KeyboardNavigationSettings.EnableKeyboardShortcuts) {
            var target = Telerik.Web.UI.Grid.GetCurrentElement(e);
            var isClientSelectCheckBox = (target.tagName.toLowerCase() == "input" &&
              target.type.toLowerCase() == "checkbox" &&
             (target.id && target.id.indexOf("SelectCheckBox") != -1));

            if (keyCode == 33 || keyCode == 34) {
                if (target.tagName.toLowerCase() == "input" || target.tagName.toLowerCase() == "textarea") {
                    return false;
                }
            }

        }
        return true;
    }
}
</script>

</telerik:RadScriptBlock>