igx-hierarchical-grid Data Disappears within nested grid

815

Eric Rupp posted over 5 years ago

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

815

Offline Eric Rupp posted over 5 years ago in reply to Eric Rupp

Doesn't look like Stack Blitz has a save feature essentialy I update the service call, the view, and the control module:

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 = `toddev.titanformwork.com/.../`;

constructor(private http: HttpClient) { }

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

return this.http.get(this.buildUrl(dataState)).pipe(

map((response: IoDataResponse) => response.value)

);

}

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

}

}

<div class="grid__wrapper">

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

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

<igx-column field="SequenceNumber"></igx-column>

<igx-column field="JobNumber"></igx-column>

<igx-column field="JobName"></igx-column>

<igx-column field="BusinessUnitID"></igx-column>

<igx-column field="ClientName"></igx-column>

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

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

<igx-column field="Name"></igx-column>

<igx-column field="FloorType"></igx-column>

<igx-column field="NetAreaInSqFt"></igx-column>

<igx-column field="LinearFootHandrail"></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 "../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 })

public hGrid: IgxHierarchicalGridComponent;

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 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();

}

);

}

}
Cancel
Reply

Cancel
815

Offline Eric Rupp posted over 5 years ago in reply to Maya Kirova

Hello Maya,

I updated the sample to use my service endpoint but now I cannot get the grid to load:

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

Regards,

Eric
Cancel
Reply

Cancel
29417

Offline Maya Kirova posted over 5 years ago
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
Cancel
Reply

Cancel