Hello,
Uzing RadzenDataGrid and decided to use InLineEdit functionality. I have implemented the way it was showed in this example Blazor DataGrid Component - InLine Editing | Free UI Components by Radzen .
my edit buttons defined like this:
<RadzenDataGridColumn TItem="BroadbandPriceModel" Context="data" Filterable="false" Sortable="false" TextAlign="TextAlign.Right" Frozen="true">
<Template Context="data">
<RadzenButton Icon="edit" ButtonStyle="ButtonStyle.Light" Variant="Variant.Flat" Size="ButtonSize.Medium" Click="@(async(args )=> await EditRowAsync(data))" @onclick="@(async(args )=> await EditRowAsync(data))">
</RadzenButton>
<RadzenButton ButtonStyle="ButtonStyle.Danger" Icon="delete" Variant="Variant.Flat" Shade="Shade.Lighter" Size="ButtonSize.Medium" class="my-1 ms-1" Click="@(args => DeleteRowAsync(data))" @onclick:stopPropagation="true">
</RadzenButton>
</Template>
<EditTemplate Context="data">
<RadzenButton Icon="check" ButtonStyle="ButtonStyle.Success" Variant="Variant.Flat" Size="ButtonSize.Medium" Click="@((args) => SaveRowAsync(data))">
</RadzenButton>
<RadzenButton Icon="close" ButtonStyle="ButtonStyle.Light" Variant="Variant.Flat" Size="ButtonSize.Medium" class="my-1 ms-1" Click="@((args) => CancelEdit(data))">
</RadzenButton>
<RadzenButton ButtonStyle="ButtonStyle.Danger" Icon="delete" Variant="Variant.Flat" Shade="Shade.Lighter" Size="ButtonSize.Medium" class="my-1 ms-1" Click="@(args => DeleteRowAsync(data))">
</RadzenButton>
</EditTemplate>
</RadzenDataGridColumn>
Hi @jonuskaignas
<RadzenButton Icon="edit" ButtonStyle="ButtonStyle.Light" Variant="Variant.Flat" Size="ButtonSize.Medium" Click="@(async(args )=> await EditRowAsync(data))" @onclick="@(async(args )=> await EditRowAsync(data))">
Shouldn't the @onclick event be @onclick:stopPropagation="true" the same as your 'delete' button?
Paul
Hi @Paul_Ruston ,
I just copied wrong version, I had @onclick:stopPropagation="true" as well- same result. This is not a reason for the bug.
Here is what I do have now:
<RadzenDataGridColumn TItem="BroadbandPriceModel" Context="data" Filterable="false" Sortable="false" TextAlign="TextAlign.Right" Frozen="true">
<Template Context="data">
<RadzenButton Icon="edit" ButtonStyle="ButtonStyle.Light" Variant="Variant.Flat" Size="ButtonSize.Medium" Click="@(async()=> await EditRowAsync(data))" @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="@(async()=> await DeleteRowAsync(data))" @onclick:stopPropagation="true">
</RadzenButton>
</Template>
<EditTemplate Context="data">
<RadzenButton Icon="check" ButtonStyle="ButtonStyle.Success" Variant="Variant.Flat" Size="ButtonSize.Medium" Click="@(async()=> await SaveRowAsync(data))">
</RadzenButton>
<RadzenButton Icon="close" ButtonStyle="ButtonStyle.Light" Variant="Variant.Flat" Size="ButtonSize.Medium" class="my-1 ms-1" Click="@((args) => CancelEdit(data))">
</RadzenButton>
<RadzenButton ButtonStyle="ButtonStyle.Danger" Icon="delete" Variant="Variant.Flat" Shade="Shade.Lighter" Size="ButtonSize.Medium" class="my-1 ms-1" Click="@(async()=> await DeleteRowAsync(data))">
</RadzenButton>
</EditTemplate>
</RadzenDataGridColumn>
Also, thought that it might be an issue that I have razor page and all the logic with methods in inherited razor.cs file. Tried to move everything to one file-same issue.
Catching this method, but
await BroadbandPricesGrid.EditRow(ModelToUpdate); does not trigger anything, I cannot edit any data in it...
Does anyone faced something similar?
The provided code isn't complete - paste the complete RadzenDataGrid configuration.
<RadzenDataGrid @ref="BroadbandPricesGrid" AllowAlternatingRows="false"
AllowFiltering="true" AllowSorting="true" FilterMode="FilterMode.Simple" FilterCaseSensitivity="FilterCaseSensitivity.CaseInsensitive"
EditMode="DataGridEditMode.Single" Data="@FilteredPrices" TItem="BroadbandPriceModel" RowUpdate="@OnUpdateRow">
<Columns>
<RadzenDataGridColumn TItem="BroadbandPriceModel" Property="ProviderCode" Title="Kod" />
<RadzenDataGridColumn TItem="BroadbandPriceModel" Property="ProviderName" Title="Leverantör" Width="110px" />
<RadzenDataGridColumn TItem="BroadbandPriceModel" Property="SubscriptionPeriod" Title="Period" />
<RadzenDataGridColumn TItem="BroadbandPriceModel" Property="SubscriptionName" Title="Abonnemang" Width="100px" />
<RadzenDataGridColumn TItem="BroadbandPriceModel" Property="Carrier" Title="Typ" />
<RadzenDataGridColumn TItem="BroadbandPriceModel" Property="OneTimeFee" Title="Engångsavgift">
<EditTemplate Context="data">
<RadzenNumeric @bind-Value="data.OneTimeFee" Style="width:100%" />
</EditTemplate>
</RadzenDataGridColumn>
<RadzenDataGridColumn TItem="BroadbandPriceModel" Property="MonthlyFee" Title="Pris">
<EditTemplate Context="data">
<RadzenNumeric @bind-Value="data.MonthlyFee" Style="width:100%" />
</EditTemplate>
</RadzenDataGridColumn>
<RadzenDataGridColumn TItem="BroadbandPriceModel" Title="FastIP" Filterable="false">
<Template Context="data">
@(data.PublicIp ? "Ja" : "Nej")
</Template>
</RadzenDataGridColumn>
<RadzenDataGridColumn TItem="BroadbandPriceModel" Property="PublicIpFee" Title="FastIP Pris" />
<RadzenDataGridColumn TItem="BroadbandPriceModel" Property="SLA" Title="SLA" Filterable="false">
<Template Context="data">
@(data.SLA ? "Ja" : "Nej")
</Template>
</RadzenDataGridColumn>
<RadzenDataGridColumn TItem="BroadbandPriceModel" Property="Backup4G" Title="4G Backup" Filterable="false">
<Template Context="data">
@(data.Backup4G ? "Ja" : "Nej")
</Template>
</RadzenDataGridColumn>
<RadzenDataGridColumn TItem="BroadbandPriceModel" Context="data" Filterable="false" Sortable="false" TextAlign="TextAlign.Right" Frozen="true" FrozenPosition="FrozenColumnPosition.Right">
<Template Context="data">
<RadzenButton Icon="edit" Variant="Variant.Flat" Size="ButtonSize.Medium" Click="@(args => EditRowAsync(data))" @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="@(async()=> await DeleteRowAsync(data))" @onclick:stopPropagation="true">
</RadzenButton>
</Template>
<EditTemplate Context="data">
<RadzenButton Icon="check" ButtonStyle="ButtonStyle.Success" Variant="Variant.Flat" Size="ButtonSize.Medium" Click="@(async()=> await SaveRowAsync(data))">
</RadzenButton>
<RadzenButton Icon="close" ButtonStyle="ButtonStyle.Light" Variant="Variant.Flat" Size="ButtonSize.Medium" class="my-1 ms-1" Click="@((args) => CancelEdit(data))">
</RadzenButton>
<RadzenButton ButtonStyle="ButtonStyle.Danger" Icon="delete" Variant="Variant.Flat" Shade="Shade.Lighter" Size="ButtonSize.Medium" class="my-1 ms-1" Click="@(async()=> await DeleteRowAsync(data))">
</RadzenButton>
</EditTemplate>
</RadzenDataGridColumn>
</Columns>
</RadzenDataGrid>
The code looks correct. I am afraid I don't know why it doesn't enter in edit mode. By the way what is FilteredPrices? Maybe it changes every time and resets the state.
List of price models. Tried to replace FilteredPrices to Prices, same situation
protected List<BroadbandPriceModel> Prices => Providers
.SelectMany(p => p.Subscriptions.Where(s => s.Product == Product && s.Active)
.Select(s => new BroadbandPriceModel
{
ProviderCode = p.Code,
ProviderName = p.Name,
SubscriptionPeriod = s.SubscriptionPeriod.GetDisplayName(),
SubscriptionName = s.Speed.Name,
Carrier = s.Carrier.GetDisplayName(),
OneTimeFee = s.OneTimeFee.GetValueOrDefault(),
MonthlyFee = s.MonthlyFee,
PublicIp = p.Services.PublicIp > 0,
PublicIpFee = p.Services.PublicIpFee.ToString(),
SLA = p.Services.SLA,
Backup4G = p.Services.Backup4G
}))
.OrderBy(p => p.ProviderName)
.ThenBy(p => p.SubscriptionPeriod)
.ThenBy(p => p.MonthlyFee)
.ToList();
protected List<BroadbandPriceModel> FilteredPrices => Prices
.Where(p => string.IsNullOrEmpty(SearchTerm) || p.ProviderName.ToLower().Contains(SearchTerm) || p.SubscriptionName.ToLower().Contains(SearchTerm))
.ToList();
korchev
January 9, 2024, 12:29pm
10
Then I am out of ideas. Perhaps you can attach the source code of Radzen.Blazor to your project and see what happens in the EditRow method.
I had the same problem and wanted to let you know what my problem was...
Looking at the Radzen source code, they add the edit context only if the item 'Equals' the row item:
if (editContexts.Keys.Any(i => ItemEquals(i, context)))
{
b.AddAttribute(10, nameof(RadzenDataGridRow<TItem>.EditContext), editContexts[context]);
}
By overriding Equals in my bound data class, I was able to get the grid to enter edit mode. Hope that helps!
