Adding Child Row To igx-row-island

815

Eric Rupp posted over 5 years ago

I am in the process of wrapping up the binding to my web api service. When I updated my local copy to include an add sub grid row child. The parent grid responds with the No Data error:

grid HTML

<div class="grid__wrapper">

 <igx-hierarchical-grid #hGrid [primaryKey]="'JobInfoID'" [autoGenerate]="false" [height]="'600px'" [width]="'100%'" [rowEditable]="true">

 <igx-column field="JobInfoID" [hidden]="true"></igx-column>

 <igx-column field="JobNumber" [editable]="true"></igx-column>

 <igx-column field="JobName" [editable]="true"></igx-column>

 <igx-column field="ClientName" [editable]="true"></igx-column>

 <igx-column field="StartDate" [editable]="true"></igx-column>

 <igx-row-island [key]="'Floors'" [primaryKey]="'JobInfoFloorID'" [autoGenerate]="false" (onGridCreated)="gridCreated($event, 'JobInfoFloorID')" [width]="'100%'">

 <igx-column field="JobInfoFloorID" [editable]="true"></igx-column>

 <igx-column field="FloorName" [editable]="true"></igx-column>

 <igx-column field="Area" [editable]="true"></igx-column>

 <igx-column field="LinearFootBeam" [editable]="true"></igx-column>
 
 <igx-column [width]="'100px'">
 <ng-template igxCell let-cell="cell">
 <button igxButton="icon" (click)="addChildRow(cell.cellID,cell.grid)">
 <igx-icon>add</igx-icon>
 </button>
 </ng-template>
 </igx-column>

 </igx-row-island>

 </igx-hierarchical-grid>
 <div class="buttons-row">
 <button igxButton (click)="addRow()">Add Job</button>
</div>

</div>
TYPESCRIPT FILE
import { AfterViewInit, Component, ViewChild } from "@angular/core";
import { generateRandomInteger} from "../../utils";
import {
 IGridCreatedEventArgs,
 IgxHierarchicalGridComponent,
 IgxRowIslandComponent
} from "igniteui-angular";
import { IDataState, RemoteLoDService } from "../services/remote-lod.service";

@Component({
 providers: [RemoteLoDService],
 selector: "app-hierarchical-grid-lod",
 styleUrls: ["./hierarchical-grid-lod.component.scss"],
 templateUrl: "./hierarchical-grid-lod.component.html"
})
export class HierarchicalGridLoDSampleComponent implements AfterViewInit {
 @ViewChild("hGrid", { static: true })

 private editRowID: any;
 public hGrid: IgxHierarchicalGridComponent;
private childGrids = [];

 constructor(private remoteService: RemoteLoDService) { }

public ngAfterViewInit() {

 const dataState: IDataState = {

 key: "JobInfoID",

 parentID: "",

 parentKey: "",

 rootLevel: true

 };

 this.hGrid.isLoading = true;

 this.remoteService.getData(dataState).subscribe(

 (data) => {

 this.hGrid.isLoading = false;

 this.hGrid.data = data;

 this.hGrid.cdr.detectChanges();

 },

 (error) => {

 this.hGrid.emptyGridMessage = error.message;

 this.hGrid.isLoading = false;

 this.hGrid.cdr.detectChanges();

 });
}
public undo() {
 this.hGrid.transactions.undo();
}

public redo() {
 this.hGrid.transactions.redo();
}

public addRow() {
 this.hGrid.addRow({
 JobInfoID: generateRandomInteger(1, 10),
 JobNumber: "7777777777",
 JobName: (generateRandomInteger(1, 10) * 10).toString() + " Job Name.",
 ClientName: (generateRandomInteger(1, 10) * 10).toString() + " Client Name.",
 StartDate: new Date(generateRandomInteger(2019, 2050),
 generateRandomInteger(0, 11), generateRandomInteger(1, 25))
 .toISOString().slice(0, 10),
 });
}
public addChildRow() {
 let childInfo = this.childGrids.find((item) => item.parentID === this.editRowID);
 if(!childInfo) {
 // toggle parent to create child
 (this.hGrid.getRowByKey(this.editRowID) as any).toggle(); 
 childInfo = this.childGrids.find((item) => item.parentID === this.editRowID);
 }
 const record = {
 JobInfoFloorID:
 childInfo.child.data[
 childInfo.child.data.length - 1
 ].ID + 1,
 FloorName: "Floor " + childInfo.child.data[childInfo.child.data.length -1].ID + 1,
 Area: 0,
 LinearFootBeam: 0
 };
 childInfo.child.addRow(record);
}

public get undoEnabled(): boolean {
 return this.hGrid.transactions.canUndo;
}

public get redoEnabled(): boolean {
 return this.hGrid.transactions.canRedo;
}

 public dateFormatter(val: string) {

 return new Intl.DateTimeFormat("en-US").format(new Date(val));

 }

 public gridCreated(event: IGridCreatedEventArgs, _parentKey: string) {}
}
Service
import { HttpClient } from "@angular/common/http";

import { Injectable } from "@angular/core";

import { Observable } from "rxjs";

import { map } from "rxjs/operators";

interface IoDataResponse {

 value: any[];

}

export interface IDataState {

 key: string;

 parentID: any;

 parentKey: string;

 rootLevel: boolean;

}

@Injectable()

export class RemoteLoDService {

 public url = `localhost:44392/.../SalesmanJobInfo`;

 constructor(private http: HttpClient) { }

 public getData(dataState?: IDataState): Observable<any> {

 return this.http.get(this.url);

 }

 public buildUrl(dataState: IDataState) {

 let qS = "";

 if (dataState) {

 qS += `${dataState.key}?`;

 if (!dataState.rootLevel) {

 if (typeof dataState.parentID === "string") {

 qS += `$filter=${dataState.parentKey} eq '${dataState.parentID}'`;

 } else {

 qS += `$filter=${dataState.parentKey} eq ${dataState.parentID}`;

 }

 }

 }

 return `${this.url}${qS}`;

 }

}
JSON
import { HttpClient } from "@angular/common/http";

import { Injectable } from "@angular/core";

import { Observable } from "rxjs";

import { map } from "rxjs/operators";

interface IoDataResponse {

 value: any[];

}

export interface IDataState {

 key: string;

 parentID: any;

 parentKey: string;

 rootLevel: boolean;

}

@Injectable()

export class RemoteLoDService {

 public url = `localhost:44392/.../SalesmanJobInfo`;

 constructor(private http: HttpClient) { }

 public getData(dataState?: IDataState): Observable<any> {

 return this.http.get(this.url);

 }

 public buildUrl(dataState: IDataState) {

 let qS = "";

 if (dataState) {

 qS += `${dataState.key}?`;

 if (!dataState.rootLevel) {

 if (typeof dataState.parentID === "string") {

 qS += `$filter=${dataState.parentKey} eq '${dataState.parentID}'`;

 } else {

 qS += `$filter=${dataState.parentKey} eq ${dataState.parentID}`;

 }

 }

 }

 return `${this.url}${qS}`;

 }

}

275

Offline Svetoslav Krastev posted over 5 years ago

Hello Eric,

From what I can see, on "click" you execute the "addChildRow(cell.cellID,cell.grid)" method, but if I am understanding correctly, I cannot see in the implementation of that method any usage of these arguments.
The implementation of the "addChildRow" method you have provided seems to use 'this.editRowID', but I also cannot see where you set it to the row you are currently editing.
Could it be it, that is creating an issue when trying to add a child, since it could not find the correct child to which to add the row?

Also I noticed that in your service when you execute your GET request, you do not use the 'dataState' to build your URL using the 'buildUrl()' method in your service.
Should it directly call send the request to the url property you have set or you have arguments that should be added as well?

Regards,
Svetoslav
Cancel
Reply

Cancel