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. Image for the cookie policy date

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

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;
  }


7 Replies

FA Frank Alberts November 9, 2022 04:35 PM

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.






FA Frank Alberts November 9, 2022 04:36 PM

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.



FA Frank Alberts November 14, 2022 06:10 AM

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!



JC Joseph Christ Nithin Issack Syncfusion Team November 16, 2022 03:56 AM

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.



FA Frank Alberts November 16, 2022 10:11 AM

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: testing@testing.com
Pass: testing



Attachment: video1396555281_282da2e1.zip


FA Frank Alberts November 17, 2022 05:42 AM

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.



FA Frank Alberts November 22, 2022 10:40 AM

Hi Joseph,

Do you require any additional info?


Loader.
Live Chat Icon For mobile
Up arrow icon