Inline edit row not work if class inherits other class #590

Closed
opened 2026-01-29 17:39:50 +00:00 by claunia · 1 comment
Owner

Originally created by @Sonic3R on GitHub (Oct 21, 2022).

I'm using latest version of Radzen: 4.1.12

@page "/fetchdata"
@inherits FetchDataBase
@using BlazorApp1.Shared

<PageTitle>Weather forecast</PageTitle>

<h1>Weather forecast</h1>

<p>This component demonstrates fetching data from the server.</p>

<EditForm @ref=@_editForm Model="@_selectedItem">
    <div class="row">
        <div class="col d-flex">
            <RadzenDataGrid @ref=@_grid
                            IsLoading=@_isLoading
                            Count=@_totalItems
                            Data=@_items
                            EditMode="DataGridEditMode.Single"
                            LoadData=@LoadData
                            AllowColumnResize="true"
                            AllowPaging="true"
                            PageSize=@_pageSize
                            PagerAlwaysVisible="true"
                            PagerPosition="PagerPosition.TopAndBottom"
                            PagerHorizontalAlign="HorizontalAlign.Left"
                            AllowSorting="true"
                            TItem="WeatherForecast">
                <EmptyTemplate>
                    <p class="datagrid-no-records">No matching results</p>
                </EmptyTemplate>
                <Columns>
                    <RadzenDataGridColumn TItem="WeatherForecast" Title="Sr. no" TextAlign="TextAlign.Center" Width="70px" Sortable=false>
                        <Template Context="item">
                            <RadzenLabel Text="--" />
                        </Template>
                    </RadzenDataGridColumn>
                    <RadzenDataGridColumn TItem="WeatherForecast" Property="TemperatureC" Title="Temperature" TextAlign="TextAlign.Center" Sortable=false>
                        <EditTemplate Context="item">
                            <CascadingValue Value=@_editForm.EditContext IsFixed="false">
                                <div class="cell-item">
                                    <RadzenTextBox @bind-Value="@item.Temperature" class="w-100 mb-1" />
                                </div>
                            </CascadingValue>
                        </EditTemplate>
                    </RadzenDataGridColumn>
                    <RadzenDataGridColumn TItem="WeatherForecast" Title="Action" TextAlign="TextAlign.Center" Width="100px" Sortable=false>
                        <Template Context="item">
                            <RadzenButton Icon="edit" ButtonStyle="ButtonStyle.Light" class="edit-btn" Size="ButtonSize.Medium" @onclick:stopPropagation="true" Click="@(() => EditRow(item))" />
                        </Template>
                        <EditTemplate Context="item">
                            <RadzenButton Icon="check" ButtonStyle="ButtonStyle.Success" Size="ButtonSize.Medium" Click="@(() => SaveRow(item))" />
                            <RadzenButton Icon="close" ButtonStyle="ButtonStyle.Light" Size="ButtonSize.Medium" Class="my-1 ms-1" Click="@(() => CancelEdit(item))" />
                        </EditTemplate>
                    </RadzenDataGridColumn>
                </Columns>
            </RadzenDataGrid>
        </div>
    </div>
</EditForm>

and

public class FetchDataBase : InlineComponentBase<WeatherForecast>
{
        private static readonly string[] Summaries = new[]
        {
                "Freezing", "Bracing", "Chilly", "Cool", "Mild", "Warm", "Balmy", "Hot", "Sweltering", "Scorching"
        };

        protected override WeatherForecast _selectedItem => new WeatherForecast();

        protected override Task LoadDataAsync()
        {
            _items = Enumerable.Range(1, 15).Select(index =>
            {
                var rand = Random.Shared.Next(-20, 55);

                return new WeatherForecast
                {
                    Date = DateTime.Now.AddDays(index),
                    TemperatureC = rand,
                    Temperature = rand.ToString(),
                    Summary = Summaries[Random.Shared.Next(Summaries.Length)]
                };
            }).ToList();

            return Task.CompletedTask;
        }

        protected override Task EditRow(WeatherForecast item)
        {
            _editForm.Model = item;
            return base.EditRow(item);
        }
}

and InlineComponentBase

public abstract class InlineComponentBase<TItem> : ComponentBase where TItem : class
{
        protected List<TItem> _items;
        protected EditForm _editForm;
        protected abstract TItem _selectedItem { get; }
        protected RadzenDataGrid<TItem> _grid;
        protected int _totalItems;
        protected int _page;
        protected readonly int _pageSize = 20;
        protected int _pageNumber = 1;
        protected bool _isLoading;

        protected abstract Task LoadDataAsync();

        protected virtual async Task LoadData(LoadDataArgs args)
        {
            _isLoading = true;

            try
            {
                await LoadDataAsync();
                _totalItems = _items.Count;
            }
            finally
            {
                _isLoading = false;
            }
        }

        protected virtual Task EditRow(TItem item)
        {
            return _grid.EditRow(item);
        }

        protected Task SaveRow(TItem item)
        {
            return _grid.UpdateRow(item);
        }

        protected void CancelEdit(TItem item)
        {
            _grid.CancelEditRow(item);
        }
}

The inline component abstract class I needed to re-use and force other component pages to follow structure.

I created repo here: https://github.com/Sonic3R/RadzenDataGrid to help you to reproduce issue

Repo issue:

  1. Go to Fetch data page from left navigation sidebar
  2. Click on pencil icon to get into edit mode
  3. The EditRow method is called but nothing happened

If I put all codes from InlineComponentBase into FetchDataBase class (of course, without generic using) then edit works.

Do I do something wrong or it is a bug ?

Originally created by @Sonic3R on GitHub (Oct 21, 2022). I'm using latest version of Radzen: 4.1.12 ``` @page "/fetchdata" @inherits FetchDataBase @using BlazorApp1.Shared <PageTitle>Weather forecast</PageTitle> <h1>Weather forecast</h1> <p>This component demonstrates fetching data from the server.</p> <EditForm @ref=@_editForm Model="@_selectedItem"> <div class="row"> <div class="col d-flex"> <RadzenDataGrid @ref=@_grid IsLoading=@_isLoading Count=@_totalItems Data=@_items EditMode="DataGridEditMode.Single" LoadData=@LoadData AllowColumnResize="true" AllowPaging="true" PageSize=@_pageSize PagerAlwaysVisible="true" PagerPosition="PagerPosition.TopAndBottom" PagerHorizontalAlign="HorizontalAlign.Left" AllowSorting="true" TItem="WeatherForecast"> <EmptyTemplate> <p class="datagrid-no-records">No matching results</p> </EmptyTemplate> <Columns> <RadzenDataGridColumn TItem="WeatherForecast" Title="Sr. no" TextAlign="TextAlign.Center" Width="70px" Sortable=false> <Template Context="item"> <RadzenLabel Text="--" /> </Template> </RadzenDataGridColumn> <RadzenDataGridColumn TItem="WeatherForecast" Property="TemperatureC" Title="Temperature" TextAlign="TextAlign.Center" Sortable=false> <EditTemplate Context="item"> <CascadingValue Value=@_editForm.EditContext IsFixed="false"> <div class="cell-item"> <RadzenTextBox @bind-Value="@item.Temperature" class="w-100 mb-1" /> </div> </CascadingValue> </EditTemplate> </RadzenDataGridColumn> <RadzenDataGridColumn TItem="WeatherForecast" Title="Action" TextAlign="TextAlign.Center" Width="100px" Sortable=false> <Template Context="item"> <RadzenButton Icon="edit" ButtonStyle="ButtonStyle.Light" class="edit-btn" Size="ButtonSize.Medium" @onclick:stopPropagation="true" Click="@(() => EditRow(item))" /> </Template> <EditTemplate Context="item"> <RadzenButton Icon="check" ButtonStyle="ButtonStyle.Success" Size="ButtonSize.Medium" Click="@(() => SaveRow(item))" /> <RadzenButton Icon="close" ButtonStyle="ButtonStyle.Light" Size="ButtonSize.Medium" Class="my-1 ms-1" Click="@(() => CancelEdit(item))" /> </EditTemplate> </RadzenDataGridColumn> </Columns> </RadzenDataGrid> </div> </div> </EditForm> ``` and ``` public class FetchDataBase : InlineComponentBase<WeatherForecast> { private static readonly string[] Summaries = new[] { "Freezing", "Bracing", "Chilly", "Cool", "Mild", "Warm", "Balmy", "Hot", "Sweltering", "Scorching" }; protected override WeatherForecast _selectedItem => new WeatherForecast(); protected override Task LoadDataAsync() { _items = Enumerable.Range(1, 15).Select(index => { var rand = Random.Shared.Next(-20, 55); return new WeatherForecast { Date = DateTime.Now.AddDays(index), TemperatureC = rand, Temperature = rand.ToString(), Summary = Summaries[Random.Shared.Next(Summaries.Length)] }; }).ToList(); return Task.CompletedTask; } protected override Task EditRow(WeatherForecast item) { _editForm.Model = item; return base.EditRow(item); } } ```` and InlineComponentBase ``` public abstract class InlineComponentBase<TItem> : ComponentBase where TItem : class { protected List<TItem> _items; protected EditForm _editForm; protected abstract TItem _selectedItem { get; } protected RadzenDataGrid<TItem> _grid; protected int _totalItems; protected int _page; protected readonly int _pageSize = 20; protected int _pageNumber = 1; protected bool _isLoading; protected abstract Task LoadDataAsync(); protected virtual async Task LoadData(LoadDataArgs args) { _isLoading = true; try { await LoadDataAsync(); _totalItems = _items.Count; } finally { _isLoading = false; } } protected virtual Task EditRow(TItem item) { return _grid.EditRow(item); } protected Task SaveRow(TItem item) { return _grid.UpdateRow(item); } protected void CancelEdit(TItem item) { _grid.CancelEditRow(item); } } ``` The inline component abstract class I needed to re-use and force other component pages to follow structure. I created repo here: https://github.com/Sonic3R/RadzenDataGrid to help you to reproduce issue Repo issue: 1. Go to `Fetch data` page from left navigation sidebar 2. Click on pencil icon to get into edit mode 3. The `EditRow` method is called but nothing happened If I put all codes from `InlineComponentBase` into `FetchDataBase` class (of course, without generic using) then edit works. Do I do something wrong or it is a bug ?
Author
Owner

@enchev commented on GitHub (Oct 17, 2024):

The problem here is not related to inheritance but to the fact that your DataGrid is inside EditForm - without that everything will work correctly:
image
image
image

Use our forum for such posts.

@enchev commented on GitHub (Oct 17, 2024): The problem here is not related to inheritance but to the fact that your DataGrid is inside EditForm - without that everything will work correctly: ![image](https://github.com/user-attachments/assets/bdc853fe-f656-4fd2-bc4e-1d302e921ede) ![image](https://github.com/user-attachments/assets/0bdb66ae-fefe-4b4d-8d54-61e482248dd5) ![image](https://github.com/user-attachments/assets/18bce191-2bbd-4687-ab11-1626cad92746) Use our forum for such posts.
Sign in to join this conversation.
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: starred/radzen-blazor#590