This is a migrated thread and some comments may be shown as answers.

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

4 Answers 221 Views
Grid
This is a migrated thread and some comments may be shown as answers.
A
Top achievements
Rank 1
A asked on 12 Oct 2016, 11:43 AM

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?

4 Answers, 1 is accepted

Sort by
0
Konstantin Dikov
Telerik team
answered on 17 Oct 2016, 08:09 AM
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
Do you need help with upgrading your ASP.NET AJAX, WPF or WinForms projects? Check the Telerik API Analyzer and share your thoughts.
0
A
Top achievements
Rank 1
answered on 24 Oct 2016, 07:23 PM

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".

0
A
Top achievements
Rank 1
answered on 24 Oct 2016, 08:02 PM

I just unsuccessfully tested your solution.

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

0
Konstantin Dikov
Telerik team
answered on 27 Oct 2016, 11:12 AM
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
Check out the new UI for ASP.NET Core, the most complete UI suite for ASP.NET Core development on the market, with 60+ tried-and-tested widgets, based on Kendo UI.
Tags
Grid
Asked by
A
Top achievements
Rank 1
Answers by
Konstantin Dikov
Telerik team
A
Top achievements
Rank 1
Share this question
or