Completed
Last Updated: 24 Oct 2022 16:12 by ADMIN
Release 3.7.0 (09 Nov 2022)
Jeffrey
Created on: 12 Sep 2022 14:33
Category: Grid
Type: Feature Request
1
Grid In Cell edit mode: automatically add a row when hitting Enter on the last row
Subject says it all.  Unless I'm missing something, when you hit enter while in a cell and are on the last row,  it just takes the row out of edit mode.  It would be very useful to have it automatically add a new row and place the user in the new row.  To be honest, that's what all of our users are expecting to happen so they are surprised it doesn't work that way.
3 comments
ADMIN
Dimo
Posted on: 24 Oct 2022 16:12

Hello Jeffrey,

If the user hits Enter on any edited cell, the cell below it will open for editing. This is by design. You can tweak this behavior via the Grid state - see "Initiate Edit or Insert of an Item". However, the complete algorithm is a bit cumbersome, because it is unusual to cancel editing in one cell and go to another.

These are the additions you need to make to the KB code. Basically, you will:

  1. Raise a flag when adding a new row on the fly and the edit cell is not the first one. The example below uses a hard-coded field name and does not take into account column reordering.
  2. Cancel OnEdit in the last row if the flag from (1) is raised. Raise another flag in OnEdit.
  3. Use the flag from (2) in OnAfterRenderAsync to enter edit mode for the first cell in the last row.

<TelerikGrid @ref="@GridRef"
            OnEdit="@OnGridEdit" />

@code {
    private TelerikGrid<Product> GridRef { get; set; }

    private bool ShouldCancelLastRowEdit { get; set; }

    private bool ShouldEditFirstCell { get; set; }

    private async Task AppendGridRow(string editField)
    {
        // ...

        if (lastKey == "Enter" && editField != nameof(Product.Name))
        {
            ShouldCancelLastRowEdit = true;
        }
    }

    private async Task OnGridEdit(GridCommandEventArgs args)
    {
        if (ShouldCancelLastRowEdit)
        {
            ShouldCancelLastRowEdit = false;

            args.IsCancelled = true;

            ShouldEditFirstCell = true;
        }
    }

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
        {
            // ...
        }

        if (ShouldEditFirstCell)
        {
            ShouldEditFirstCell = false;

            var state = GridRef.GetState();

            Product lastItem = state.OriginalEditItem = GridData.LastOrDefault();
            state.EditField = nameof(Product.Name);
            state.EditItem = new Product() { Id = lastItem.Id }; // cloning may be more appropriate

            await GridRef.SetState(state);
        }

        await base.OnAfterRenderAsync(firstRender);
    }
}

Regards,
Dimo
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

Jeffrey
Posted on: 21 Oct 2022 17:08
Thanks Dimo.  I've implemented your code (I also added a check for NumpadEnter to accommodate the Enter key in the Numeric Keypad).  It works as described although when I add the new row, the cursor remains in the same column as the previous.  Is there a way to force focus to the first cell in the row?
ADMIN
Dimo
Posted on: 17 Oct 2022 14:12

Hello Jeffrey,

Here is an example that shows how to add new Grid rows on Enter with a few lines of JavaScript and C#.

We evaluated this request and came to the conclusion that it's not suitable for a built-in feature, due to conflicts and incompatibilities with other features. Specifically, the expected behavior can be ambiguous with virtual scrolling or paging. That's why, I hope the demonstrated routine will do the job.

Regards,
Dimo
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.