Fetch data to grid

[Tomasz]

Is possible bind /fetch data to grid with this code:

constructor(private readonly db: AngularFirestore) {

this.itemsColl = db.collection<Item>('product_tbl');

this.items = this.itemsColl.snapshotChanges().pipe(

map(action => action.map(a => {

const data = a.payload.doc.data() as Item;

const id = a.payload.doc.id;

return {id, ...data}

}))

)

}

ngOnInit() {

}

or it is necessary to create a service.

[Thavasianand Sankaranarayanan]

Hi Tomasz, 

Greetings from Syncfusion. 

Grid uses DataManager which supports both RESTful JSON data service and local JavaScript object array binding. We have already discuss about the above mentioned query in the following documentation. 

Link: https://ej2.syncfusion.com/angular/documentation/grid/data-binding/ 

Please get back to us if you need further assistance on this. 

Regards, 

Thavasianand S. 

[Tomasz]

Hello Thavasianand

Before giving this question I read everything from top to bottom a couple of times. What I was referring to, is what I present.

1. Create service and add this code:

import { Injectable } from '@angular/core';

import { AngularFirestore } from 'angularfire2/firestore';

import { Observable } from 'rxjs';

import { map } from 'rxjs/operators'

export interface Item { id: string }

@Injectable({

providedIn: 'root'

})

export class FirestoreDataService {

public Items: Observable;

product: Observable

constructor(public db: AngularFirestore) {

this.product = db.collection('product_tbl').snapshotChanges().pipe(

map(action => action.map(a => {

const data = a.payload.doc.data() as Item;

const id = a.payload.doc.id;

return {id, ...data}

}))

)

}

getProduct(){

return this.product;

}

}

2. In this case "product.component.ts" add this:

import { FirestoreDataService, Item } from '../firestore-data.service'

public ProdItems: Item[];

3. Finaly in ngOnInit create this

ngOnInit(): void {

this.data.getProduct().subscribe(

(prod: Item[]) => {

this.ProdItems = prod

}

);

}

When I discovered that it works. I have tried some options and they work well.

And this is the final result.  Thank You so much.

So now we can take a coffee and look for other challenges.

[Thavasianand Sankaranarayanan]

Hi Tomasz, 

 

We are happy that the problem has been solved. 

 

Please get back to us if you need any further assistance.  

                          

Regards, 

Thavasianand S.

[Michael]

Thanks for this code.

How do I join two (or more) collections into Grid?

I have the scenario working in mat-grid, but I would like to switch over to Syncfusions Grid.

Do you have any examples of how to join collections in Syncf

[Joseph Christ Nithin Issack]

Hi Micheal,

  Based on your query, you want to join two or more collections in a grid, in EJ2 Grid, you can join two or more collections using foreign key column feature of the EJ2 Grid. Refer the below documentation for more information on foreign key column.

Documentation: https://ej2.syncfusion.com/angular/documentation/grid/columns/foreign-key-column/

Sample: https://ej2.syncfusion.com/angular/demos/#/material/grid/column/foreign-key

If this is not your requirement, share the below details.

• Explain how you want to add two collections to the grid.
• Video or screenshot to explain your requirement.
• Complete grid rendering code you are using.
• Syncfusion package version you are using.

Regards,

Jospeh I.