P-Table on dialog shows rows but no data

UI Components for Angular
Post Reply
bubk
Posts: 3
Joined: 31 Jan 2018, 16:43

06 Feb 2018, 19:35

I have a page with a p-table on it, after I select a row I press a button to display a modal dialog also with a p-table on it. I load the data on the dialog's p-table base on the row selected. The table on the dialog does actually show the correct number of rows, but no data in the rows. Not sure why. Below I am including the html code and typescript code
for the page. Any help would be appreciated.

Thanks,
Kent

<div id="container">
<div id="content">
<p-table [value] = "priMaterial" selectionMode="single" [(selection)]="selectedItem"
(onRowSelect)="onRowSelect($event)" (onRowUnselect)="onRowUnselect($event)" [loading]="loading">
<ng-template pTemplate="header">
<tr>
<th style="width:50px">+/-</th>
<th>Item #</th>
<th style="width:100px">Type</th>
<th style="width:75px">Select</th>
</tr>
</ng-template>
<ng-template pTemplate="body" let-PriMaterial>
<tr [pSelectableRow]="PriMaterial">
<td style="text-align: center">{{PriMaterial.AddRemove}}</td>
<td>{{PriMaterial.ItemNumber}}</td>
<td style="text-align: center">{{PriMaterial.ItemType}}</td>
<td style="text-align: center">{{PriMaterial.Selected}}</td>
</tr>
</ng-template>
</p-table>
</div>
<div id="buttonbar">
<table width="100%">
<tr>
<td><input class="keyboard" type="text" id="txtLicencePlate" clientidmode="Static" style="width:115px"/><img id="icon" src="../assets/keyboard.png"></td>
</tr>
</table>
<table width="100%">
<tr>
<td><button class="stdbutton" id="btnAdd" (click)="btnAdd_Click()">Add</button></td>
</tr>
<tr>
<td><button class="stdbutton" id="btnRemove" (click)="btnRemove_Click()">Remove</button></td>
</tr>
<tr>
<td><button class="stdbutton" id="btnRestore" (click)="btnRestore_Click()">Restore</button></td>
</tr>
<tr>
<td><button class="stdbutton" id="btnAltMaterial" (click)="btnAltMaterial_Click()">Edit Alt Material</button></td>
</tr>
<tr>
<td><button class="stdbutton" id="btnJobInfo" (click)="btnJobInfo_Click()">Switch Pocket Grid</button></td>
</tr>
<tr>
<td><button class="stdbutton" id="btnClose" (click)="btnClose_Click();">Close</button></td>
</tr>
</table>
</div>
</div>

<p-dialog header="Edit Alt Material" [(visible)]="display" modal="modal" width="650" closable="false">
<div class="modal-body" style="width:450px">
<p-table [value]="altMaterial" selectionMode="single" [(selection)]="selectedAltItem"
(onRowSelect)="onRowAltSelect($event)">
<ng-template pTemplate="header">
<tr>
<th style="width:50px">+/-</th>
<th>Item #</th>
<th style="width:100px">Type</th>
<th style="width:75px">Select</th>
</tr>
</ng-template>
<ng-template pTemplate="body" let-AltMaterial>
<tr [pSelectableRow]="AltMaterial">
<td style="text-align: center">{{altMaterial.AddRemove}}</td>
<td>{{altMaterial.ItemNumber}}</td>
<td style="text-align: center">{{altMaterial.ItemType}}</td>
<td style="text-align: center">{{altMaterial.Selected}}</td>
</tr>
</ng-template>
</p-table>
</div>
<div class="modal-buttonbar">
<table width="100%">
<tr>
<td><button id="btnAddAlt" class="stdbutton" (click)="btnAddAlt_Click>Add">Add</button></td>
</tr>
<tr>
<td><button id="btnRemoveAlt" class="stdbutton" (click)="btnRemoveAlt_Click>Add">Remove</button></td>
</tr>
<tr>
<td><button id="btnAltClose" class="stdbutton" (click)="btnAltClose_Click>Add">Close</button></td>
</tr>
</table>
</div>
</p-dialog>

import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';
import { Observable } from 'rxjs';

import { DatastorageService } from '../services/datastorage.service';
import { AdvpocketgridService } from '../services/advpocketgrid.service';

import { JobInfo } from '../models/jobInfo';
import { Material } from '../models/material';

import { TableModule } from 'primeng/table';
import { DialogModule } from 'primeng/dialog';
import { PriMaterial } from '../models/primaterial';
import { AltMaterial } from '../models/altmaterial';
import { elementAt } from 'rxjs/operator/elementAt';

type DictionaryItem = [string, AltMaterial[]]

@Component({
selector: 'app-home',
templateUrl: './home.component.html',
styleUrls: ['./home.component.css']
})
export class HomeComponent implements OnInit {
jobInfo: JobInfo;
routingStepPass: Observable<any>;
pocketGrid: Material[];
priMaterial: PriMaterial[] = [];
selectedItem: PriMaterial;
cols: any[];
dicAltMaterial: Array<DictionaryItem> = [];
display: boolean = false;
altMaterial: AltMaterial[] = [];
selectedAltItem: AltMaterial;

constructor(private dataStorageService: DatastorageService,
private advPocketGridService: AdvpocketgridService) {
}

ngOnInit() {
this.jobInfo = this.dataStorageService.getJobInfo();
// alert(this.jobInfo.routingStepCode);
this.LoadPage();
}

private LoadPage(){
//if pass is zero, means that request came from shopterm, so PFTaskcode should not be null, I hope
if (this.jobInfo.pass == 0){
this.routingStepPass = this.advPocketGridService.GetRoutingstepCodePass("1.01-2-1473612",this.jobInfo.costCenter);
this.routingStepPass.subscribe(value =>
{this.jobInfo.routingStepCode = value.RoutingStepcode;
this.jobInfo.pass = value.Pass;
});
} else {

}

//get the pocket grid for job
this.advPocketGridService.GetPocketGridMaterial(this.jobInfo.job,this.jobInfo.cellVersion, this.jobInfo.routingStepCode, this.jobInfo.pass.toString())
.subscribe(pocketgridItems => {
this.pocketGrid = pocketgridItems;
this.pocketGrid.forEach(element => {
if (element.PrimaryItemSID == 0){
let matl = new PriMaterial();
matl.AddRemove = element.AddRemove;
matl.Id = element.Id;
matl.ItemNumber = element.ItemNumber;
matl.ItemType = element.ItemType;
matl.PrimacItemNumberSID = element.PrimacItemNoSID;
matl.ComponentAddRemoveSID = element.ComponentAddRemoveSID;

this.priMaterial.push(matl);
};
}
);
this.priMaterial.forEach(element =>{
let aMaterial: Material[] =this.pocketGrid.filter(x => x.PrimaryItemSID.toString() == element.PrimacItemNumberSID);
let altMaterial: AltMaterial[] = [];

aMaterial.forEach(element => {
let amatl = new AltMaterial();
amatl.AddRemove = element.AddRemove;
amatl.ItemNumber = element.ItemNumber;
amatl.ItemType = element.ItemType;
amatl.PrimacItemNumberSID = element.PrimacItemNoSID;
amatl.PrimaryItemSID = element.PrimaryItemSID;
amatl.CompPrimacAltSID = element.CompPrimacAltSID;

altMaterial.push(amatl);
});

if(altMaterial.length > 0){
// // this.dicAltMatl.add(element.PrimacItemNumberSID, altMaterial);
let di: DictionaryItem
di = [element.PrimacItemNumberSID, altMaterial];
// this.arrAltMaterial.push(altMaterial);
this.dicAltMaterial.push(di);
element.ItemNumber = element.ItemNumber + "*"
}
})
}


);


}

onRowSelect(event){
// alert(event.data.ItemNumber)
// alert(this.selectedItem.ItemNumber)
event.data.Selected = "X";

this.priMaterial.forEach(element => {
if(element.Id != event.data.Id)
{
element.Selected = "";
}
});
}

onRowUnselect(event){
event.data.Selected = "";
}

btnAltMaterial_Click(){
// alert("Edit Alt Material");
let altMtl: DictionaryItem = this.dicAltMaterial.find(x => x[0] == this.selectedItem.PrimacItemNumberSID);
// alert(this.selectedItem.PrimacItemNumberSID)
// alert(altMtl[1][0].ItemNumber)
this.altMaterial = altMtl[1];
this.display = true;
}

onRowAltSelect(event){
// alert(event.data.ItemNumber)
// alert(this.selectedItem.ItemNumber)
// event.data.Selected = "X";

this.altMaterial.forEach(element => {
if(element.PrimacItemNumberSID != event.data.PrimacItemNumberSID)
{
element.Selected = "";
}
});
}

}

paulswan
Posts: 94
Joined: 27 Apr 2017, 08:19

07 Feb 2018, 02:45

@bubk
Please put your code inside a "code" block so people can read it?

bubk
Posts: 3
Joined: 31 Jan 2018, 16:43

07 Feb 2018, 16:41

Code in code block as requested, sorry first time posting to forum.

Code: Select all

<div id="container">
    <div id="content">
    <p-table [value] = "priMaterial" selectionMode="single" [(selection)]="selectedItem" 
        (onRowSelect)="onRowSelect($event)" (onRowUnselect)="onRowUnselect($event)" [loading]="loading">
        <ng-template pTemplate="header">
            <tr>
                <th style="width:50px">+/-</th>
                <th>Item #</th>
                <th style="width:100px">Type</th>
                <th style="width:75px">Select</th>
            </tr>
        </ng-template>
        <ng-template pTemplate="body" let-PriMaterial>
            <tr [pSelectableRow]="PriMaterial">
                <td style="text-align: center">{{PriMaterial.AddRemove}}</td>
                <td>{{PriMaterial.ItemNumber}}</td>
                <td style="text-align: center">{{PriMaterial.ItemType}}</td>
                <td style="text-align: center">{{PriMaterial.Selected}}</td>
            </tr>
        </ng-template>
    </p-table>
    </div>
    <div id="buttonbar">
    <table width="100%">
        <tr>
            <td><input class="keyboard" type="text" id="txtLicencePlate" clientidmode="Static" style="width:115px"/><img id="icon" src="../assets/keyboard.png"></td>
        </tr>
    </table>
    <table width="100%">
        <tr>
            <td><button class="stdbutton" id="btnAdd" (click)="btnAdd_Click()">Add</button></td>
        </tr>
        <tr>
            <td><button class="stdbutton" id="btnRemove" (click)="btnRemove_Click()">Remove</button></td>
        </tr>
        <tr>
            <td><button class="stdbutton" id="btnRestore" (click)="btnRestore_Click()">Restore</button></td>
        </tr>
        <tr>
            <td><button class="stdbutton" id="btnAltMaterial" (click)="btnAltMaterial_Click()">Edit Alt Material</button></td>
        </tr>
        <tr>
            <td><button class="stdbutton" id="btnJobInfo" (click)="btnJobInfo_Click()">Switch Pocket Grid</button></td>
        </tr>
        <tr>
            <td><button class="stdbutton" id="btnClose" (click)="btnClose_Click();">Close</button></td>
        </tr>
    </table>
    </div>
</div>

<p-dialog header="Edit Alt Material" [(visible)]="display" modal="modal" width="650" closable="false">
    <div class="modal-body" style="width:450px">
        <p-table [value]="altMaterial" selectionMode="single" [(selection)]="selectedAltItem" 
        (onRowSelect)="onRowAltSelect($event)">
            <ng-template pTemplate="header">
                <tr>
                    <th style="width:50px">+/-</th>
                    <th>Item #</th>
                    <th style="width:100px">Type</th>
                    <th style="width:75px">Select</th>
                </tr>
            </ng-template>
            <ng-template pTemplate="body" let-AltMaterial>
                <tr [pSelectableRow]="AltMaterial">
                    <td style="text-align: center">{{altMaterial.AddRemove}}</td>
                    <td>{{altMaterial.ItemNumber}}</td>
                    <td style="text-align: center">{{altMaterial.ItemType}}</td>
                    <td style="text-align: center">{{altMaterial.Selected}}</td>
                </tr>
            </ng-template>
        </p-table>
    </div>
    <div class="modal-buttonbar">
        <table width="100%">
            <tr>
                <td><button id="btnAddAlt" class="stdbutton" (click)="btnAddAlt_Click>Add">Add</button></td>
            </tr>
            <tr>
                <td><button id="btnRemoveAlt" class="stdbutton" (click)="btnRemoveAlt_Click>Add">Remove</button></td>
            </tr>
            <tr>
                <td><button id="btnAltClose" class="stdbutton" (click)="btnAltClose_Click>Add">Close</button></td>
            </tr>
        </table>
    </div>
</p-dialog>
/code]

[code]
import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';
import { Observable } from 'rxjs';

import { DatastorageService } from '../services/datastorage.service';
import { AdvpocketgridService } from '../services/advpocketgrid.service';

import { JobInfo } from '../models/jobInfo';
import { Material } from '../models/material';

import { TableModule } from 'primeng/table';
import { DialogModule } from 'primeng/dialog';
import { PriMaterial } from '../models/primaterial';
import { AltMaterial } from '../models/altmaterial';
import { elementAt } from 'rxjs/operator/elementAt'; 

type DictionaryItem = [string, AltMaterial[]]

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.css']
})
export class HomeComponent implements OnInit {
  jobInfo: JobInfo;
  routingStepPass: Observable<any>;
  pocketGrid: Material[];
  priMaterial: PriMaterial[] = [];
  selectedItem: PriMaterial;
  cols: any[];
  dicAltMaterial: Array<DictionaryItem> = [];
  display: boolean = false;
  altMaterial: AltMaterial[] = [];
  selectedAltItem: AltMaterial;
  
  constructor(private dataStorageService: DatastorageService,
    private advPocketGridService: AdvpocketgridService) {
   }

  ngOnInit() {
    this.jobInfo = this.dataStorageService.getJobInfo();
    // alert(this.jobInfo.routingStepCode);
    this.LoadPage();
  }

  private LoadPage(){
    //if pass is zero, means that request came from shopterm, so PFTaskcode should not be null, I hope  
    if (this.jobInfo.pass == 0){
          this.routingStepPass = this.advPocketGridService.GetRoutingstepCodePass("1.01-2-1473612",this.jobInfo.costCenter);
          this.routingStepPass.subscribe(value =>
          {this.jobInfo.routingStepCode = value.RoutingStepcode;
            this.jobInfo.pass = value.Pass;
          }); 
      } else {

      }

      //get the pocket grid for job
      this.advPocketGridService.GetPocketGridMaterial(this.jobInfo.job,this.jobInfo.cellVersion, this.jobInfo.routingStepCode, this.jobInfo.pass.toString())
      .subscribe(pocketgridItems => {
        this.pocketGrid = pocketgridItems;
        this.pocketGrid.forEach(element => {
          if (element.PrimaryItemSID == 0){
            let matl = new PriMaterial();
            matl.AddRemove = element.AddRemove;
            matl.Id = element.Id;
            matl.ItemNumber = element.ItemNumber;
            matl.ItemType = element.ItemType;
            matl.PrimacItemNumberSID = element.PrimacItemNoSID;
            matl.ComponentAddRemoveSID = element.ComponentAddRemoveSID;

            this.priMaterial.push(matl);
          };
        }
      );
        this.priMaterial.forEach(element =>{
          let aMaterial: Material[] =this.pocketGrid.filter(x => x.PrimaryItemSID.toString() == element.PrimacItemNumberSID);
          let altMaterial: AltMaterial[] = [];

          aMaterial.forEach(element => {
            let amatl = new AltMaterial();
            amatl.AddRemove = element.AddRemove;
            amatl.ItemNumber = element.ItemNumber;
            amatl.ItemType = element.ItemType;
            amatl.PrimacItemNumberSID = element.PrimacItemNoSID;
            amatl.PrimaryItemSID = element.PrimaryItemSID;
            amatl.CompPrimacAltSID = element.CompPrimacAltSID;

            altMaterial.push(amatl);
          });

          if(altMaterial.length > 0){
          //   // this.dicAltMatl.add(element.PrimacItemNumberSID, altMaterial);
            let di: DictionaryItem
            di = [element.PrimacItemNumberSID, altMaterial];
            // this.arrAltMaterial.push(altMaterial);
            this.dicAltMaterial.push(di);
            element.ItemNumber = element.ItemNumber + "*"
          }
        })
      }


      );


  }

  onRowSelect(event){
    // alert(event.data.ItemNumber)
    // alert(this.selectedItem.ItemNumber)
    event.data.Selected = "X";

    this.priMaterial.forEach(element => {
      if(element.Id != event.data.Id)
      {
        element.Selected = "";
      }
    });
  }

  onRowUnselect(event){
    event.data.Selected = "";
  }

  btnAltMaterial_Click(){
    // alert("Edit Alt Material");
    let altMtl: DictionaryItem = this.dicAltMaterial.find(x => x[0] == this.selectedItem.PrimacItemNumberSID);
    // alert(this.selectedItem.PrimacItemNumberSID)
    // alert(altMtl[1][0].ItemNumber)
    this.altMaterial = altMtl[1];
    this.display = true;
  }

  onRowAltSelect(event){
    // alert(event.data.ItemNumber)
    // alert(this.selectedItem.ItemNumber)
    // event.data.Selected = "X";

    this.altMaterial.forEach(element => {
      if(element.PrimacItemNumberSID != event.data.PrimacItemNumberSID)
      {
        element.Selected = "";
      }
    });
  }

}


bubk
Posts: 3
Joined: 31 Jan 2018, 16:43

21 Feb 2018, 16:31

finally figured it out, case sensitive issue, when populating my column in my .html I had

Code: Select all

{{altMaterial.column-name}} instead of {{AltMaterial.column-name}}

Post Reply
  • Information
  • Who is online

    Users browsing this forum: No registered users and 2 guests