Syncfusion ejs-grid connecting to Firestore Data

Question

I am trying to connect a Syncfusion ejs-grid to Firestore data.

Examples on the Syncfusions sight are outdated and I'm looking for updated examples. Currently, I have this:

  async syncData() {
    console.log('Start Sync Data');
    
    const colRef = await this.afs.collection(`cruises`, ref => ref
      .where('clubId', '==', this.clubId)
      .where('vehClass', '==', 'C4C')
    )
      return colRef.valueChanges({idfield: 'id'}).subscribe((data)  => {
        this.vData = data
      }
    )
  }

I was expecting to get data populated into the ejs-grid, but I get no data at all.

    <ejs-grid [dataSource]='vData' [allowPaging]="true" [allowSorting]="true"
    [allowFiltering]="true" [allowGrouping]="true" [pageSettings]='pageSettings'>
     <e-columns>
         <e-column field='vehicleRego' headerText='Rego' textAlign='Right' width=90></e-column>
         <e-column field='driver' headerText='Full Name' width=120></e-column>
         <e-column field='type' headerText='Type' width=80></e-column>
         <e-column field='title' headerText='Title' textAlign='Right' width=120></e-column>
         <e-column field='location' headerText='Destination' textAlign='Right' width=120></e-column>
         <e-column field='c4cYear' headerText='Year' width=50></e-column>
         <e-column field='cruiseDate' headerText='Start Date' width=120 ></e-column>
         <e-column field='cruiseEndDate' headerText='End Date' width=100 ></e-column>
     </e-columns>
     </ejs-grid>

Any help is greatly appreciated.

Michael

score 0 · Answer 1 · answered Mar 29 '23 at 08:20

So this works...

  public pageSettings: PageSettingsModel;
  public vData: any[] = [];
  data: any;

  // Add ViewChild and GridComponent
  @ViewChild('grid')
  public grid: GridComponent;

  constructor(
    private afs: AngularFirestore,
    private ar: ActivatedRoute
  ) { }

  ngOnInit(): void {
    this.pageSettings = { pageSize: 20 };
  }

  ngAfterViewInit(): void {
      this.syncData()
  }

  async syncData() {
    console.log('Start Sync Data');
    
    const colRef = await this.afs.collection(`cruises`, ref => ref
      .where('clubId', '==', this.clubId)

    )

    colRef.valueChanges().subscribe(mems => {
      this.grid.dataSource = mems;
    })
      
  }

And in the HTML labeled the Grid with #grid and removed the data source from the HTML as it is handled in the function.

Next up, I have to work on converting the Firestore Timestamp to a readable format in the grid.

Syncfusion ejs-grid connecting to Firestore Data

1 Answers1