Fetch data to grid

Thread ID:	Created:	Updated:	Platform:	Replies:
142347	Jan 29,2019 01:29 PM UTC	Jan 31,2019 06:04 AM UTC	Angular - EJ 2	3

Subscribe to this post

Tags: Grid

Tomasz

Asked On January 29, 2019 01:29 PM UTC

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.

Reply | Reply with quote

Thavasianand Sankaranarayanan [Syncfusion]

Replied On January 30, 2019 09:11 AM UTC

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.

Reply | Reply with quote

Tomasz

Replied On January 30, 2019 11:27 PM UTC

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.

Reply | Reply with quote

Thavasianand Sankaranarayanan [Syncfusion]

Replied On January 31, 2019 06:04 AM UTC

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.

Reply | Reply with quote

Fetch data to grid

Thread ID:

Created:

Updated:

Platform:

Replies:

Please sign in to access our forum

CONTACT US