Having Datagrid LoadData Issues

Radzen.Blazor Components
1

I'm having issues with one of my pages with three separate Data grids. I'm trying to have each of them use the LoadData so that each load separately ( code below server-side application VS IDE )

Currently, I've disabled two of the three to try and work on why the data load fails to show data; when I debug, I do show five records add to the list object, but still, it defaults to the empty template.

I made the method non-async "@LoadRptFirstInvoice " to see if that was the issue, but it seems there is still an issue some were. I did originally have "@RptFirstInvoiceGrid" used but from the demos, it did not seem required and has made no difference so far.

Please let me know if you see the issue; this is somewhat frustrating.

code

@using [redacted].]Infrastructure.ViewModels
@inject IUnitOfWork UnitOfWork

<div class="row p-4">
    <div class="col">
        <div class="row">
            <div class="col">
                <h5>First Invoices</h5>
            </div>
        </div>
        <div class="row">
            <div class="col">
                @*@ref="RptFirstInvoiceGrid"*@
                <RadzenDataGrid Data="@RptFirstInvoice"
                                TItem="rptInvoiceViewModel" PagerPosition="@pagerPosition" 
                                AllowPaging="true" PageSize="5"
                                IsLoading=@isLoadingRptFirstInvoice Density="@density"
                                LoadData="@LoadRptFirstInvoice" AllowVirtualization="true"
                                PagerHorizontalAlign="@pagerHorizontalAlign" ShowPagingSummary="false">
                    <EmptyTemplate>
                        <p style="color: lightgrey; font-size: 24px; text-align: center; margin: 2rem;">No records to display.</p>
                    </EmptyTemplate>
                    <Columns>
                        <RadzenDataGridColumn TItem="rptInvoiceViewModel" Property="InstitutionName" Filterable="false" Title="Institution Name" Frozen="true" TextAlign="@textAlign" />
                        <RadzenDataGridColumn TItem="rptInvoiceViewModel" Property="EngagementNum" Filterable="false" Title="Engagement Num" Frozen="true" TextAlign="@textAlign">
                            <Template Context="report">
                                <a class="link-primary"
                                   href="/EngagementTasking/{@report.SaleId}"
                                   target="_blank" rel="noopener noreferrer">@report.EngagementNum</a>
                            </Template>
                        </RadzenDataGridColumn>
                    </Columns>
                </RadzenDataGrid>
            </div>
        </div>
    </div>

</div>
<div class="row p-4">
    <div class="col">
        <div class="row">
            <div class="col">
                <h5>Second Invoices</h5>
            </div>
        </div>
        <div class="row">
            <div class="col">
        @*        <RadzenDataGrid @ref="RptSecondInvoiceGrid" Data="@RptSecondInvoice"
                                TItem="rptInvoiceViewModel" PagerPosition="@pagerPosition" AllowPaging="true" PageSize="5"
                                IsLoading=@isLoadingRptSecondInvoice Density="@density"
                                LoadData="@LoadRptSecondInvoice" AllowVirtualization="true"
                                PagerHorizontalAlign="@pagerHorizontalAlign" ShowPagingSummary="false">
                    <EmptyTemplate>
                        <p style="color: lightgrey; font-size: 24px; text-align: center; margin: 2rem;">No records to display.</p>
                    </EmptyTemplate>
                    <Columns>
                        <RadzenDataGridColumn TItem="rptInvoiceViewModel" Property="InstitutionName" Filterable="false" Title="Institution Name" Frozen="true" TextAlign="@textAlign" />
                        <RadzenDataGridColumn TItem="rptInvoiceViewModel" Property="EngagementNum" Filterable="false" Title="Engagement Num" Frozen="true" TextAlign="@textAlign">
                            <Template Context="report">
                                <a class="link-primary"
                                   href="/EngagementTasking/{@report.SaleId}"
                                   target="_blank" rel="noopener noreferrer">@report.EngagementNum</a>
                            </Template>
                        </RadzenDataGridColumn>
                    </Columns>
                </RadzenDataGrid>*@
            </div>
        </div>
    </div>
</div>
<div class="row p-4">
    <div class="col">
        <div class="row">
            <div class="col">
                <h5>New Sales</h5>
            </div>
        </div>
        <div class="row">
            <div class="col">
                @*                <RadzenDataGrid @ref="RptNewSalesGrid" Data="@RptNewSales"
                TItem="RptDashboardBase" PagerPosition="@pagerPosition"
                AllowPaging="true" PageSize="5"
                IsLoading=@isLoadingRptNewSales Density="@density"
                LoadData="@LoadRptNewSales"
                PagerHorizontalAlign="@pagerHorizontalAlign" ShowPagingSummary="false">
                <EmptyTemplate>
                <p style="color: lightgrey; font-size: 24px; text-align: center; margin: 2rem;">No records to display.</p>
                </EmptyTemplate>
                <Columns>
                <RadzenDataGridColumn TItem="RptDashboardBase" Property="InstitutionName" Filterable="false" Title="Institution Name" Frozen="true" TextAlign="@textAlign" />
                <RadzenDataGridColumn TItem="RptDashboardBase" Property="EngagementNum" Filterable="false" Title="Engagement Num" Frozen="true" TextAlign="@textAlign">
                <Template Context="report">
                <a class="link-primary"
                href="/EngagementTasking/{@report.SaleId}"
                target="_blank" rel="noopener noreferrer">@report.EngagementNum</a>
                </Template>
                </RadzenDataGridColumn>
                </Columns>
                </RadzenDataGrid>*@
            </div>
        </div>
    </div>
</div>
2

When binding the DataGrid using LoadData event you need to set Count to the total records count. Check our demos for reference.

3

Is there a reason why when I try to load all three tables they fail.

[update]

I ended up having to put each data grid into its own component for things to work as expected