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.