[Angular] - Using Detail row put the content below the grid and not in the current grid

pponzano

I'm tryng to shoe a detail grid on an Angular project but I got the row displayed outside the grid

 expandsRow(trRef: any, rowData: any) {
    this.dataTableElement.dtInstance.then((dtInstance: DataTables.Api) => {


       var row = dtInstance.row(trRef);
      if (row.child.isShown()) {
         row.child.hide();
         this._renderer.removeClass(trRef, 'shown');
         c
       }
       else {

        //this.childRow.instance. = this.format();
         let factory = this.compFactory.resolveComponentFactory(ChildStorageTypeComponent);
         this.childRow = this.viewRef.createComponent(factory);
        // this.childRow.instance.inputData = [rowData];
        // row.child(this.childRow.location.nativeElement).show();
        // this._renderer.addClass(trRef, 'shown');
        
       }
    // }, (err) => {
    //   console.log(err)
    //   this.notifyService.showError(
    //     err.statusText,
    //     'Error while inserting item.'
    //   )
     }
    )
  }

What am I doing wrong?

kthorngren

ITs hard to say without seeing the problem. Please post a link to your page or a test case showing the issue so we can help debug.
https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

It doesn't look like you are using row().child().show() to display the child, ie, line 17. Guessing something else is displaying the row and its displayed outside the grid.

Kevin

pponzano

Hello, I've followed this

https://stackblitz.com/edit/angular-rffbjq?file=src%2Fapp%2Fapp.component.css

and cross-checked...everything is similar...

kthorngren

Does that test case show the problem you are having?

I'm not familiar with stackblitz. If it shows the problem please post steps to run the test case to show the issue.

Kevin