Hierarchical grid Error
Hello,
after renewing Syncfusion packages to the latest version (16.2.41) hierarchical data structure not working. I can not get even my first grid level. I am getting an error:
My code looks like something like that:
grid.component.ts:
public gridData: DataManager | Object[];
public enableVirtualization: boolean = true;
public childGrid: GridModel;
public childData: Object[] = [];
public primarykey;
public parent;
public childGridLevel: number = 1;
public testArray: Object[] = [];
@Input('GridColumns') GridColumns: any;
ngAfterViewInit() {
this.setGridDataSource();
}
public setGridDataSource() {
if (this.IsHierarchy) {
this.enableVirtualization = false;
this.childData = [];
// Find PrimaryKey and Parent fields names
for (let i in this.GridColumns) {
if (this.GridColumns[i].isPrimaryKey)
this.primaryKey = this.GridColumns[i].[field];
if (this.GridColumns[i].IsParentColumn)
this.parent = this.GridColumns[i].field
}
var angularObj = this;
// Get first level grid (where parent value is null)
this.Service.getDataManager('someUrl').executeQuery(new Query().where(this.parent, "equal", null, true)).then((e: any) => {
// Add additional values for later to add childGrids
for (let k in e.result) {
e.result[k]["NewKeyValue"] = e.result[k][this.primarykey];
e.result[k]["NewKeyValueParent"] = e.result[k][this.parent];
}
this.gridData = this.childData = e.result;
for (let i in e.result) {
if (e.result[i].HasChildren) {
this.childGrid = {
columns: this.GridColumns,
queryString: "NewKeyValue",
detailDataBound: function (args: DetailDataBoundEventArgs) {
angularObj.detailDataBound(args);
}
}
break;
}
}
})
}
}
public detailDataBound(args: DetailDataBoundEventArgs): void {
var grid = (args.detailElement.querySelector('.e-grid') as any).ej2_instances[0];
// Find childGrid query selector name by child grid level
if (this.childGridLevel % 2 == 0) {
this.childGridLevel += 1;
this.makeChildGrid(args.data["NewKeyValue"], grid, false);
}
else
{
this.childGridLevel += 1;
this.makeChildGrid(args.data["NewKeyValueParent"], grid, true);
}
grid.DataSource = this.testArray;
}
public makeChildGrid(idVal, grid, isEven) {
if (isEven) {
this.Service.getDataManager('someUrl').executeQuery(new Query().where(this.parent, "equal", idVal, true)).then((e: any) => {
var testArr: Object[] = [];
testArr = e.result;
for (let k in e.result) {
e.result[k]["NewKeyValue"] = e.result[k][this.parent];
e.result[k]["NewKeyValueParent"] = e.result[k][this.primarykey];
}
this.testArray = testArr;
var angularObj = this;
for (let i in e.result) {
if (e.result[i].HasChildren) {
grid.childGrid = {
columns: this.GridColumns,
queryString: "NewKeyValueParent",
detailDataBound: function (args: DetailDataBoundEventArgs) {
angularObj.detailDataBound(args);
}
}
break;
}
}
});
}
else
{
this.Service.getDataManager('someUrl').executeQuery(new Query().where(this.primaryKey, "equal", idVal, true)).then((e: any) => {
var testArr: Object[] = [];
testArr = e.result;
for (let k in e.result) {
e.result[k]["NewKeyValue"] = e.result[k][this.primarykey];
e.result[k]["NewKeyValueParent"] = e.result[k][this.parent];
}
this.testArray = testArr;
var angularObj = this;
for (let i in e.result) {
if (e.result[i].HasChildren) {
grid.childGrid = {
columns: this.GridColumns,
queryString: "NewKeyValue",
detailDataBound: function (args: DetailDataBoundEventArgs) {
angularObj.detailDataBound(args);
}
}
break;
}
}
});
}
}
grid.component.html:
<ejs-grid #grid
[dataSource]="gridData"
[childGrid]="childGrid"
[enableVirtualization]="enableVirtualization"
[columns]="GridColumns"
(detailDataBound)="detailDataBount($event)"
>
</ejs-grid>
SIGN IN To post a reply.
6 Replies
Hello,
I am trying to get in child grid data all needed parameters. I am executing query like this:
this.Service.getDataManager('someUrl', true)
.executeQuery(this.requestQuery.where(this.fieldName, "equal", idValue, true).requiresCount().page(1, 20))
.then((e: any) => { /* some code */ }
Or other variant:
this.Service.getDataManager('someUrl', true)
.executeQuery(this.requestQuery.where(this.fieldName, "equal", idValue, true).requiresCount().skip(0).take(20))
.then((e: any) => { /* some code */ }
In this case I am getting from WebAPI parameter count and data. I am expecting to get pages in grid pager and to see all data count in it, but I am getting every time only one page with maximum data count 20. What I am doing wrong?
Grid pager:
Data from WebAPI on this request:
In this case I want to have 25 pages and see - 1 of 25 pages (499 items).
Maybe I need to use Pager component instead of using default grid pager?
Also, I did not mentioned it before - I want my data to be loaded dynamically when I choose with page to show.
SIGN IN To post a reply.
