Completed
Last Updated: 12 Oct 2022 12:59 by Javier
Release 3.5.0
René
Created on: 12 Feb 2021 10:26
Category: UI for Blazor
Type: Bug Report
14
Make TextArea accept newlines if used in EditorTemplate of GridColumn

If the TextArea component is used within an EditorTemplate of a grid column, edit mode is always closed upon hitting ENTER.  The thing is that I'm using the TextArea to allow the user to input several lines.  Upon Enter the user wants to move to a new line within the TextArea and not to finish the edit mode.

Regards,

René

---

ADMIN EDIT

For the time being I can offer using the popup editing or a custom external edit form (inline or popup).

Another workaround would be to stop the keydown event propagation so the grid/treelist cannot consume it and close the cell:

 

        <TreeListColumn Field="EmailAddress" Width="220px">
            <EditorTemplate>
                @{
                    CurrentlyEditedEmployee = context as Employee;
                    <div @onkeydown:stopPropagation="true">
                        <TelerikTextArea @bind-Value="@CurrentlyEditedEmployee.EmailAddress"></TelerikTextArea>
                    </div>
                }
            </EditorTemplate>
        </TreeListColumn>

 

It is possible that the grid might stop handling Enter when editor templates are present so you can use the events from the custom editor as desired to invoke the save operation. This could happen through the following request: https://feedback.telerik.com/blazor/1493770-ability-to-prevent-multiple-calls-of-async-updatehandler-when-pressing-enter-in-incell-edit-mode. With or without it, it is highly likely that the approach of preventing the event propagation is the correct one because the grid cannot know what the editor template contains and handle events differently based on that.

 

---

8 comments
Javier
Posted on: 12 Oct 2022 12:59

Hi Dimo,

Thanks a lot for the sample code. This definitely helps!

Regards,

Javier

ADMIN
Dimo
Posted on: 12 Oct 2022 10:26

Hello Javier,

Although the current behavior is by design and by popular demand, it is possible to save the cell on Enter inside a TextArea:

  1. Subscribe to a @keyup event inside the EditorTemplate.
  2. Check in the KeyboardEventArgs if the user has pressed Enter.
  3. Update the Grid Data and the remote data source. See the example in this InCell Editor Template section.
  4. Exit edit mode via the Grid state.
  5. Optionally, enter edit mode on the next row, again via the Grid state.
<TelerikGrid @ref="@GridRef"
             Data="@GridData"
             EditMode="@GridEditMode.Incell"
             Navigable="true"
             OnUpdate="@OnGridUpdate">
    <GridColumns>
        <GridColumn Field="@nameof(Product.Name)" Title="Product Name">
            <EditorTemplate>
                @{ var item = (Product)context; }
                <div @onkeyup="@( (KeyboardEventArgs args) => OnKeyUp(args, item) )">
                    <TelerikTextArea @bind-Value="@( item.Name )" />
                </div>
            </EditorTemplate>
        </GridColumn>
        <GridColumn Field="@nameof(Product.Stock)" Title="Units In Stock" />
    </GridColumns>
</TelerikGrid>

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

    private async Task OnKeyUp(KeyboardEventArgs args, Product item)
    {
        if (args.Key == "Enter")
        {
            item.Name = item.Name.Substring(0, item.Name.Length - 1);
            OnGridUpdate(new GridCommandEventArgs() { Field = "Name", IsCancelled = false, Item = item });

            var state = GridRef.GetState();

            var currentItemIndex = GridData.FindIndex(x => x.Id == item.Id);

            if (GridData.Count > currentItemIndex + 1)
            {
                var nextItem = GridData[currentItemIndex + 1];

                state.OriginalEditItem = nextItem;
                state.EditItem = new Product() { Id = nextItem.Id, Name = nextItem.Name, Stock = nextItem.Stock };
                state.EditField = "Name";
            }
            else
            {
                state.OriginalEditItem = null;
                state.EditItem = null;
                state.EditField = null;
            }

            await GridRef.SetState(state);
        }
    }

    private void OnGridUpdate(GridCommandEventArgs args)
    {
        var argsItem = args.Item as Product;
        var index = GridData.FindIndex(i => i.Id == argsItem.Id);
        if (index != -1)
        {
            GridData[index] = argsItem;
        }
    }

    protected override void OnInitialized()
    {
        GridData = new List<Product>();

        for (int i = 1; i <= 5; i++)
        {
            GridData.Add(new Product()
            {
                Id = i,
                Name = "Product " + i,
                Stock = 5
            });
        }
    }

    public class Product
    {
        public int Id { get; set; }
        public string Name { get; set; }
        public short Stock { get; set; }
    }
}

 

Regards,
Dimo
Progress Telerik

Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.

Javier
Posted on: 05 Oct 2022 15:56

Hi René,

This TextArea is more for really lengthy text than for a multiline input, where a TextBox won't fit. And then when the user clicks Enter, the changes are being saved and the cursor moves to the next row where they can enter something if they want (this is in Incell edit mode).

Thanks,

Javier

René
Posted on: 05 Oct 2022 15:17

Hello Javier,

why would you want the Edit mode to be closed while writing in a multiline input ?
If you only need a single line you can use a TelerikTextBox instead of the TelerikTextArea.
Then Enter should close the Edit mode.

Regards,
René

Javier
Posted on: 05 Oct 2022 14:28

Hello Marin,

I see that as of the 3.5 release, hitting Enter key in TextArea of EditorTemplate moves to a new line and doesn't close the Edit mode. Will it be possible to still have the Enter key close the Edit mode instead of creating a new line in the current version?

Thanks!

René
Posted on: 16 Feb 2021 12:45

Hello Marin,

thanks a lot for the workaround preventing the event propagation - this will help a lot !

Regards,

René

ADMIN
Marin Bratanov
Posted on: 16 Feb 2021 10:02

Hello again René,

I have updated the opener post with another workaround - preventing the event propagation:

        <TreeListColumn Field="EmailAddress" Width="220px">
            <EditorTemplate>
                @{
                    CurrentlyEditedEmployee = context as Employee;
                    <div @onkeydown:stopPropagation="true">
                        <TelerikTextArea @bind-Value="@CurrentlyEditedEmployee.EmailAddress"></TelerikTextArea>
                    </div>
                }
            </EditorTemplate>
        </TreeListColumn>

 

Regards,
Marin Bratanov
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/.

ADMIN
Marin Bratanov
Posted on: 12 Feb 2021 20:52

Hello René,

Just four days ago we were discussing the same idea. You can click the Follow button to get notified when it becomes available.

For the time being I can offer using the popup editing or a custom external edit form (inline or popup).

 

Regards,
Marin Bratanov
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/.