Any community tips or tricks for: Grid?

[vitorioParticipant]

What’s the correct way to bind jqxGrid to an Angular service that returns data asynchronously?

[adminKeymaster]

Hi,

The solution is: Angular service returns an Observable

Component subscribes (or uses async pipe) and, when data arrives, creates/updates the jqxGrid dataAdapter and calls updatebounddata (or sets source.localdata + refresh).

Subscribe and bind localdata

Service
// data.service.ts
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';

@Injectable({ providedIn: 'root' })
export class DataService {
  constructor(private http: HttpClient) {}

  getOrders(): Observable<any[]> {
    return this.http.get<any[]>('/api/orders');
  }
}

Component
// orders.component.ts
import { Component, AfterViewInit, ViewChild } from '@angular/core';
import { DataService } from './data.service';
import { jqxGridComponent } from 'jqwidgets-ng/jqxgrid';

declare const jqx: any;

@Component({
  selector: 'app-orders',
  template: 

`
})
export class OrdersComponent implements AfterViewInit {
@ViewChild(‘grid’, { static: false }) grid!: jqxGridComponent;

columns = [
{ text: ‘ID’, datafield: ‘id’, width: 80 },
{ text: ‘Customer’, datafield: ‘customer’ },
{ text: ‘Total’, datafield: ‘total’, cellsformat: ‘c2’, width: 120 }
];

private source: any = {
datatype: ‘array’,
localdata: [],
datafields: [
{ name: ‘id’, type: ‘number’ },
{ name: ‘customer’, type: ‘string’ },
{ name: ‘total’, type: ‘number’ }
]
};

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

constructor(private dataService: DataService) {}

ngAfterViewInit(): void {
this.dataService.getOrders().subscribe({
next: (rows) => {
this.source.localdata = rows;
// rebuild adapter (safe, simple)
this.dataAdapter = new jqx.dataAdapter(this.source);

// ensure grid picks it up
this.grid.source(this.dataAdapter);
this.grid.updatebounddata(‘data’);
},
error: (err) => console.error(‘Failed to load orders’, err)
});
}
}`

jqxGrid needs its data source available when binding. When data arrives later, you reassign localdata + refresh the binding.

Best regards,
Peter Stoev

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

[Author]

Posts