Datagrid server driven and detail pane

[yohanb78]

Summary

Some features like detail pane are only possible with *clrDgItems, when datagrid is serverdriven, *ngFor must be used
Maybe i did a mistake and I don't find how to do it ? But if it is not the case, it should be, (I think), pretty nice, if there was an input in detail pane to feed the data to display inside it.
Or when the button to display/hide the detail pane is clicked, he should know the parent row and feed the clr-dg-detail wih the item inside the row.

  open() {
    this.detailState = this.datagrid.rows.first.item;
  }

Use case

Examples

Workarounds

Currently, i can do something like :

<div class="clr-row">
<div class="clr-col"><clr-datagrid>....</clr-datagrid></div><div class="clr-col-8" *ngIf="detailPaneVisibleIfRowHasBeenSelectedIndatagrid">Here come the detail with some cards</div></div>

or routing on a child component when a row is clicked.

Regards

[bbogdanov]

I really tried to understand what you want to achieve but I am confused. Can you please explain it step by step what is the scenario you would like to achieve?

In the meantime, it doesn't matter if you have an input in the datagrid to feed that data or use the ngFor or *clrDgItems . The data you provide comes from the same place - the variable you pass that contains the data.

[yohanb78]

Thank you for having tried, my french to english translation deserve to be better.
1st step, detail pane is not working with this server driven strategy, nothing happen when clicking on the "arrow button"

<clr-datagrid (clrDgRefresh)="svc.onRefreshList($event)" [clrDgLoading]="svc.listLoading" #dg>
    <clr-dg-column>id</clr-dg-column>
    <clr-dg-row *ngFor="let item of svc.list$ | async; let idx = index"><clr-dg-cell></clr-dg-cell>.....</clr-dg-row>
    <clr-dg-detail *clrIfDetail="let detail">
        <clr-dg-detail-header>{{detail.name}}</clr-dg-detail-header>
        <clr-dg-detail-body>
        <-- ... -->
        </clr-dg-detail-body>
        </clr-dg-detail>
        <clr-dg-footer>
            <clr-dg-pagination [clrDgTotalItems]="svc.totalIemss" [clrDgPageSize]="svc.listPageSize" #pagination>
                ...
            </clr-dg-pagination>
        </clr-dg-footer>
</clr-datagrid>

So, I'm looking for workarounds in order to use the clr-dg-detail functionality.

[bbogdanov]

[clrDgItem]="item" inside clr-dg-row I believe is what you are missing.

<clr-dg-row *ngFor="let item of svc.list$ | async; let idx = index" [clrDgItem]="item" >
   <clr-dg-cell></clr-dg-cell>.....
</clr-dg-row>

[yohanb78]

Unbelievable.
I've always thought (don't know why, I m'using clarity since the first version) that [clrDgItem] only works in conjunction with * clrDgItems

I think I understood why you didn't understand my first post :)

Thank you.