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 = "";
}
});
}
}
P-Table on dialog shows rows but no data
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 = "";
}
});
}
}
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}}
-
- Information
-
Who is online
Users browsing this forum: No registered users and 5 guests