Hello sharing my code based on your datagrid inline editing page.
@using RadzenBlazorDemos.Data
@using RadzenBlazorDemos.Models.Northwind
@using Microsoft.EntityFrameworkCore
@inherits DbContextPage
<style>
.rz-grid-table {
width: unset;
}
</style>
<RadzenButton ButtonStyle="ButtonStyle.Success" Icon="add_circle_outline" class="mt-2 mb-4" Text="Add New Order" Click="@InsertRow" Disabled=@(orderToInsert != null || orderToUpdate != null) />
<RadzenDataGrid @ref="ordersGrid" AllowAlternatingRows="false" AllowFiltering="true" AllowPaging="true" PageSize="5" AllowSorting="true" EditMode="DataGridEditMode.Single"
Data="@orders" TItem="Order" RowUpdate="@OnUpdateRow" RowCreate="@OnCreateRow" Sort="@Reset" Page="@Reset" Filter="@Reset" ColumnWidth="200px">
<Columns>
<RadzenDataGridColumn TItem="Order" Property="OrderID" Title="Order ID" Width="120px" Frozen="true"/>
<RadzenDataGridColumn TItem="Order" Property="Customer.CompanyName" Title="Customer" Width="280px" >
<EditTemplate Context="order">
<RadzenDropDown @bind-Value="order.CustomerID" Data="@customers" TextProperty="CompanyName" ValueProperty="CustomerID" Style="width:100%; display: block;" />
</EditTemplate>
</RadzenDataGridColumn>
<RadzenDataGridColumn TItem="Order" Property="Employee.LastName" Title="Employee" Width="220px">
<Template Context="order">
<RadzenImage Path="@order.Employee?.Photo" style="width: 32px; height: 32px; border-radius: 16px; margin-right: 6px;" />
@order.Employee?.FirstName @order.Employee?.LastName
</Template>
<EditTemplate Context="order">
<RadzenDropDown @bind-Value="order.EmployeeID" Data="@employees" ValueProperty="EmployeeID" Style="width:100%; display: block;">
<Template>
<RadzenImage Path="@context.Photo" style="width: 20px; height: 20px; border-radius: 16px; margin-right: 6px;" />
@context.FirstName @context.LastName
</Template>
</RadzenDropDown>
</EditTemplate>
</RadzenDataGridColumn>
<RadzenDataGridColumn TItem="Order" Property="Freight" Title="Freight">
<Template Context="order">
@String.Format(new System.Globalization.CultureInfo("en-US"), "{0:C}", order.Freight)
</Template>
<EditTemplate Context="order">
<RadzenNumeric Name="@order.OrderID.ToString()" TValue="decimal?" @ref="radzenNumericRef" ValueChanged="() => numericValueChanged(order)" Value="order.Freight" Style="width:100%" />
</EditTemplate>
</RadzenDataGridColumn>
<RadzenDataGridColumn TItem="Order" Context="order" Filterable="false" Sortable="false" TextAlign="TextAlign.Right" Frozen="true" FrozenPosition="FrozenColumnPosition.Right">
<Template Context="order">
<RadzenButton Icon="edit" ButtonStyle="ButtonStyle.Light" Variant="Variant.Flat" Size="ButtonSize.Medium" Click="@(args => EditRow(order))" @onclick:stopPropagation="true">
</RadzenButton>
<RadzenButton ButtonStyle="ButtonStyle.Danger" Icon="delete" Variant="Variant.Flat" Shade="Shade.Lighter" Size="ButtonSize.Medium" class="my-1 ms-1" Click="@(args => DeleteRow(order))" @onclick:stopPropagation="true">
</RadzenButton>
</Template>
<EditTemplate Context="order">
<RadzenButton Icon="check" ButtonStyle="ButtonStyle.Success" Variant="Variant.Flat" Size="ButtonSize.Medium" Click="@((args) => SaveRow(order))">
</RadzenButton>
<RadzenButton Icon="close" ButtonStyle="ButtonStyle.Light" Variant="Variant.Flat" Size="ButtonSize.Medium" class="my-1 ms-1" Click="@((args) => CancelEdit(order))">
</RadzenButton>
<RadzenButton ButtonStyle="ButtonStyle.Danger" Icon="delete" Variant="Variant.Flat" Shade="Shade.Lighter" Size="ButtonSize.Medium" class="my-1 ms-1" Click="@(args => DeleteRow(order))">
</RadzenButton>
</EditTemplate>
</RadzenDataGridColumn>
</Columns>
</RadzenDataGrid>
@code {
RadzenDataGrid<Order> ordersGrid;
IEnumerable<Order> orders;
IEnumerable<Customer> customers;
IEnumerable<Employee> employees;
List<RadzenNumeric<decimal?>> radzenNumericsRef = new();
RadzenNumeric<decimal?> radzenNumericRef
{
set
{
if (!radzenNumericsRef.Any(item => item.Name == value.Name))
{
radzenNumericsRef.Add(value);
}
}
}
Order orderToInsert;
Order orderToUpdate;
void numericValueChanged(Order order)
{
var compRef = radzenNumericsRef.FirstOrDefault(field => field.Name.Equals(order.OrderID.ToString()));
order.Freight = compRef.Value;
// Operations about this change
Console.WriteLine($"Component name: {compRef.Name} || OrderId : {order.OrderID} || ComponentValue : {compRef.Value}");
}
void Reset()
{
orderToInsert = null;
orderToUpdate = null;
}
protected override async Task OnInitializedAsync()
{
await base.OnInitializedAsync();
customers = dbContext.Customers;
employees = dbContext.Employees;
orders = dbContext.Orders.Include("Customer").Include("Employee");
}
async Task EditRow(Order order)
{
orderToUpdate = order;
await ordersGrid.EditRow(order);
}
void OnUpdateRow(Order order)
{
Reset();
dbContext.Update(order);
dbContext.SaveChanges();
}
async Task SaveRow(Order order)
{
await ordersGrid.UpdateRow(order);
}
void CancelEdit(Order order)
{
Reset();
ordersGrid.CancelEditRow(order);
var orderEntry = dbContext.Entry(order);
if (orderEntry.State == EntityState.Modified)
{
orderEntry.CurrentValues.SetValues(orderEntry.OriginalValues);
orderEntry.State = EntityState.Unchanged;
}
}
async Task DeleteRow(Order order)
{
Reset();
if (orders.Contains(order))
{
dbContext.Remove<Order>(order);
dbContext.SaveChanges();
await ordersGrid.Reload();
}
else
{
ordersGrid.CancelEditRow(order);
await ordersGrid.Reload();
}
}
async Task InsertRow()
{
orderToInsert = new Order();
await ordersGrid.InsertRow(orderToInsert);
}
void OnCreateRow(Order order)
{
dbContext.Add(order);
dbContext.SaveChanges();
orderToInsert = null;
}
}
Problem : component reference value is not changing after pagination. (Numeric field)
Scenerio : Click pen icon , change value then press ok. Click other rows pen icon for editing edit or not does not have effect the story. Go page 2 and click pen icons , change value or not does not have effect. Then turn page 1. Click pen icon previously you clicked. Try change numeric field value does not change because ref.Value is not changing.
Can you explain me why or am i missing something ? I can provide video if you does not understand the problem.