Inline Editing on Dynamic Grid

Radzen Studio Blazor Server
5

Here is a modified version of our dynamic data online demo which uses inline editing.

    <RadzenDataGrid @ref="dataGrid" Data="@data" TItem="IDictionary<string, object>"
                         AllowFiltering="true" FilterMode="FilterMode.SimpleWithMenu" AllowPaging="true" AllowSorting="true">
            <Columns>
                @foreach(var column in columns)
                {
                    <RadzenDataGridColumn TItem="IDictionary<string, object>" Title="@column.Key" Type="column.Value"
                            Property="@GetColumnPropertyExpression(column.Key, column.Value)" >
                        <Template>
                            @context[@column.Key]
                        </Template>
                        <EditTemplate>
                            <RadzenTextBox Value=@context[@column.Key].ToString()
                                Change=@(value => @context[@column.Key] = value)  />
                        </EditTemplate>
                    </RadzenDataGridColumn>
                }
            <RadzenDataGridColumn TItem="IDictionary<string, object>" Context="order" Filterable="false" Sortable="false" TextAlign="TextAlign.Right" Width="156px">
                <Template Context="data">
                    <RadzenButton Icon="edit" ButtonStyle="ButtonStyle.Light" Variant="Variant.Flat" Size="ButtonSize.Medium" Click="@(args => dataGrid.EditRow(data))" @onclick:stopPropagation="true">
                    </RadzenButton>
                </Template>
                <EditTemplate Context="data">
                    <RadzenButton Icon="check" ButtonStyle="ButtonStyle.Success" Variant="Variant.Flat" Size="ButtonSize.Medium" Click="@((args) => dataGrid.UpdateRow(data))">
                    </RadzenButton>
                    <RadzenButton Icon="close" ButtonStyle="ButtonStyle.Light" Variant="Variant.Flat" Size="ButtonSize.Medium" Class="my-1 ms-1" Click="@((args) => dataGrid.CancelEditRow(data))">
                    </RadzenButton>
                </EditTemplate>
            </RadzenDataGridColumn>
        </Columns>
</RadzenDataGrid>
@code {
    public IEnumerable<IDictionary<string, object>> data { get; set; }
    private RadzenDataGrid<IDictionary<string, object>> dataGrid;

    public IDictionary<string, Type> columns { get; set; }

    public string GetColumnPropertyExpression(string name, Type type)
    {
        var expression = $@"it[""{name}""].ToString()";

        if (type == typeof(int))
        {
            return $"int.Parse({expression})";
        }
        else if (type == typeof(DateTime))
        {
            return $"DateTime.Parse({expression})";
        }

        return expression;
    }

    protected override async Task OnInitializedAsync()
    {
        await base.OnInitializedAsync();

        columns = new Dictionary<string, Type>()
        {
            { "EmployeeID", typeof(int) },
            { "FirstName", typeof(string) },
            { "LastName", typeof(string) },
            { "HireDate", typeof(DateTime) },
        };

        data = Enumerable.Range(0, 100).Select(i =>
        {
            var row = new Dictionary<string, object>();

            foreach (var column in columns)
            {
                row.Add(column.Key, column.Value == typeof(int) ? i :
                    column.Value == typeof(DateTime) ? DateTime.Now.AddMonths(i) : $"{column.Key}{i}");
            }

            return row;
        });
    }
}

And here it is in action:

dynamic-editing

2 Likes