Your Privacy Matters: We use our own and third-party cookies to improve your experience on our website. By continuing to use the website we understand that you accept their use. Cookie Policy
815
igx-hierarchical-grid Data Disappears within nested grid
posted

We have a Service calling a Webapi method after a while the child grid data is no longer bound. Is there something I am missing in my grid.

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.buildUrl(dataState));
}

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}`;
}
}

 

<div class="grid__wrapper">
<igx-hierarchical-grid #hGrid [primaryKey]="'JobInfoID'" [autoGenerate]="false" [height]="'600px'" [width]="'1390px'" [allowFiltering]="true">
<igx-column field="JobInfoID" [hidden]="true" [dataType]="'number'"></igx-column>
<igx-column field="JobNumber" header="Job Number" [editable]="false" [dataType]="'string'"></igx-column>
<igx-column field="JobName" header="Job Name" [editable]="true" [dataType]="'string'"></igx-column>
<igx-column field="ClientName" header="Client Name" [editable]="true" [dataType]="'string'"></igx-column>
<igx-column field="StartDate" header="Start Date" [editable]="true" [dataType]="'date'"></igx-column>
<igx-column field="Status" header="Status" [editable]="true" [dataType]="'string'"></igx-column>
<igx-row-island [key]="'Floors'" [autoGenerate]="false" (onGridCreated)="gridCreated($event, 'JobInfoFloorID')" [width]="'100%'">
<igx-column field="JobInfoFloorID" [hidden]="true" [dataType]="'number'"></igx-column>
<igx-column field="Sequence" header="Sequence" [editable]="true" [dataType]="'number'"></igx-column>
<igx-column field="FloorName" header="Floor" [editable]="true" [dataType]="'string'"></igx-column>
<igx-column field="Area" header="Area" [editable]="true" [dataType]="'number'"></igx-column>
<igx-column field="StartDate" header="Start Date" [editable]="true" [dataType]="'date'"></igx-column>
<igx-column field="LinearFootHandrail" header="LF Handrail" [editable]="true" [dataType]="'number'"></igx-column>
<igx-column field="ClearStoryHeight" header="C.S.H" [editable]="true" [dataType]="'string'"></igx-column>
<igx-column field="Days" header="Days" [editable]="true" [dataType]="'number'"></igx-column>
<igx-column field="LinearFootBeam" header="L.F. Beam" [editable]="true" [dataType]="'number'"></igx-column>
<igx-column field="LinearFootHandrail" header="L.F. Beam" [editable]="true" [dataType]="'number'"></igx-column>
<igx-column field="NoOfDrops" header="# Drops" [editable]="true" [dataType]="'number'"></igx-column>
</igx-row-island>
</igx-hierarchical-grid>
</div>
import { AfterViewInit, Component, ViewChild } from "@angular/core";
import {
IGridCreatedEventArgs,
IgxHierarchicalGridComponent,
IgxRowIslandComponent
} from "igniteui-angular";
import { IDataState, RemoteLoDService } from "../salesgridui/services/TOD.service";

@Component({
providers: [RemoteLoDService],
selector: "salesgridui",
styleUrls: ["./salesgridui.component.scss"],
templateUrl: "./salesgridui.component.html"
})
export class SalesGridUIComponent implements AfterViewInit {
@ViewChild("hGrid", { static: true })
public hGrid: IgxHierarchicalGridComponent;

constructor(private remoteService: RemoteLoDService) { }

public ngAfterViewInit() {
const dataState: IDataState = {
key: "JobInfoFullCollection",
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 dateFormatter(val: string) {
return new Intl.DateTimeFormat("en-US").format(new Date(val));
}

public gridCreated(event: IGridCreatedEventArgs, _parentKey: string) {
const dataState: IDataState = {
key: event.owner.key,
parentID: event.parentID,
parentKey: _parentKey,
rootLevel: false
};
event.grid.isLoading = true;
this.remoteService.getData(dataState).subscribe(
(data) => {
event.grid.isLoading = false;
event.grid.data = data;
event.grid.cdr.detectChanges();
},
(error) => {
event.grid.emptyGridMessage = error.message;
event.grid.isLoading = false;
event.grid.cdr.detectChanges();
}
);
}
}