We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. (Last updated on: November 16, 2018).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

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
loading
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.


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. 


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

Regards, 
Thavasianand S. 


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.


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.

CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

;