Problem with inline editing and datagrid settings

Radzen.Blazor Components
1

Hi,

I have a datagrid where it is possible to save the datagrid settings. My problem is that when the grid is empty and settings are saved, it is not possible to add a new item. Nothing happens when pressing "Add new".

The following code is a modification of Blazor DataGrid save/load settings and it shows the problem:

@using Radzen
@using RadzenBlazorDemos.Data
@using RadzenBlazorDemos.Models.Northwind
@using Microsoft.EntityFrameworkCore
@using RadzenBlazorDemos.Services
@using Microsoft.JSInterop
@using System.Text.Json

@inject IJSRuntime JSRuntime
@inject NavigationManager NavigationManager

@inherits DbContextPage

<RadzenButton Click="@(args => Settings = null)" Text="Clear saved settings" Style="margin-bottom: 16px" />
<RadzenButton ButtonStyle="ButtonStyle.Success" Icon="add_circle_outline" class="mt-2 mb-4" Text="Add New" Click="@InsertRow" Disabled=@(employeeToInsert != null) />
<RadzenButton ButtonStyle="ButtonStyle.Success" Icon="add_circle_outline" class="mt-2 mb-4" Text="Reset" Click="@Reset" />

<RadzenDataGrid @ref="employeeGrid" @bind-Settings="@Settings" AllowFiltering="true" AllowColumnPicking="true" AllowGrouping="true" AllowPaging="true" PageSize="4"
                AllowSorting="true" AllowMultiColumnSorting="true" ShowMultiColumnSortingIndex="true" 
                AllowColumnResize="true" AllowColumnReorder="true" ColumnWidth="200px" EditMode="DataGridEditMode.Single"
                FilterPopupRenderMode="PopupRenderMode.OnDemand" FilterCaseSensitivity="FilterCaseSensitivity.CaseInsensitive" Data="@employees" TItem="Employee">
    <Columns>
        <RadzenDataGridColumn TItem="Employee" Property="FirstName" Title="FirstName">
			<EditTemplate Context="employee">
                <RadzenTextBox @bind-Value="employee.FirstName" Style="width:200px; display: block" Name="ShipName" />
            </EditTemplate>
		</RadzenDataGridColumn>
    </Columns>
</RadzenDataGrid>

<EventConsole @ref=@console />

@code {
    IEnumerable<Employee> employees;
    EventConsole console;
    Employee employeeToInsert;
    RadzenDataGrid<Employee> employeeGrid;

    async Task InsertRow()
    {
        employeeToInsert = new Employee();
        await employeeGrid.InsertRow(employeeToInsert);
    }
    
	async Task Reset()
    {
        employeeToInsert = null;
		await employeeGrid.Reload();
    }
	
    protected override async Task OnInitializedAsync()
    {
        await base.OnInitializedAsync();

        employees = Enumerable.Empty<Employee>();
    }

    DataGridSettings _settings;
    public DataGridSettings Settings 
    { 
        get
        {
            return _settings;
        }
        set
        {
            if (_settings != value)
            {
                _settings = value;
                InvokeAsync(SaveStateAsync);
            }
        }
    }

    private async Task LoadStateAsync()
    {
        await Task.CompletedTask;

        var result = await JSRuntime.InvokeAsync<string>("window.localStorage.getItem", "Settings");
        if (!string.IsNullOrEmpty(result))
        {
            _settings = JsonSerializer.Deserialize<DataGridSettings>(result);
        }
    }

    private async Task SaveStateAsync()
    {
        await Task.CompletedTask;

        await JSRuntime.InvokeVoidAsync("window.localStorage.setItem", "Settings", JsonSerializer.Serialize<DataGridSettings>(Settings));
    }

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
        {
            await LoadStateAsync();
            StateHasChanged();
        }
    }
}

If you press "Clear saved settings" and then "Add new" it works. If you then press "Reset", try sorting the column and then press "Add new" nothing happens.

Why is the new item not showing in the datagrid?

Regards
Søren

2

Is there no one at all who can reproduce the problem or is it just me having the problem?

3

You can change this code to add the item in the collection and Reload() the DataGrid instead InsertRow() method.

4

Hi,

In my application I have a database so I don't want to add the element until the user presses a save button.

If I change the OnInitializedAsync method to:

    protected override async Task OnInitializedAsync()
    {
        await base.OnInitializedAsync();

        var employee = new Employee
        {
            FirstName = "Test"
        };
        employees = new List<Employee> { employee };
    }

I cannot reproduce the problem.

I guess that it might be something with sorting and an empty grid when combined with saving of datagrid settings.

5

Adding an item in the collection will not save it in your database.

6

You are right :slight_smile:

I tried adding the item to the collection and reload the grid. Now I can see the item but it is not in "edit" mode anymore.

I still don't understand why the problem only occurs when the grid has @bind-Settings="@Settings". If I remove it everything works.