Angular Grid Changing Child grid data source based on Master grid key with Firebase

[Jonas Blazinskas]

Hey Guys,

This might be an easy one but I am a beginner and trying to follow guides, but I have not seen an example like this.

So I followed this blogpost https://www.syncfusion.com/blogs/post/binding-a-firebase-data-source-to-grid-using-angularfire2.aspx to push data into a grid from my firebase and that works fine I am running into issues where I want to change the datasource of the child grid by using a key from master grid selected row args.

 

 public key: string;

constructor(

    firebase: AngularFireDatabase,

  ) {

    //fetch routes

    firebase

      .list('/routes')

      .valueChanges()

      .subscribe((routes) => {

        this.routeGrid.dataSource = routes; //intial data binding to grid

      });

    firebase

      .list('/routes')

      .snapshotChanges()

      .subscribe((routes) => {

        this.routeGrid.dataSource = routes; // sync server data changes to grid

      });

    firebase

      .list(`/routes/${this.key}/locations`)

      .valueChanges()

      .subscribe((routelocs) => {

        this.routelocationGrid.dataSource = routelocs; //intial data binding to grid

      });

    firebase

      .list(`/routes/${this.key}/locations`)

      .snapshotChanges()

      .subscribe((routelocs) => {

        this.routelocationGrid.dataSource = routelocs; // sync server data changes to grid

      });

  }

  public onRowSelected(args: any): void {

    this.key = args.data.key;

  }

[Jonas Blazinskas]

Of course, the above does not work because it is inside the constructor and only runs once at the beginning if I understand correctly. So changing the key does nothing. 

The next idea then I had to do something like this: where I then set this.firebase = firebase in the constructor.

And then run the same thing inside the onRowSelected event:

  public onRowSelected(args: any): void {

    this.key = args.data.key;

    this.firebase

      .list(`/routes/${this.key}/locations`)

      .valueChanges()

      .subscribe((routelocs) => {

        this.routelocationGrid.dataSource = routelocs; //intial data binding to grid

   

      });

    this.firebase

      .list(`/routes/${this.key}/locations`)

      .snapshotChanges()

      .subscribe((routelocs) => {

        this.routelocationGrid.dataSource = routelocs; // sync server data changes to grid

     

      });

  }

So I think I might have moved in the right direction, as I am getting the right amount of empty rows in the child grid after selecting a row in the master grid. But they are empty.

[Jonas Blazinskas]

Or I am absolutely wrong and due to my lack of understanding, and maybe you could show an appropriate way to set the data source dynamically.

[Jonas Blazinskas]

Hi, I am still haven't found a workaround, I would really appreciate it if you could point me in the right direction. Thank you for your help in advance!

[Joseph Christ Nithin Issack]

Hi Frank,

  Before proceeding with the solution, Share the below details so that we will be able to proceed further.

1. Share the video demo of the reported problem.
2. Share the complete Grid files and package.json file.
3. Are you getting any script error in console window? If yes, share the error details.
4. Bind the actionFailure event to the Grid and let us know if you face any exceptions or errors in that event.

 

   function actionFailure (args) {

        console.log(args);

    }

 

Regards,

Joseph I.

[Jonas Blazinskas]

Hi Joseph,

Please find the link to github page of the project: 

https://github.com/torusservices/CatSyncGridChild

Specifically the grid is located in this component: 
https://github.com/torusservices/CatSyncGridChild/tree/main/src/app/admin/admin

And from the 3 grids is the 

routelocationGrid

which is the child of the 

routeGrid

 from which we are getting the key from for the database path

In the error log it seems that the path is not defined even tho we can see that the key is logged. So it's weird that for some reason it thinks that it's not defined:

```

admin.component.ts:289 ERROR Error: child failed: path argument was an invalid path = "undefined". Paths must be non-empty strings and can't contain ".", "#", "$", "[", or "]"

    at validatePathString (index.esm2017.js:10799:15)

    at child (index.esm2017.js:12677:9)

    at Reference.child (index.esm2017.js:589:50)

    at FirebaseService.updateRouteLocs (firebase.service.ts:446:8)

    at admin.component.ts:319:23

    at Array.forEach (<anonymous>)

    at AdminComponent.actionCompleteRouteLoc (admin.component.ts:317:44)

    at AdminComponent_Template_ejs_grid_actionComplete_36_listener (admin.component.html:95:25)

    at executeListenerWithErrorHandling (core.mjs:15637:16)

    at Object.wrapListenerIn_markDirtyAndPreventDefault [as next] (core.mjs:15672:22)
```

You can even try out the problem yourself if you are prompted to log in you can use this account :
Login: [e-mail]
Pass: testing

Attachment: video1396555281_282da2e1.zip

[Jonas Blazinskas]

But honestly, now that I look at it, this error seems like a part that does not work due to grids not having data. It's something further down the line and not related. The issue where changing the datasource on selection is still there, and I am not sure if I am using action failure correctly, because I am not getting any failure console logs.

[Jonas Blazinskas]

Hi Joseph,

Do you require any additional info?

[Jonas Blazinskas]

Hey Joseph, 

Just bumping this one, one more time because this is the last issue that I have and I can't seem to figure it out for the life of me. If you managed to investigate this and help me out it would make my month!

Thank you for your help in advance!

[Jonas Blazinskas]

Hello Guys,

Is it possible to give me an example of setting the datasource of a grid dynamically with firebase it would really help me this is the last thing I am stuck on with no path forward.

Thank you guys for your help in advance!

[Joseph Christ Nithin Issack]

Frank,

  On validating the sample provided, we have found that the datasource value returned from the firebase is having the fields which are not defined to the column of the grid, this is the reason the grid was empty. On further validation, we found that when changing the datasource the valuechanges is executed before snapshotchanges whereas at the initial rendering the snapshotchanges is executed before valuechanges. On changing the order as below returns the data properly and the grid is getting populated.

Refer the below code example:

 

public onRowSelected(args: any): void {

    this.key = args.data.key;

    this.routename = args.data.name;

    debugger;

    console.log(this.key)

   

    this.firebase

    .list(`/routes/${this.key}/locations`)

    .snapshotChanges()

    .subscribe((routelocs) => {

      this.routelocationGrid.dataSource = routelocs; // sync server data changes to grid

      console.log(this.routelocationGrid.dataSource)

    });

   

    this.firebase

      .list(`/routes/${this.key}/locations`)

      .valueChanges()

      .subscribe((routelocs) => {

        this.routelocationGrid.dataSource = routelocs; //intial data binding to grid

        console.log(this.routelocationGrid.dataSource)

      });

     

  }

 

 

 

Please get back to us for further details.

[Jonas Blazinskas]

Incredible... That the solution was this easy LOL, thank you so much

[Suganya Gopinath]

Hi Frank,

We are glad that the provided solution worked to solve the issue. Please get back to us fir further assistance.

We are marking this ticket as solved. 

Regards,

Suganya Gopinath.