Base solution for your next web application
Open Closed

The field MaxResultCount must be between 1 and 2147483647 #11245


User avatar
0
adamphones created

This is an issue we encounter when parent component is a modal and child component is table that it needs to send request to get its data.

Full error AbpValidationException: Method arguments are not valid! See ValidationErrors for details.\r\nThe following errors were detected during validation.\r\n - The field MaxResultCount must be between 1 and 2147483647

This issue easily can be replicated:

<div appBsModal #editModal="bs-modal" (onShown)="onShown()" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="editModal" aria-hidden="true" [config]="{ backdrop: 'static', keyboard: !saving }" > <div class="modal-dialog modal-lg"> <div class="modal-content"> <div class="modal-body"> <tabset class="nav-line-tabs nav-line-tabs-2x border-transparent fs-5 flex-nowrap"> <tab heading="Grid Data" class="p-5"> <grid-data #gridData [Id]= "Id" </grid-data> </tab> </tabset> </div> <div class="modal-footer"> ... </div> </form> </div> </div> </div>

GridDataComponent.ts

`import { Component, Injector, ViewChild, Input } from '@angular/core'; import { Table } from 'primeng/table'; import { Paginator } from 'primeng/paginator'; import { LazyLoadEvent } from 'primeng/api/lazyloadevent'; import { map as _map, filter as _filter, find as _find } from 'lodash-es';

import { AppComponentBase } from '@shared/common/app-component-base'; import { FileDownloadService } from '@shared/utils/file-download.service'; import { GridDataServiceProxy } from '@shared/service-proxies/service-proxies'; import { DateTime } from 'luxon';

@Component({ selector: 'grid-data', templateUrl: './grid-data.component.html', }) export class GridDataComponent extends AppComponentBase { @ViewChild('dataTable', { static: true }) dataTable: Table; @ViewChild('paginator', { static: true }) paginator: Paginator;

advancedFiltersAreShown = false; filterText = ''; maxEffectiveFromFilter: DateTime; minEffectiveFromFilter: DateTime; constructor( injector: Injector, private _gridDataProxy: GridDataServiceProxy ) { super(injector); } get Id(): number { return this._id; }

@Input() set Id(value: number) { this._id = value; this.getGridData(); }

getGridData(event?: LazyLoadEvent) { if (!this._id) { return; }

if (this.primengTableHelper.shouldResetPaging(event)) {
        this.paginator.changePage(0);

        if (this.primengTableHelper.records && this.primengTableHelper.records.length > 0) {
            return;
        }
    }

    this.primengTableHelper.showLoadingIndicator();

this._gridDataProxy
  .getData(
    this.filterText,
    this.maxEffectiveFromFilter === undefined
      ? this.maxEffectiveFromFilter
      : this.dateTimeService.getEndOfDayForDate(this.maxEffectiveFromFilter),
    this.minEffectiveFromFilter === undefined
      ? this.minEffectiveFromFilter
      : this.dateTimeService.getEndOfDayForDate(this.minEffectiveFromFilter),   
    this._id,
    this.contractActivityDescriptionFilter,
    this.primengTableHelper.getSorting(this.dataTable),
    this.primengTableHelper.getSkipCount(this.paginator, event),
    this.primengTableHelper.getMaxResultCount(this.paginator, event)
  )
  .subscribe((result) => {
    this.primengTableHelper.totalRecordsCount = result.totalCount;
    this.primengTableHelper.records = result.items;
    this.primengTableHelper.hideLoadingIndicator();
  });

}

reloadPage(): void { this.paginator.changePage(this.paginator.getPage()); } }`

Important part is when Id is set then this goes and calls the getGridData method to load data. And this throws exception as this.primengTableHelper.getMaxResultCount(this.paginator, event) returns 0.

I am sure you have faced this issue before. What is the solution? What is the best way to load child component data?

Regards,


3 Answer(s)
  • User Avatar
    0
    ismcagdas created
    Support Team

    Hi,

    We are using similar approach for several items like https://github.com/aspnetzero/aspnet-zero-core/blob/dev/angular/src/app/admin/mass-notifications/user-lookup-table-modal.component.ts and the loading of the table is handled in the show method of the modal. You might be trying to load the table too early. Could you try loading the table in the show method similar to we are duing ?

  • User Avatar
    0
    adamphones created

    Hi Ismail,

    They are not similar. I have checked that one. In my example you have a a child component(Modal) You pass parent data to child component with Input (Id) Then child component (Modal) is the parent for other child components with tables. This Id gets passed to those child components and they should fire getAll methods to get data is loaded. This is not the case. grant-parent.html <div> <parent [ItemId]="ItemId"> </parent> </div>

    parent.html (Modal)

    <tabset> <tab> <child [itemId]="Id"> </child> </tab> <tab> <child2 [itemId]="Id"> </child2> </tab> <tab> <child3 [itemId]="Id"> </child3> </tab> </tabset>

    All child components have <p-Table> in them. Basically standard grid table with getAll() methods.

    The idea is simple: When parent(Modal) is viewed (show) it should automatically fire all child components to load those tables. Where should we place getAll() methods for those child components to load the data? And this needs to happen regardless of Input changes( Id) every time the parent Modal loaded it must fire all child components to pull the data by calling their getAll() methods.

  • User Avatar
    0
    ismcagdas created
    Support Team

    Hi,

    In that case, I think onShown method of the modal should be used. Are you using onShown method ?