Blazorise DataGrid data binding

[GevorDanielyan]

Hello everyone.

I have created component, in which I have created editable DataGrid. In one page I need that this grid will be editable, and in second page where I call that component I need that grid will be non editable. What is the best way to do this?

The component example.

@using Grpc.Core
@using TariffCashOutgRPCService
@using Blazorise.DataGrid
@using GrpcService.BlazorApp.Models
@using Google.Protobuf.WellKnownTypes
@inject ILogger<TariffCashOut> _logger
@inject TariffCashOutgRPCService.TariffCashOutService.TariffCashOutServiceClient tariffCashOutServiceClient

<Div Style="display: flex; justify-content: space-between; width: 31%;">
    <DataGrid TItem="TariffCashOutModel"
              Data="_tariffCashOut"
              Virtualize
              Editable
              EditMode="DataGridEditMode.Popup"
              RowUpdated="@OnRowUpdated"
              Hoverable
              HeaderThemeContrast="ThemeContrast.Light"
              Bordered="true"
              Style="width:600px; height:10px;"
              Responsive>

        <DataGridColumns>
            <DataGridCommandColumn Context="dataGridContext"
                                   NewCommandAllowed="false"
                                   EditCommandAllowed="true"
                                   DeleteCommandAllowed="false"
                                   TItem="TariffCashOutModel">
                <EditCommandTemplate>
                    <Button Color="Color.Primary" Clicked="dataGridContext.Clicked">Edit</Button>
                </EditCommandTemplate>
            </DataGridCommandColumn>
            <DataGridColumn TItem="TariffCashOutModel" Field="@nameof(TariffCashOutModel.Iso)" Caption="ISO" Sortable="false" />
            <DataGridColumn TItem="TariffCashOutModel" Field="@nameof(TariffCashOutModel.Value)" Caption="Cash Out" Editable="true" Sortable="false" />
        </DataGridColumns>
    </DataGrid>
</Div>

@code {
    
    private List<TariffCashOutModel> _tariffCashOut = new List<TariffCashOutModel>();
    [Inject] IMessageService? MessageService { get; set; }
    Empty emptyRequest = new Empty();

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

    private async Task GetTariffCashOutAsync()
    {
        try
        {
            using (var call = tariffCashOutServiceClient.GetCashOutTariff(emptyRequest))
            {
                await foreach (var response in call.ResponseStream.ReadAllAsync())
                {
                    var tarifResponse = new TariffCashOutModel
                        {
                            Iso = response.Iso,
                            Value = response.Value
                        };
                    _tariffCashOut.Add(tarifResponse);
                }
            }
        }
        catch (RpcException ex) when (ex.StatusCode == StatusCode.Internal)
        {
            _logger.LogError(ex.Message);
            throw;
        }
    }

    private async Task OnRowUpdated(SavedRowItem<TariffCashOutModel, Dictionary<string, object>> e)
    {
        var tariff = e.Item;
        UpdateCashOutTariffRequest request = new UpdateCashOutTariffRequest
            {
                Iso = tariff.Iso,
                Value = tariff.Value!.Value
            };

        var response = await tariffCashOutServiceClient.UpdateCashOutTariffAsync(request);
        _logger.LogInformation("Updated cash out tariff");

        if (response.Message is null)
        {
            await MessageService!.Error("Cannot update cash out tariff");
        }

        await MessageService!.Info("Updated successfully");
    }
}

[stsrki]

Just have a parameter that sets the Editable parameter.

YourComponent.razor

@using Grpc.Core
@using TariffCashOutgRPCService
@using Blazorise.DataGrid
@using GrpcService.BlazorApp.Models
@using Google.Protobuf.WellKnownTypes
@inject ILogger<TariffCashOut> _logger
@inject TariffCashOutgRPCService.TariffCashOutService.TariffCashOutServiceClient tariffCashOutServiceClient

<Div Style="display: flex; justify-content: space-between; width: 31%;">
    <DataGrid TItem="TariffCashOutModel"
              Data="_tariffCashOut"
              Virtualize
+              Editable="@Editable"
              EditMode="DataGridEditMode.Popup"
              RowUpdated="@OnRowUpdated"
              Hoverable
              HeaderThemeContrast="ThemeContrast.Light"
              Bordered="true"
              Style="width:600px; height:10px;"
              Responsive>

        <DataGridColumns>
            <DataGridCommandColumn Context="dataGridContext"
                                   NewCommandAllowed="false"
                                   EditCommandAllowed="true"
                                   DeleteCommandAllowed="false"
                                   TItem="TariffCashOutModel">
                <EditCommandTemplate>
                    <Button Color="Color.Primary" Clicked="dataGridContext.Clicked">Edit</Button>
                </EditCommandTemplate>
            </DataGridCommandColumn>
            <DataGridColumn TItem="TariffCashOutModel" Field="@nameof(TariffCashOutModel.Iso)" Caption="ISO" Sortable="false" />
            <DataGridColumn TItem="TariffCashOutModel" Field="@nameof(TariffCashOutModel.Value)" Caption="Cash Out" Editable="true" Sortable="false" />
        </DataGridColumns>
    </DataGrid>
</Div>

@code {
+    [Parameter] bool Editable { get; set; }
    
    private List<TariffCashOutModel> _tariffCashOut = new List<TariffCashOutModel>();
    [Inject] IMessageService? MessageService { get; set; }
    Empty emptyRequest = new Empty();

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

    private async Task GetTariffCashOutAsync()
    {
        try
        {
            using (var call = tariffCashOutServiceClient.GetCashOutTariff(emptyRequest))
            {
                await foreach (var response in call.ResponseStream.ReadAllAsync())
                {
                    var tarifResponse = new TariffCashOutModel
                        {
                            Iso = response.Iso,
                            Value = response.Value
                        };
                    _tariffCashOut.Add(tarifResponse);
                }
            }
        }
        catch (RpcException ex) when (ex.StatusCode == StatusCode.Internal)
        {
            _logger.LogError(ex.Message);
            throw;
        }
    }

    private async Task OnRowUpdated(SavedRowItem<TariffCashOutModel, Dictionary<string, object>> e)
    {
        var tariff = e.Item;
        UpdateCashOutTariffRequest request = new UpdateCashOutTariffRequest
            {
                Iso = tariff.Iso,
                Value = tariff.Value!.Value
            };

        var response = await tariffCashOutServiceClient.UpdateCashOutTariffAsync(request);
        _logger.LogInformation("Updated cash out tariff");

        if (response.Message is null)
        {
            await MessageService!.Error("Cannot update cash out tariff");
        }

        await MessageService!.Info("Updated successfully");
    }
}

Usage

<YourComponent Editable="true" />

[GevorDanielyan]

Thank you @stsrki . Also I have an another question, related ListView, if you have time, could you please help me ?