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.

3f1f741c-1ec1-47ab-9d80-ae4ef31d88e4.png

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

094cb031-3a43-4c88-a639-df3c6c0bbd32.png

97163cd1-eaec-4454-89ce-51ebfdc6003b.png

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

9e603c0a-fd8e-4126-9c2c-a0d5601bac43.png

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

ed37c49d66350dcf40b917b62a6a210ec614e472.png

and you can enable InLine edit for DataGrid records.

datagrid-inline-edit.png

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!

Leverage Radzen on LinkedIn

Yes, we are on LinkedIn and you should follow us!

Now, you have the opportunity to showcase your expertise by adding Radzen Blazor Studio and Radzen Blazor Components as skills to your LinkedIn profile. Present your skills to employers, collaborators, and clients.

All you have to do is go to our Products page on LinkedIn and click the + Add as skill button.

by Vladimir Enchev

Blazor authentication and authorization with customizable user management pages

We are happy to announce that Blazor applications in Radzen just got a very important upgrade: authentication and authorization support with customizable user management pages!
Read more