How do I disable editing when AllowKeyboardNavigation="true"?

[A]

I'm using a RadGrid control to display reports to users.

In the course of WAI-ARIA-enabling the website I have activated keyboard navigation setting the RadGrid's AllowKeyboardNavigation property to true.

Now, when I hit [RETURN] on any row in the Grid, an in-place editor opens. I don't want this to happen.

How can I keep the RadGrid from entering edit mode thoroughly?

[Konstantin Dikov]

Hi,

This is part of the built-in keyboard navigation and I have to say that it could not be disabled. However, you can handle the keydown event of the RadGrid wrapping element and prevent the propagation of the enter key as shown below:

<script>
    function keyDown(sender, ev) {
        var grid = $find("<%=RadGrid1.ClientID%>");
        if (ev.keyCode == "13") {
            preventEvent(ev);
        }
    }

    function preventEvent(ev) {
        if (ev.preventDefault) {
            ev.preventDefault();
            ev.stopPropagation();
        }
        else {
            ev.cancelBubble = true;
            event.returnValue = false;
        }
    }
</script>

<telerik:RadGrid ID="RadGrid1" runat="server" OnNeedDataSource="RadGrid1_NeedDataSource" onkeydown="keyDown(this, event)">
    <MasterTableView EditMode="InPlace">
        <Columns>
            <telerik:GridEditCommandColumn></telerik:GridEditCommandColumn>
        </Columns>
    </MasterTableView>
    <ClientSettings AllowKeyboardNavigation="true">
        <KeyboardNavigationSettings AllowSubmitOnEnter="false" />
    </ClientSettings>
</telerik:RadGrid>

Hope this helps.


Regards,
Konstantin Dikov
Telerik by Progress

[A]

I see.

The suggested solution I feel seems rather hard-coded.

Would you suggest another Telerik control for presenting tabular data with sorting/paging, but read-only in regard to data?

Or would you, on the other hand, suggest me to create a feature request? I would suggest to amend the EditMode enumerated property by adding another value: "None".

[A]

I just unsuccessfully tested your solution.

My RadGrid is within a RadAjaxPanel. I'm wondering if the RadAjaxPanel removes the event handler when updating..?

[Konstantin Dikov]

Hi,

I have tested the approach with RadAjaxPanel wrapping the RadGrid and everything is working correctly:

<telerik:RadCodeBlock runat="server">
    <script>
        function keyDown(sender, ev) {
            var grid = $find("<%=RadGrid1.ClientID%>");
            if (ev.keyCode == "13") {
                preventEvent(ev);
            }
        }

        function preventEvent(ev) {
            if (ev.preventDefault) {
                ev.preventDefault();
                ev.stopPropagation();
            }
            else {
                ev.cancelBubble = true;
                event.returnValue = false;
            }
        }
    </script>
</telerik:RadCodeBlock>

<telerik:RadAjaxPanel runat="server">
    <telerik:RadGrid ID="RadGrid1" runat="server" OnNeedDataSource="RadGrid1_NeedDataSource" onkeydown="keyDown(this, event)"  AllowSorting="true"
        ClientSettings-Selecting-AllowRowSelect="true">
        <MasterTableView EditMode="InPlace">
            <Columns>
                <telerik:GridEditCommandColumn></telerik:GridEditCommandColumn>
            </Columns>
        </MasterTableView>
        <ClientSettings AllowKeyboardNavigation="true">
            <KeyboardNavigationSettings AllowSubmitOnEnter="false" />
        </ClientSettings>
    </telerik:RadGrid>
</telerik:RadAjaxPanel>

If the issue persists, please modify the above example, so it could replicate the problem.


Regards,
Konstantin Dikov
Telerik by Progress