Any tips for dealing with: TreeGrid?

[sandeParticipant]

Is there a recommended method to load hierarchical data asynchronously in jqxTreeGrid in Angular?

[adminKeymaster]

Hi sande,

You can try this approach:

@Component({
  selector: 'app-treegrid-async',
  template: 

`
})
export class TreeGridAsyncComponent implements AfterViewInit {
@ViewChild(‘treeGrid’, { static: false }) treeGrid!: jqxTreeGridComponent;

columns = [
{ text: ‘Name’, dataField: ‘name’, width: 300 },
{ text: ‘Quantity’, dataField: ‘quantity’, cellsAlign: ‘right’, align: ‘right’ }
];

source: any = {
dataType: ‘json’,
dataFields: [
{ name: ‘id’, type: ‘number’ },
{ name: ‘name’, type: ‘string’ },
{ name: ‘quantity’, type: ‘number’ },
{ name: ‘parentid’, type: ‘number’ }
],
hierarchy: {
keyDataField: { name: ‘id’ },
parentDataField: { name: ‘parentid’ }
},
id: ‘id’
};

dataAdapter = new jqx.dataAdapter(this.source);

ngAfterViewInit(): void {
// Initial load for root level
this.loadData(null, (data) => {
this.treeGrid.source({ …this.source, localData: data });
});
}

// Called automatically when a row is expanded
virtualModeCreateRecords = (expandedRecord: any, done: (records: any[]) => void): void => {
this.loadData(expandedRecord ? expandedRecord.id : null, done);
};

// Simulate async data load
loadData(parentId: number | null, callback: (data: any[]) => void): void {
setTimeout(() => {
// Example: Replace this with HTTP request
const mockData = [
{ id: 1, name: ‘Beverages’, quantity: 10, parentid: null },
{ id: 2, name: ‘Coffee’, quantity: 5, parentid: 1 },
{ id: 3, name: ‘Tea’, quantity: 7, parentid: 1 }
];
const filtered = mockData.filter(item => item.parentid === parentId);
callback(filtered);
}, 500); // Simulate network delay
}
}`

virtualModeCreateRecords is called every time the TreeGrid needs to render child rows.
It Passes the expanded record so you know which children to load and you call done(records) with the array of children once data is ready.

Async loading

Here we use setTimeout to simulate an API call. In a real app, you’d use Angular’s HttpClient to fetch from a server.

Best regards,
Peter Stoev

jQWidgets Team
https://www.jqwidgets.com/

[Author]

Posts