Keyboard navigation issue on Batch edit mode Grid

7 posts, 1 answers
  1. Federico
    Federico avatar
    3 posts
    Member since:
    Jul 2017

    Posted 27 Oct 2017 Link to this post

    Hi,

    I found the following issue navigating through cells on a batch edit mode grid: When you use the up and down keys on a numeric column, the values increases and decreases altering the values in an undesired way.

    You can reproduce this on the online demo just clicking a numeric field and pressing key up and down --> Grid Batch Editing

    Is this an expected behaviour or something that can be controlled in some way?

  2. Answer
    Rumen
    Admin
    Rumen avatar
    14437 posts

    Posted 31 Oct 2017 Link to this post

    Hello Federico,

    By default the NumericTextBox intercepts the arrow keys and increments/decrements the value. If you would like to change the behavior you can add an external grid editor and configure it to ignore the arrow keys. 

    The code-snippets below illustrate the markup for the column and the external editor.

    <telerik:GridNumericColumn DataField="Number" HeaderText="Number" UniqueName="Number" ColumnEditorID="NumericEditor">
    </telerik:GridNumericColumn>
     
    <telerik:GridNumericColumnEditor runat="server" ID="NumericEditor">
        <NumericTextBox runat="server" IncrementSettings-InterceptArrowKeys="false"></NumericTextBox>
    </telerik:GridNumericColumnEditor>


    You can find more details in the following answer.

    Regards,
    Rumen
    Progress Telerik
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  3. Federico
    Federico avatar
    3 posts
    Member since:
    Jul 2017

    Posted 31 Oct 2017 in reply to Rumen Link to this post

    Excelent! Thank you Rumen. That was exactly what I was looking for.
  4. Lev
    Lev avatar
    10 posts
    Member since:
    May 2013

    Posted 18 Mar 2019 Link to this post

    Hi. I have similar problem. When Grid in batch mode, and I click in cell, I can edit value without any problem. But than users want to press up down key to move to next cell. And this is not working. If textbox is numeric box, than value is incremented. If regular text box cursor goes either to start or end of field.

    <telerik:RadGrid ID="gvBudget" runat="server" AllowPaging="True" AllowSorting="True" AllowFilteringByColumn="True" Skin="Office2010Blue" AutoGenerateColumns="False"
        OnNeedDataSource="gvBudget_NeedDataSource" OnInsertCommand="gvBudget_InsertCommand" OnUpdateCommand="gvBudget_UpdateCommand" OnDeleteCommand="gvBudget_DeleteCommand"
        OnItemDataBound="gvBudget_ItemDataBound" OnItemCommand="gvBudget_ItemCommand" OnBatchEditCommand="gvBudget_BatchEditCommand"
        ShowGroupPanel="true" ShowFooter="true">
        <PagerStyle Mode="NextPrevAndNumeric"></PagerStyle>
        <GroupingSettings CaseSensitive="false" ShowUnGroupButton="true" />
        <ClientSettings ReorderColumnsOnClient="true" AllowDragToGroup="true">
        </ClientSettings>
        <MasterTableView DataKeyNames="ItemID" ShowFooter="false" CommandItemDisplay="Top" PageSize="20" EditMode="Batch"
            ItemStyle-HorizontalAlign="Left" AlternatingItemStyle-HorizontalAlign="Left" AllowFilteringByColumn="true"
            AllowMultiColumnSorting="true" ShowGroupFooter="true">
            <AlternatingItemStyle BackColor="AliceBlue" BorderColor="Red" />
            <BatchEditingSettings EditType="Cell"></BatchEditingSettings>
            <GroupByExpressions>
                <telerik:GridGroupByExpression>
                    <SelectFields>
                        <telerik:GridGroupByField FieldAlias="TeamName" FieldName="TeamName" />
                        <telerik:GridGroupByField FieldAlias="YearlyBudget" FieldName="MonthlyBudget" Aggregate="Sum" HeaderText="Total" FormatString="{0:C}" />
                    </SelectFields>
                    <GroupByFields>
                        <telerik:GridGroupByField FieldName="TeamName" FieldAlias="teamName" />
                    </GroupByFields>
                </telerik:GridGroupByExpression>
            </GroupByExpressions>
            <Columns>
                <telerik:GridEditCommandColumn ButtonType="ImageButton" UniqueName="editColumn"  ItemStyle-Width="30px">
                    <ItemStyle HorizontalAlign="Center" CssClass="MyImageButton" />
                </telerik:GridEditCommandColumn>
                <telerik:GridBoundColumn UniqueName="BudgetMonth" DataField="BudgetMonth" HeaderText="Month/Year" DataFormatString="{0:MMMM/yyyy}" HeaderStyle-Width="150px" GroupByExpression="BudgetYear Group By BudgetMonth" ReadOnly="true"></telerik:GridBoundColumn>
                <telerik:GridBoundColumn UniqueName="teamName" DataField="TeamName" HeaderText="Team Name" HeaderStyle-Width="200px" ReadOnly="true" SortExpression="TeamName"></telerik:GridBoundColumn>
                <telerik:GridBoundColumn UniqueName="doctorFullName" DataField="DoctorFullName" HeaderText="Provider" HeaderStyle-Width="300px" Aggregate="Count" FooterText="Total Providers: " ReadOnly="true" SortExpression="DoctorFullName"></telerik:GridBoundColumn>
                <telerik:GridBoundColumn DataField="BudgetTypeCode" UniqueName="budgetTypeCode" Display="false"></telerik:GridBoundColumn>
                <telerik:GridTemplateColumn HeaderText="Monthly Budget" HeaderStyle-Width="300px" SortExpression="MonthlyBudget" DataField="MonthlyBudget" UniqueName="budgetTemplate">
                    <ItemTemplate>
                        <asp:Label runat="server" ID="lblBudget" Text='<%#Eval("MonthlyBudget") %>'></asp:Label>
                    </ItemTemplate>
                    <EditItemTemplate>
                        <span>
                            <asp:TextBox ID="txtBudget" runat="server"></asp:TextBox>
                            <span style="color: red">
                                <asp:RequiredFieldValidator runat="server" ID="req1" ControlToValidate="txtBudget" ErrorMessage="* Required" Display="Dynamic"></asp:RequiredFieldValidator>
                            </span>
                        </span>
                    </EditItemTemplate>
                </telerik:GridTemplateColumn>
                <telerik:GridTemplateColumn UniqueName="modifiedDateTime" DataField="ModifiedDateTime" HeaderText="Modified Date" HeaderStyle-Width="300px"
                    GroupByExpression="ModifiedDateTime Group By ModifiedDateTime" SortExpression="ModifiedDateTime">
                    <ItemTemplate>
                        <%#Eval("ModifiedDateTime") %>
                    </ItemTemplate>
                </telerik:GridTemplateColumn>
                <telerik:GridTemplateColumn UniqueName="modifiedBy" DataField="ModifiedBy" HeaderText="Modified By" HeaderStyle-Width="300px" GroupByExpression="ModifiedBy Group By ModifiedBy">
                    <ItemTemplate>
                        <%#Eval("ModifiedBy") %>
                    </ItemTemplate>
                </telerik:GridTemplateColumn>
                <telerik:GridButtonColumn ConfirmText="Delete budget item?" ConfirmDialogType="RadWindow" ItemStyle-Width="30px"
                    ConfirmTitle="Delete" ButtonType="ImageButton" CommandName="Delete" Text="Delete"
                UniqueName="DeleteColumn"></telerik:GridButtonColumn>
            </Columns>
        </MasterTableView>
    </telerik:RadGrid>

     

  5. Rumen
    Admin
    Rumen avatar
    14437 posts

    Posted 21 Mar 2019 Link to this post

    Hello,

    For the NumericTextBox use the solution provided in my earlier reply.

    For the regular textboxes check how this demo is implemented https://demos.telerik.com/aspnet-ajax/grid/examples/data-editing/batch-editing/defaultcs.aspx because it behaves properly on my end, e.g.

    - I am able to go up and down using the top and bottom arrow keys
    - I can go to the next cell by pressing the Tab key and go back on the previous with Shift+Tab.

    Regards,
    Rumen
    Progress Telerik
    Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
  6. Lev
    Lev avatar
    10 posts
    Member since:
    May 2013

    Posted 21 Mar 2019 in reply to Rumen Link to this post

    It is still not working.

    I am using Telerik version 2013.2.717.45. Maybe this is the problem?

    I have sample solution that reproduce the issue. Can I send in zip file?

  7. Rumen
    Admin
    Rumen avatar
    14437 posts

    Posted 26 Mar 2019 Link to this post

    Hi Lev,

    I tested version 2013.2.717.45 and can confirm that the requested keyboard navigation is not offered by it.

    That's why my recommendation is to upgrade to the latest version 2019.1.215 which is much enhanced and also offers support for the latest browsers versions.

    Best regards,
    Rumen
    Progress Telerik
    Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Back to Top