Forums Ignite UI for Angular
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
Close
Eric Rupp
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();
}
);
}
}

Parents
No Data
Reply
  • 29417
    Offline posted

    Hello Eric, 

    Thank you for posting in our forum. 

    Could you share some additional details like:

    • Which version of the igniteui-angular package are you currently using?
    • By ‘after a while the child grid data is no longer bound’ do you mean that the data for the child grid is initially bound correctly when receiving the initial response from your service on gridCreated but then is cleared? If so are there any specific user interactions that trigger this behavior (scrolling, expanding/collapsing etc.) or does it happen randomly with no user interaction and no changes in the data? 

    You can refer to the following sample that has a similar setup, however I have not been able to replicate your issue in it:

    https://stackblitz.com/edit/angular-tyjbmq

    Let me know if you are able to replicate it on your side and if not then please feel free to modify the sample to more closely resemble your scenario. 

    I’m looking forward to your reply. 

    Regards,

    Maya Kirova

     

Children