Why itemsprovider from quickgrid componend fired twice when use paginatione:true?

120 Views Asked by At

I have a Blazor Web App application with interactive render mode set to server(only).

I have the following quick grid

<QuickGrid @ref="gridTestModel1" ItemsProvider="itemsProviderTestModel1" Class="table table-bordered" Pagination="paginationTestModel1">
    <PropertyColumn Property="@(p => p.Id)" Align="Align.Center" Title="Id Db" Sortable="true" IsDefaultSortColumn="true"/>
    <PropertyColumn Property="@(p => p.Name)" Title="Nume" Align="Align.Center" Sortable="true">
        <ColumnOptions>
            <input type="search" autofocus placeholder="Cauta dupa nume..." />
        </ColumnOptions>
    </PropertyColumn>
    <PropertyColumn Property="@(p => p.Description)" Title="Description" Align="Align.Center" Sortable="true"/>
    <PropertyColumn Property="@(p => p.Age)" Title="Age" Align="Align.Center" Sortable="true">
        <ColumnOptions>
            <input type="search" autofocus placeholder="Cauta dupa age..." />
        </ColumnOptions>
    </PropertyColumn>
    <PropertyColumn Property="@(p => p.DateTime)" Title="Data" Align="Align.Center" Sortable="true" />
    <TemplateColumn Title="Acțiuni">
        <a href="#" class="btn btn-danger hover-scale">Șterge</a>
    </TemplateColumn>
</QuickGrid>

with following itemsprovider

itemsProviderTestModel1 = async request =>
{
    await Task.Delay(200);
    var result = await TestRepo.GetTestModelListGrid(request, 50, filteredName, "", filteredAge);
    CountTestModel1 = result.Items.Count;
    // Separately display the item count
    if (result.TotalItemCount != NumResultUsers)
    {
        NumResultTestModel1 = result.TotalItemCount;
    }

    return result;
};

The problem I have is when want to use pagination the itemsProviderTestModel1 is fired twice and also if I want to press a button (which it is outside quickgrid component) to open a modal for example, again itemsProviderTestModel1 is fired.

I also discovered that if click on columns to sorting or try to search something and then click on button that open modal, the itemsProviderTestModel1 is not fired.

This is bad for user experience and also for server resources.

Bellow is the full code

<button class="btn btn-sm btn-outline-success" @onclick="@(() => OpenModalAddUser())">OpenModal</button>

<div class="table-responsive" tabindex="-1" style="height: 25rem; overflow-y:auto">
    <QuickGrid @ref="gridTestModel1" ItemsProvider="itemsProviderTestModel1" Class="table table-bordered" Pagination="paginationTestModel1">
        <PropertyColumn Property="@(p => p.Id)" Align="Align.Center" Title="Id Db" Sortable="true" IsDefaultSortColumn="true"/>
        <PropertyColumn Property="@(p => p.Name)" Title="Nume" Align="Align.Center" Sortable="true">
            <ColumnOptions>
                <input type="search" autofocus placeholder="Cauta dupa nume..." />
            </ColumnOptions>
        </PropertyColumn>
        <PropertyColumn Property="@(p => p.Description)" Title="Description" Align="Align.Center" Sortable="true"/>
        <PropertyColumn Property="@(p => p.Age)" Title="Age" Align="Align.Center" Sortable="true">
            <ColumnOptions>
                <input type="search" autofocus placeholder="Cauta dupa age..." />
            </ColumnOptions>
        </PropertyColumn>
        <PropertyColumn Property="@(p => p.DateTime)" Title="Data" Align="Align.Center" Sortable="true" />
        <TemplateColumn Title="Acțiuni">
            <a href="#" class="btn btn-danger hover-scale">Șterge</a>
        </TemplateColumn>
    </QuickGrid>
</div>

<div class="my-2">
    <Paginator State="paginationTestModel1" />
</div>

<div class="modal fade" id="kt_modal_add_user" tabindex="-1" aria-hidden="true">
    <!--begin::Modal dialog-->
    <div class="modal-dialog modal-dialog-centered mw-650px">
        <!--begin::Modal content-->
        <div class="modal-content">
            <!--begin::Modal header-->
            <div class="modal-header" id="kt_modal_add_user_header">
                <!--begin::Modal title-->
                <h2 class="fw-bold">Adaugă un nou utilizator</h2>
                <!--end::Modal title-->
                <!--begin::Close-->
                <button class="btn btn-icon btn-sm btn-active-icon-primary" @onclick='@(async()=> await CloseModalAddUser())'>
                    <i class="ki-duotone ki-cross fs-1">
                        <span class="path1"></span>
                        <span class="path2"></span>
                    </i>
                </button>
                <!--end::Close-->
            </div>
            <!--end::Modal header-->
            <!--begin::Modal body-->
            <div class="modal-body px-5 my-7">
                dgbfxdhfdhnfnjxdc
            </div>
            <!--end::Modal body-->
        </div>
        <!--end::Modal content-->
    </div>
    <!--end::Modal dialog-->
</div>

@code {
QuickGrid<LargeData1>? gridTestModel1 = new QuickGrid<LargeData1>();
GridItemsProvider<LargeData1>? itemsProviderTestModel1;
PaginationState paginationTestModel1 = new PaginationState { ItemsPerPage = 5 };

 int CountTestModel1;
 int NumResultTestModel1;
 string filteredName = string.Empty;
 string filteredAge = string.Empty;

protected override async Task OnInitializedAsync(){
        itemsProviderTestModel1 = async request =>
        {
            await Task.Delay(200);
            var result = await TestRepo.GetTestModelListGrid(request, paginationTestModel1.ItemsPerPage, filteredName, "", filteredAge);
            CountTestModel1 = result.Items.Count;
            // Separately display the item count
            if (result.TotalItemCount != NumResultUsers)
            {
                NumResultTestModel1 = result.TotalItemCount;
            }

            return result;
        };
}

private async Task OpenModalAddUser()
{


    await Task.Delay(200);

    await ModalRepo.OpenModal("kt_modal_add_user");
}


}

I have also tried to call the itemsProviderUsers manually, but after first intialisation it occur same problem as i described above.

So everytime user must to click on column sorting, search something or click on next page to show more data, in order to avoid itemsProviderUsers to fire when open modal buton is clicked.

I also tried to call await gridTestModel1.RefreshDataAsync() programatically and the problem disapear but what is the point tom make so much requests to server

0

There are 0 best solutions below