Visualization issue when selecting "All items" from grid pager

[CLAUDIO RICCARDI]

Hello,

this is my grid:

<ejs-grid #grid id='plantsGrid' [dataSource]='italgasExistingPlants' locale='it-iT' 

allowPaging='true' enableInfiniteScrolling='true' height=700 

[pageSettings]='initialPage' [allowFiltering]='true' [filterSettings]='filterOption'

[allowSorting]='true' [allowGrouping]='true' [allowPdfExport]='true' 

allowTextWrap='true' [textWrapSettings]='wrapSettings' (dataBound)='dataBound()'

[allowExcelExport]='true' [toolbar]='toolbarOptions' (toolbarClick)='toolbarClick($event)'

(created)='setHeaderHeight($event)' (queryCellInfo)='tooltip($event)'

(actionComplete)='actionComplete($event)'>

    <e-columns>

        <e-column field='statoComunicazione' headerText='1' width=30 textAlign='Center'>

            <ng-template #template let-data>

                <div class="image">

                    <img src="../../assets/images/imgC{{data.statoComunicazione}}.png" alt="imgC{{data.statoComunicazione}}"/>

                </div>

            </ng-template>

        </e-column>

        <e-column field='statoAllarmi' headerText='2' width=30 textAlign='Center'>

            <ng-template #template let-data>

                <div class="image">

                    <img src="../../assets/images/imgA{{data.statoAllarmi}}.png" alt="imgA{{data.statoAllarmi}}"/>

                </div>

            </ng-template>

        </e-column>   

        <e-column field='gruppo' headerText='Gruppo' textAlign='Center' width=80></e-column>        

        <e-column field='nome' headerText='Ragione sociale' textAlign='Center' width=90></e-column>

        <e-column field='pdr' headerText='PUF' textAlign='Center' width=100></e-column>

        <e-column field='ldn' headerText='Logical device name' textAlign='Center' width=90></e-column>

        <e-column field='tipo' headerText='Tipo' textAlign='Center' width=70></e-column>

        <e-column field='volumiMisurati' headerText='Totalizzatore' textAlign='Center' width=95></e-column>

        <e-column field='volumiConvertiti' headerText='Backflow' textAlign='Center' width=85></e-column>

        <e-column field='matricolaContatore' headerText='Matricola' textAlign='Center' width=90></e-column>

        <e-column field='ultimoCollegamento' headerText='Ultimo collegamento' textAlign='Center' width=100></e-column>

        <e-column field='qualitaSegnale' headerText='Qualità segnale' textAlign='Center' width=80></e-column>

        <e-column field='livelloSegnale' headerText='Livello segnale' textAlign='Center' width=80></e-column>

        <e-column field='batteriaMisura' headerText='Batteria' textAlign='Center' width=85></e-column>

        <e-column field='versioneFirmware' headerText='Versione firmware' textAlign='Center' width=85></e-column>

    </e-columns>

</ejs-grid>

When I select "All items" form the pager dropdown, grid doesn't show all the items and I see blank space after some visible items. the grid seems to freeze.

The datasource is returned from the followinga controller method:

dashboard.component.ts

ngOnInit(): void {

    this.loadItalgasExistingPlants();

...

  }

  loadItalgasExistingPlants() {

    this.plantsService.getAllItalgasExistingPlants().subscribe(plants => {

      this.italgasExistingPlants = plants;

...

    })

  } 

controller:

        public async Task<IEnumerable<ItalgasPlantDto>> GetAllItalgasPlantsAsync()

        {

            int giorni = 0;

            //var plants = await _context.Plants.ToListAsync();

            var plants = await (from p in _context.Plants

                               select new

                               {

                                   p.XmlData

                               }).ToListAsync();

            IFormatter formatter = new System.Runtime.Serialization.Formatters.Binary.BinaryFormatter();

            List<ItalgasPlantDto> allItalgasPlants = new List<ItalgasPlantDto>();

            foreach (var p in plants)

            {

                if (p.XmlData != null)

                {

                    ExistingPlants italgasPlants = (ExistingPlants)formatter.Deserialize(new MemoryStream(p.XmlData.ToArray()));

                    //ItalgasPlantDto italgasPlantDto = _mapper.Map<ItalgasPlantDto>(italgasPlants);

                    ItalgasPlantDto italgasPlantDto = new ItalgasPlantDto();

                    italgasPlantDto.GuidImpianto = italgasPlants.GuidImpianto;

                    italgasPlantDto.Gruppo = italgasPlants.Gruppo;

                    italgasPlantDto.Nome = italgasPlants.Nome;

                    italgasPlantDto.Pdr = italgasPlants.PdR;

                    italgasPlantDto.LDN = italgasPlants.LDN;

                    italgasPlantDto.Tipo = italgasPlants.Ubicazione?.distretto;

                    italgasPlantDto.LivelloSegnale = (italgasPlants.AltriDati != null && italgasPlants.AltriDati.Count >= 4) ? italgasPlants.AltriDati[4] : null;

                    italgasPlantDto.QualitaSegnale = (italgasPlants.AltriDati != null && italgasPlants.AltriDati.Count >= 5) ? italgasPlants.AltriDati[5] : null;

                    italgasPlantDto.VolumiMisurati = italgasPlants.VolumiMisurati;

                    italgasPlantDto.VolumiConvertiti = italgasPlants.VolumiConvertiti;

                    italgasPlantDto.MatricolaContatore = italgasPlants.MatricolaContatore;

                    italgasPlantDto.UltimoCollegamento = italgasPlants.UltimoCollegamento;

                    italgasPlantDto.BatteriaMisura = italgasPlants.BatteriaMisura + " giorni";

                    italgasPlantDto.VersioneFirmware = italgasPlants.VersioneFirmware;

                    //STATO ALLARMI

                    italgasPlantDto.StatoAllarmi = italgasPlants.DiagnosticaCorrente == 0 ? 0 : 1;

                    italgasPlantDto.TooltipStatoAllarmi = italgasPlants.DiagnosticaCorrente == 0 ? null : "Allarmi attivi";

                    //STATO COMUNICAZIONE

                    switch (italgasPlants.EsitoUltimaComunicazione)

                    {

                        case EnumEsitoUltimaComunicazione.EffettuataOggi:

                            // Dati ricevuti oggi correttamente

                            italgasPlantDto.StatoComunicazione = 0; // "~/images/imgGreen.png"

                            italgasPlantDto.TooltipStatoComunicazione = "L'impianto ha comunicato oggi correttamente";

                            break;

                        case EnumEsitoUltimaComunicazione.DatiParziali:

                            // Dati ricevuti oggi correttamente

                            italgasPlantDto.StatoComunicazione = 1; // "~/images/imgGreenYellow.png"

                            italgasPlantDto.TooltipStatoComunicazione = "L'impianto ha comunicato oggi con dati parziali";

                            break;

                        case EnumEsitoUltimaComunicazione.DatiInvalidi:

                            // Dati ricevuti oggi invalidi

                            italgasPlantDto.StatoComunicazione = 2; // "~/images/imgBlue.png"                                           

                            italgasPlantDto.TooltipStatoComunicazione = "L'impianto ha ricevuto oggi dati invalidi";

                            break;

                        case EnumEsitoUltimaComunicazione.NonEffettuataOggi:

                            if (DateTime.TryParse(italgasPlants.UltimoCollegamento, out DateTime ddhhUC))

                            {

                                // Calcola il numero di giorni dall'ultima comunicazione arrotondando il valore (3,76 lo fa diventare 4 giorni)

                                giorni = (int)Math.Round(System.DateTime.Today.Subtract(ddhhUC).TotalDays, 0);

                                italgasPlantDto.TooltipStatoComunicazione = giorni > 1 ? String.Format("L'impianto non ha comunicato per {0} giorni", giorni) : "L'impianto non ha comunicato per 1 giorno";

                                if (giorni <= 3)

                                {

                                    italgasPlantDto.StatoComunicazione = 0; // "~/images/imgGreen.png"   

                                }

                                else if (giorni > 3 && giorni <= 15)

                                {

                                    italgasPlantDto.StatoComunicazione = 3; // "~/images/imgViolet.png"  

                                    italgasPlantDto.TooltipStatoComunicazione = "L'impianto non comunica da oltre 3 giorni";

                                }

                                else if (giorni > 15)

                                {

                                    italgasPlantDto.StatoComunicazione = 4; // "~/images/imgRed.png"  

                                    italgasPlantDto.TooltipStatoComunicazione = "L'impianto non comunica da oltre 15 giorni";

                                }

                            }

                            else

                            {

                                italgasPlantDto.StatoComunicazione = 4; // "~/images/imgRed.png" 

                                italgasPlantDto.TooltipStatoComunicazione = "Nessun dato ricevuto oggi";

                            }

                            break;

                        case EnumEsitoUltimaComunicazione.MaiComunicato:

                            // Dati ricevuti oggi invalidi

                            italgasPlantDto.StatoComunicazione = 4; // "~/images/imgViolet.png"                                           

                            italgasPlantDto.TooltipStatoComunicazione = "L'impianto non ha mai comunicato";

                            break;

                        default:

                            break;

                    }

                    allItalgasPlants.Add(italgasPlantDto);

                }

            }

            return allItalgasPlants.OrderBy(p => p.LDN);

        }

The Data Tranfer Object returned by the API is this:

    public class ItalgasPlantDto

    {

        public Guid GuidImpianto { get; set; }

        public int StatoComunicazione { get; set; }

        public string TooltipStatoComunicazione { get; set; }

        public int StatoAllarmi { get; set; }

        public string TooltipStatoAllarmi { get; set; }

        public string Gruppo { get; set; }

        public string Nome { get; set; }

        public string Pdr { get; set; }

        public string LDN { get; set; }

        public string Tipo { get; set; }

        public string VolumiConvertiti { get; set; }

        public string VolumiMisurati { get; set; }

        public string MatricolaContatore { get; set; }

        public string UltimoCollegamento { get; set; }

        public string QualitaSegnale { get; set; }

        public string LivelloSegnale { get; set; }

        public string BatteriaMisura { get; set; }

        public string VersioneFirmware { get; set; }                

    }

On the database I have about 1700 plants records in test environment, but in the future we'll have much more plants. 

Can you help me?

Thanks in advance.

[Thiyagu Subramani]

Hi CLAUDIO, 

Thanks for contacting Syncfusion support. 

From your shared information we confirm that you want to use infinite scrolling and pager dropdown in same time. But by default in EJ2 Grid there is no feasibility to use allowPaging property and pager dropdown with enableInfiniteScrolling in same time. Its default behavior of current Grid architecture. 

Please get back to us, if you need any further assistance. 

Regards, 

Thiyagu S