Blazor DataGrid InLine editing, column totals and more

We've been busy over the past few months, adding more and more new components and features to our FREE Blazor component suite. For the official release of Microsoft .NET Core 3.0 in September at .NET Conf 2019, 8 new components (AutoComplete, CheckBoxList, RadioButtonList, SelectBar, SplitButton, Accordion, Rating and ProgressBar) joined our growing list of native Blazor components.

Radzen Blazor projects received Internationalization (i18n) support and REST data source.

You can create now DataGrid with Form page using our brand new template.

Today, we are happy to announce that using latest update you can add totals to DataGrid column footers

and you can enable InLine edit for DataGrid records.

It is super easy to edit records - just follow the steps:

1. Add EditTemplate with desired editor for your DataGrid columns. If no EditTemplate is defined the cell will stay in read-only mode.

...
<RadzenGridColumn Width="200px" TItem="Order" Property="Customer.CompanyName" Title="Customer">
    <EditTemplate Context="order">
        <RadzenDropDown @bind-Value="order.CustomerID" Data="@customers" TextProperty="CompanyName" ValueProperty="CustomerID" Style="width:100%" />
    </EditTemplate>
</RadzenGridColumn>
...

2. Define action column with buttons for edit, update and cancel.

...
<RadzenGridColumn TItem="Order" Context="sampleBlazorModelsSampleOrder" Bubble="false" Filterable="false" Sortable="false" TextAlign="TextAlign.Center" Width="100px">
    <Template Context="order">
        <RadzenButton Icon="edit" Size="ButtonSize.Small" Click="@(args => EditRow(order))" />
    </Template>
    <EditTemplate Context="order">
        <RadzenButton Icon="save" Size="ButtonSize.Small" Click="@((args) => UpdateRow(order))" />
        <RadzenButton Icon="cancel" Size="ButtonSize.Small" ButtonStyle="ButtonStyle.Secondary" Click="@((args) => CancelEdit(order))" />
    </EditTemplate>
</RadzenGridColumn>
...

3. Edit row, perform update or cancel changes:

void EditRow(Order order)
{
    // Set the grid row in edit mode.
    ordersGrid.EditRow(order);
}

void UpdateRow(Order order)
{
    // Set the grid row in read-only mode.
    ordersGrid.UpdateRow(order);

    // Update your data with provided values.
    dbContext.Update<Order>(order);
    dbContext.SaveChanges();
}

void CancelEdit(Order order)
{
    // Set the grid row in read-only mode.
    ordersGrid.CancelEditRow(order);

    // Revert all changes.
    var orderEntry = dbContext.Entry(order);
    orderEntry.CurrentValues.SetValues(orderEntry.OriginalValues);
    orderEntry.State = EntityState.Unchanged;
}

For complete demo with source code please visit DataGrid InLine Editing.

If you still haven’t tried Radzen you can get the latest bits from here. Don’t forget to share your feedback with us! Send an email to info at radzen.com or post in our forum.

Enjoy!