Best and convenient way to create modal datagrid with Blazorise

[GevorDanielyan]

Hello every one.

I would like to know the best and convenient way to create modal data grid with Blazorise. For example I have a button, after button click it should open modal data grid with data filled in each text field, and also opportunity for editing that text fields.

For example, suppose this is a button

After clicking this button, should be open modal data grid . For example like this.

Thanks in advance.

[David-Moreira]

Hello,

Our Modal and Datagrid components.
https://blazorise.com/docs/components/modal
https://blazorise.com/docs/extensions/datagrid/binding-data

Also ModalProvider on the next release, might be a good one,
#3614
Since you can program your component and then just do something along the lines of:
ModalService.Show<MyBidAskDataGrid>();

[GevorDanielyan]

Hello @David-Moreira .

Thank you for your reply. I think this

ModalService.Show<MyBidAskDataGrid>();

will solve my issue, but at this moment how can I solve this?

For example I have created component which is DataGrid, and use it in the modal.

@using Grpc.Core
@using DdeRPCService
@using Blazorise.DataGrid
@using GrpcService.BlazorApp.Models
@using Google.Protobuf.WellKnownTypes
@inject DdeRPCService.DdeService.DdeServiceClient _ddeClient
@inject ILogger<Dde> _logger

<PageTitle>Dde</PageTitle>
<h3>Dde</h3>

<DataGrid TItem="DdeModel"
          Data="_dde"
          Virtualize
          Hoverable="true"
          Bordered="true"
          HeaderThemeContrast="ThemeContrast.Light"
          Style="color: #fff; font-size: .80em;"
          Responsive>
    <DataGridColumns>
        <DataGridCommandColumn TItem="DdeModel" />
        <DataGridColumn TItem="DdeModel" Field="@nameof(DdeModel.Pair)" Caption="Forex" Sortable="false">
            <DisplayTemplate>
                <Image Source="@context.Ico" Style="width:20px; height:15px;" />
                @context.Pair
            </DisplayTemplate>
        </DataGridColumn>
        <DataGridColumn TItem="DdeModel" Field="@nameof(DdeModel.Bid)" Caption="BID" Editable="true" Sortable="false" />
        <DataGridColumn TItem="DdeModel" Field="@nameof(DdeModel.Ask)" Caption="ASK" Editable="true" Sortable="false" />
        <DataGridColumn TItem="DdeModel" Field="@nameof(DdeModel.OBid)" Caption="BID(Off)" Editable="true" Sortable="false" />
        <DataGridColumn TItem="DdeModel" Field="@nameof(DdeModel.Oask)" Caption="ASK(Off)" Editable="true" Sortable="false" />
    </DataGridColumns>

</DataGrid>

<style>
    .table-bordered > :not(caption) > * > * {
        border-width: 1px;
    }
</style>

@code {
    private List<DdeModel> _dde = new List<DdeModel>();

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

    private async Task GetDdeAsync()
    {
        var emptyRequest = new Empty();
        try
        {
            using (var call = _ddeClient.GetDde(emptyRequest, deadline: DateTime.UtcNow.AddSeconds(5)))
            {
                await foreach (var response in call.ResponseStream.ReadAllAsync())
                {
                    var ddeResponse = new DdeModel
                        {
                            Pair = response.PAIR,
                            Ico = response.ICO.TrimStart('~'),
                            Bid = response.BID,
                            Ask = response.ASK,
                            OBid = response.OBID,
                            Oask = response.OASK

                        };
                    _dde.Add(ddeResponse);
                }
            }
        }
        catch (RpcException ex) when (ex.StatusCode == StatusCode.DeadlineExceeded)
        {
            _logger.LogError(ex.Message);
            throw;
        }
    }
}

This is my Data Grid component, which is used in the second component like this.

@inject DdeRPCService.DdeService.DdeServiceClient _ddeClient


<Button Color="Color.Success" Clicked="@ShowDdeModal">Refresh</Button>

<Modal @ref="modalRef">
    <ModalContent Centered>
        @*<ModalHeader>
            <ModalTitle></ModalTitle>
        </ModalHeader>*@
        <Dde></Dde>
    </ModalContent>
</Modal>

@code {
    

    // reference to the modal component
    private Modal? modalRef;

    private Task ShowDdeModal()
    {
        return modalRef!.Show();
    }

    private async Task HideModal()
    {
        await modalRef!.Hide();
    }

}

In the modal I see data grid , but the Dde.razor component I'm using in another component which is non editable, but in RefreshButton.razor component I want that Dde was editable, and showed just two columns for example, not an all columns.

[David-Moreira]

Hello,
ModalService.Show<MyBidAskDataGrid>(); should allow you to skip some of the cerimony you have here, but the result should be pretty much the same.
I guess you just did the main thing you asked for, a Modal with the DataGrid. The rest is just programming/configuration of the components it seems.

So since the DataGrid is inside the Dde component you'll need to be able to intereact with it somehow, either by exposing Methods or Parameters.
I'll try to give you a rundown of what I think you need to do from looking at your example. Take note I might be writting ccode outside the IDE so there might be syntax errors, it's just so you get the idea.

• Make the DataGrid Editable, by setting the Editable attribute on it. Also the Editable attribute on each column, tells DataGrid which columns to show when the DataGrid is on EditMode.
• Grab a ref of DataGrid so you can call DataGrid's public methods. @ref="dataGridRef"
• Create a new method public Task Edit() { return dataGridRef.Edit(_selectedRow); }; PS: Might need to null check here. :)
  • It is of note our DataGrid still only allows for editting a single item at a time. You might be able to achieve multiple edits at a time, but you'll need a more custom implementation.
• Create a new field/property to keep track of the SelectedRow : private DdeModel _selectedRow;
• On DataGrid @bind-SelectedRow="_selectedRow"
• So your Dde component should now have a way to instruct the DataGrid to go into Edit Mode.
• Go back to where your modal is, and Dde is instanced, grab a ref to it. @ref="DDeRef"
• You may now bind a Clicked event that calls DDeRef.Edit() and will put the DataGrid into edit mode.
• Now you'll also need to be able to tell the DataGrid how to handle the editting of the item, we have various callbacks that help with this work,
  

https://blazorise.com/docs/extensions/datagrid/getting-started

[GevorDanielyan]

I made it in another way. Grid now showing in modal, in one page not editable, in second as editable. But now I have a another question. When I click row edit, how I can implement Save command?

This is non editable grid (Dde.razor component).

In another action this grid rendered in modal like this

When I click on Edit button, as shown below

The save is not working.

Dde.razor component

@using Grpc.Core
@using DdeRPCService
@using Blazorise.DataGrid
@using DdeOfflineRPCService
@using GrpcService.BlazorApp.Models
@using Google.Protobuf.WellKnownTypes
@inject DdeRPCService.DdeService.DdeServiceClient ddeClient
@inject CashgRPCService.CashService.CashServiceClient cashServiceClient
@inject GoldgRPCService.GoldService.GoldServiceClient goldServiceClient
@inject NonCashgRPCService.NonCashService.NonCashServiceClient nonCashServiceClient
@inject DdeOfflineRPCService.DdeOfflineService.DdeOfflineServiceClient ddeOfflineClient
@inject ILogger<Dde> _logger

<h3>Dde</h3>

<DataGrid TItem="DdeModel"
          Data="_dde"
          Virtualize
          Editable="@Editable"
          RowUpdated="@OnRowUpdated"
          Hoverable="true"
          Bordered="true"
          HeaderThemeContrast="ThemeContrast.Light"
          Style="color: #fff; font-size: .80em;"
          Responsive>
    <DataGridColumns>
        <DataGridCommandColumn Context="dataGridContext"
                               NewCommandAllowed="false"
                               EditCommandAllowed="true"
                               DeleteCommandAllowed="false"
                               TItem="DdeModel">
            <EditCommandTemplate>
                <Button Color="Color.Primary" Clicked="dataGridContext.Clicked">Edit</Button>
            </EditCommandTemplate>
        </DataGridCommandColumn>

        <DataGridColumn TItem="DdeModel" Field="@nameof(DdeModel.Pair)" Caption="Forex" Sortable="false">
            <DisplayTemplate>
                <Image Source="@context.Ico" Style="width:20px; height:15px;" />
                @context.Pair
            </DisplayTemplate>
        </DataGridColumn>
        <DataGridColumn TItem="DdeModel" Field="@nameof(DdeModel.Bid)" Caption="BID" Editable="false" Sortable="false" />
        <DataGridColumn TItem="DdeModel" Field="@nameof(DdeModel.Ask)" Caption="ASK" Editable="false" Sortable="false" />
        <DataGridColumn TItem="DdeModel" Field="@nameof(DdeModel.OBid)" Caption="BID(Off)" Editable="true" Sortable="false" />
        <DataGridColumn TItem="DdeModel" Field="@nameof(DdeModel.Oask)" Caption="ASK(Off)" Editable="true" Sortable="false" />
    </DataGridColumns>

</DataGrid>

<style>
    .table-bordered > :not(caption) > * > * {
        border-width: 1px;
    }
</style>

@code {

    [Parameter]
    public bool Editable { get; set; }

    [Inject] 
    IMessageService? MessageService { get; set; }

    Empty emptyRequest = new Empty();

    private List<DdeModel> _dde = new List<DdeModel>();

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

    private async Task GetDdeAsync()
    {
        try
        {
            using (var call = ddeClient.GetDde(emptyRequest, deadline: DateTime.UtcNow.AddSeconds(5)))
            {
                await foreach (var response in call.ResponseStream.ReadAllAsync())
                {
                    var ddeResponse = new DdeModel
                        {
                            Pair = response.PAIR,
                            Ico = response.ICO.TrimStart('~'),
                            Bid = response.BID,
                            Ask = response.ASK,
                            OBid = response.OBID,
                            Oask = response.OASK

                        };
                    _dde.Add(ddeResponse);
                }
            }
        }
        catch (RpcException ex) when (ex.StatusCode == StatusCode.DeadlineExceeded)
        {
            _logger.LogError(ex.Message);
            throw;
        }
    }

    private async Task OnRowUpdated(SavedRowItem<DdeModel, Dictionary<string, object>> e)
    {
        var dde = e.Item;
        UpdateDdeOfflineRequest request = new UpdateDdeOfflineRequest
            {
                PAIR = dde.Pair,
                ASK = dde.Ask,
                BID = dde.Bid
            };

        var response = await ddeOfflineClient.UpdateDdeOfflineAsync(request);

        if (response.Message is null)
        {
            await MessageService!.Error("Cannot update Dde offline");
        }

        await goldServiceClient.UpdateGoldAsync(emptyRequest);
        await cashServiceClient.UpdateCashAsync(emptyRequest);
        await nonCashServiceClient.UpdateNonCashAsync(emptyRequest);

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

[David-Moreira]

Hello,
Have you looked at the console? No errors thrown? Have you tried debugging RowUpdating / RowUpdated?

[GevorDanielyan]

Already solved, the problem was in the backend side. Thanks.