Keyboard navigation issue on Batch edit mode Grid

[Federico]

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?

[Rumen]

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

[Federico]

Excelent! Thank you Rumen. That was exactly what I was looking for.

[Lev]

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>

 

[Rumen]

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

[Lev]

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?

[Rumen]

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