Hi everyone,

We have investigated this and, as I suspected, there isn't a way for the grid to both give you full control over the template, and keep handling the editor (to close and update cells) simultaneously. The solution is to use the grid state to close the edited cell. If you only enable the Navigable parameter the grid will keep listening to the Enter keypress and will update cells (and close them). With this, you can even go closer to excel-like behavior where insertions and edits happen with the enter key only.

So, the following article was updated to provide more details about this and to offer an example you can use as base: https://docs.telerik.com/blazor-ui/components/grid/editing/incell#notes

As such, I am closing this item to the "declined" state as it is up to the application to implement and not for the grid.

Regards,
Marin Bratanov
Progress Telerik

Indeed, Doug, but then it does not let you do a proper POST. The standard <select> is not tied to a model with a fixed set of values like Blazor components are, which is where some of the key differences will come from. Plain HTML elements are rather arbitrary in the way they let you do just about anything with them and every now and then you'll get some unexpected results, while with Blazor predictability and consistency is more important.

Regards,
Marin Bratanov
Progress Telerik

Hi Doug,

The default text can work with the default value of the Value type, here is its documentation where I highlighted the key points:

DefaultText - sets the hint that is shown if no other item is selected (the Value does not match any item in the data source, or is not provided at all). The item this creates has the default value for the type of the ValueField (or, thus, the Value). For example, 0 for an int, and null for an int? or string. You need to make sure that it does not match the value of an existing item in the data source. You can find examples in the Examples section in this article and in the Input Validation article.

So, this can work when the Value is null and the type is string. The default value for a string field is null, not an empty string. This is one of the reasons why I personally dislike the string.Empty "feature" so much - it acts a little bit like the default value, but it isn't. It is like the difference between a List<T> that is not initialized and a new List<T>.

The way we have implemented the DefaultText behavior achieves a few things:

• Lets us do type detection which makes it easier for you to write code.
• Facilitates validation otherwise you'd have to write a lot more code to get a default item (basically, you'd need an instance of the model that you need to maintain, and it would still be tied to one value, albeit arbitrary).
• Captures the default values which is how empty fields (those that are not initialized by your data) come up from the framework.

You can use a ComboBox with CustomText=true if you want an empty input that can take arbitrary values.

On the default select behavior - it does select the first item by default, here's a basic example - it shows how the first item is selected even though I have no even defined a value for the select, and it participates in the form with that first item value. This is why our component behaves the same way - the first item gets selected unless you tell it to select a different one.

    <form>
        <select name="testSelect">
            <option value="value1">text 1</option>
            <option value="value2">text 2</option>
            <option value="value3">text 3</option>
        </select>
        <button type="submit">submit and monitor the network request to see what the select does</button>
    </form>

Regards,
Marin Bratanov
Progress Telerik

Hello Doug,

I have added information in the editor template docs that the context is a copy of the original model (commit link for the diff).

The Save command click should not be necessary for editing, and this page can be used for Following the fix of that bug. Updating the actual grid data source is the workaround for this, as Rene suggested earlier in the thread.

The Insert operation is trickier, though - without a Save click, merely clicking the "Add" command will insert a record in the data source and it will fire the OnCreate event - and the values there will be default. Doing so would close that row for editing, however, and I do not think that would be good user experience. How would you expect that row insertion should work without a Save command click?

On a missing value and the ValueChanged event - this behavior is expected for the dropdownlist - it must always have a value (see here). Solutions for that are using its DefaultText parameter, and/or using two-way binding with the OnChang event; or using a ComboBox that allows custom text so that empty strings and nulls are valid values for it.

Regards,
Marin Bratanov
Progress Telerik

Hello Doug,

Do you store the currently edited model in the editor template (see here) and then update its value in the ValueChanged handler (see the second example here)? With custom editors closing the editor is still likely to be a problem, though, this is what this item is for.

I am attaching a short video of the expected behavior I get right now (it is at the end of this post) and here is the code I used:

<TelerikGrid Data=@MyData EditMode="@GridEditMode.Incell" Pageable="true" Height="500px" OnUpdate="@UpdateHandler">
    <GridColumns>
        <GridColumn Field=@nameof(SampleData.ID) Editable="false" Title="ID" />
        <GridColumn Field=@nameof(SampleData.Name) Title="Name" />
        <GridColumn Field=@nameof(SampleData.Role) Title="Position">
            <EditorTemplate>
                @{
                    CurrentlyEditedEmployee = context as SampleData;
                    <TelerikDropDownList Data="@Roles" 
                                         Value="CurrentlyEditedEmployee.Role" ValueChanged="@( (string v) => MyValueChangeHandler(v) )"
                                         Width="120px" PopupHeight="auto"></TelerikDropDownList>
                }
            </EditorTemplate>
        </GridColumn>
        <GridCommandColumn>
            <GridCommandButton Command="Save" Icon="save" ShowInEdit="true">Update</GridCommandButton>
            <GridCommandButton Command="Edit" Icon="edit">Edit</GridCommandButton>
        </GridCommandColumn>
    </GridColumns>
</TelerikGrid>

@code {
    public SampleData CurrentlyEditedEmployee { get; set; }

    private void MyValueChangeHandler(string theUserChoice)
    {
        CurrentlyEditedEmployee.Role = theUserChoice;
    }

    public void UpdateHandler(GridCommandEventArgs args)
    {
        SampleData item = (SampleData)args.Item;

        var index = MyData.FindIndex(i => i.ID == item.ID);
        if (index != -1)
        {
            MyData[index] = item;
        }
    }

    protected override void OnInitialized()
    {
        MyData = new List<SampleData>();

        for (int i = 0; i < 50; i++)
        {
            MyData.Add(new SampleData()
            {
                ID = i,
                Name = "name " + i,
                Role = Roles[i % Roles.Count]
            });
        }
    }

    //in a real case, keep the models in dedicated locations, this is just an easy to copy and see example
    public class SampleData
    {
        public int ID { get; set; }
        public string Name { get; set; }
        public string Role { get; set; }
    }

    public List<SampleData> MyData { get; set; }

    public static List<string> Roles = new List<string> { "Manager", "Employee", "Contractor" };
}

Regards,
Marin Bratanov
Progress Telerik

Hi René,

The OnChange event is specific to an input - it fires when the input is blurred, or when the user presses Enter in it. A dropdownlist does not have an input and cannot expose this behavior. The same goes for a checkbox. They are not free input components, they offer selection out of predefined choices, so the potential OnChange matches exactly ValueChanged.

Thus, the solution for such scenarios is to use ValueChanged and to update the model with your own code. You can either pass the context to the handler, or store the currently edited row in a "global" variable outside of the template so you can access it in the handlers.

On a side note, for checkboxes we offer styling options that you can use: https://docs.telerik.com/blazor-ui/themes/form-elements#checkboxes.

Regards,
Marin Bratanov
Progress Telerik

Thank you for sharing your solution with the community, René! Indeed, this is how this problem can be worked around.

--Marin

Hi René,

I have raised the priority of this bug and you can click the Follow button to get status change notifications.

At this point I am not certain how this would be fixed and it may be that you'd have to call methods on the grid (that would likely be exposed through this item) to update the state of the grid when custom editors are used, because the grid can't know what happens inside the editor.

Regards,
Marin Bratanov
Progress Telerik

Hello Pierre,

It seems there is an issue with custom editors (the cells don't even close when you click outside of them) and I made this public so you can Follow it at this page: https://feedback.telerik.com/blazor/1436240-grideditmode-incell-does-not-update-automatically-on-row-change-when-an-editortemplate-is-used.

Consideing your sample, you may also want to Follow this item so you can use such nested models: https://feedback.telerik.com/blazor/1432615-support-for-nested-complex-models. At the moment, you'd have to flatten them, something like:

<TelerikGrid Data=@MyData EditMode="@GridEditMode.Incell" Pageable="true" Height="500px" OnUpdate="@UpdateHandler">
    <GridColumns>
        <GridColumn Field=@nameof(SampleData.ID) Editable="false" Title="ID" />
        <GridColumn Field=@nameof(SampleData.Name) Title="Name">
            <EditorTemplate>
                @{
                    currentItem = context as SampleData;
                    <TelerikTextBox Width="100%" @bind-Value=@currentItem.Name />
                }
            </EditorTemplate>
        </GridColumn>
        <GridColumn Field=@nameof(SampleData.Ranking) Title="Ranking" Width="120px" Filterable="false">
            <EditorTemplate>
                @{
                    currentItem = context as SampleData;
                    <TelerikNumericTextBox Width="100%" Max="10" Min="0" Step="1" @bind-Value=@currentItem.Ranking />
                }
            </EditorTemplate>
        </GridColumn>
        <GridCommandColumn>
            <GridCommandButton Command="Save" Icon="save" ShowInEdit="true">Update</GridCommandButton>
            <GridCommandButton Command="Edit" Icon="edit">Edit</GridCommandButton>
        </GridCommandColumn>
    </GridColumns>
</TelerikGrid>

@code {
    public SampleData currentItem { get; set; }

    public void UpdateHandler(GridCommandEventArgs args)
    {
        SampleData item = (SampleData)args.Item;

        //perform actual data source operations here
        //if you have a context added through an @inject statement, you could call its SaveChanges() method
        //myContext.SaveChanges();

        var index = MyData.FindIndex(i => i.ID == item.ID);
        if (index != -1)
        {
            MyData[index] = item;
        }
    }

    protected override void OnInitialized()
    {
        MyData = new List<SampleData>();

        for (int i = 0; i < 50; i++)
        {
            MyData.Add(new SampleData()
            {
                ID = i,
                Name = "name " + i,
                Ranking = i % 10
            });
        }
    }

    //in a real case, keep the models in dedicated locations, this is just an easy to copy and see example
    public class SampleData
    {
        public int ID { get; set; }
        public string Name { get; set; }
        public int Ranking { get; set; }
    }

    public List<SampleData> MyData { get; set; }
}

Regards,
Marin Bratanov
Progress Telerik