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

5 posts, 0 answers
  1. A
    A avatar
    35 posts
    Member since:
    Nov 2015

    Posted 12 Oct Link to this post

    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?

  2. Konstantin Dikov
    Admin
    Konstantin Dikov avatar
    1800 posts

    Posted 17 Oct Link to this post

    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.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. A
    A avatar
    35 posts
    Member since:
    Nov 2015

    Posted 24 Oct in reply to Konstantin Dikov Link to this post

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

  5. A
    A avatar
    35 posts
    Member since:
    Nov 2015

    Posted 24 Oct in reply to A Link to this post

    I just unsuccessfully tested your solution.

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

  6. Konstantin Dikov
    Admin
    Konstantin Dikov avatar
    1800 posts

    Posted 27 Oct Link to this post

    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.
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017